【JavaScript】后端返回的二进制流音频数据或本地音频资源，前端如何播放？_blob语音流 前端播放

一、接口设置

// 语音播放
export const getVoicePlay = (content: string) => {
  return requestVoice({
    url: '/tts/?text_prompt=' + content,
    method: 'get',
    responseType: 'blob', // 返回类型blob
  });
};
1
2
3
4
5
6
7
8

二、数据处理播放

 getVoicePlay(item.content).then((res: any) => {
   console.log(res);
   const blob = new Blob([res], { type: 'audio/wav' });
   const localUrl = (window.URL || webkitURL).createObjectURL(blob);
   const audio = document.createElement('audio');
   audio.style.display = 'none'; // 防止影响页面布局
   audio.controls = true;
   document.body.appendChild(audio);
   audio.src = localUrl;
   audio.playbackRate = 1.3; // 语速
   audio.play();
   
    // 语音播放完毕后，需要手动释放内存
    audio.onended = function () {
      document.body.removeChild(audio);
      URL.revokeObjectURL(localUrl);
    };
 });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

三、本地音频资源播放

如果我们要使用本地的音频资源，在 vue3 中那么我们需要对资源的地址做一下处理

// 动态获取本地的音频资源路径
const getWav = (index: number) => {
  return new URL(`/voice/voice${index}.wav`, import.meta.url).href;
};

// 播放音频
const playVoice = (index: number) => {
  const wavFile = getWav(index);
  const audio = document.createElement('audio');
  audio.style.display = 'none'; // 防止影响页面布局
  audio.controls = true;
  document.body.appendChild(audio);
  audio.src = wavFile;
  audio.playbackRate = 1.3;
  audio.play();
  // 语音播放完毕后，需要手动释放内存
  audio.onended = function () {
    document.body.removeChild(audio);
  };
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

感谢

后端返回二进制流音频数据，怎么让其可播放
前端播放二进制语音流