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

一、接口设置

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

二、数据处理播放

 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);}; });

三、本地音频资源播放

如果我们要使用本地的音频资源，在 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);};};

感谢

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