如何将HTTP响应返回的ArrayBuffer转为src绑定到audio音频元素

错误原因 #

• context.destination 是Web Audio API的音频输出节点对象，并非音频资源的URL链接，而<audio>元素的src属性仅接受合法的资源URL字符串，二者完全不兼容，因此无法正常加载。
• 你当前的实现用Web Audio API只能实现单次触发播放，无法复用原生播放器的暂停、进度拖动、音量调节等控制能力。

最优修改方案 #

你不需要引入Web Audio API做解码，直接将拿到的ArrayBuffer格式音频数据封装为Blob，生成临时资源URL赋值给绑定变量即可。

修改后JS代码 #

this.toSpeechService.getAudioFile(this.text).subscribe(res => {
  // 请根据后端实际返回的音频格式调整MIME类型：mp3对应'audio/mpeg'，wav对应'audio/wav'
  const audioBlob = new Blob([res], { type: 'audio/mpeg' });
  // 生成可被audio标签识别的临时资源链接
  this.audioSrc = URL.createObjectURL(audioBlob);
  console.log(res);
});

// 【可选内存优化】在组件销毁生命周期中释放临时URL占用的内存，避免内存泄漏
// 例Angular的ngOnDestroy、Vue的beforeUnmount、React的useEffect清理函数：
// ngOnDestroy() {
//   if (this.audioSrc) {
//     URL.revokeObjectURL(this.audioSrc);
//   }
// }

修改后HTML代码 #

<audio controls="controls">
  <!-- type属性要和上面Blob的MIME类型保持一致，不确定可以省略该属性让浏览器自动识别 -->
  <source [src]="audioSrc" type="audio/mpeg" />
  您的浏览器不支持audio元素
</audio>

特殊场景说明 #

如果确实需要先通过Web Audio API处理音频（比如做增益、音效调整等）之后再给原生播放器播放，可以用MediaStreamDestination生成输出流再转URL，示例逻辑如下：

context.decodeAudioData(res, buffer => {
  const source = context.createBufferSource();
  source.buffer = buffer;
  // 创建流输出节点
  const streamDest = context.createMediaStreamDestination();
  source.connect(streamDest);
  source.start(0);
  // 流转为URL赋值给audioSrc
  this.audioSrc = URL.createObjectURL(streamDest.stream);
})

内容的提问来源于stack exchange，提问作者Qiimiia