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

一、接口设置

// 语音播放exportconstgetVoicePlay=(content:string)=>{returnrequestVoice({
    url:'/tts/?text_prompt='+ content,
    method:'get',
    responseType:'blob',// 返回类型blob});};

二、数据处理播放

getVoicePlay(item.content).then((res:any)=>{console.log(res);const blob =newBlob([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);};});

三、本地音频资源播放

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

// 动态获取本地的音频资源路径constgetWav=(index:number)=>{returnnewURL(`/voice/voice${index}.wav`,import.meta.url).href;};// 播放音频constplayVoice=(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);};};

感谢

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