如何将AJAX返回的WAV音频字节流直接加载到HTML<audio>标签播放

直接将AJAX返回的原始WAV二进制内容赋值给audio标签的src属性无法实现播放，核心原因有两个：

• src属性仅接受合法资源地址（普通URL、Blob URL、Data URL），无法直接识别原始二进制流
• 常规AJAX默认会将二进制响应按文本格式编码，哪怕你能看到开头的RIFF标识，中间的音频字节已经被转码损坏，无法正常解码播放

第一步：简化HTML结构 #

你原来写的audio标签内部的<source>子标签可以直接删掉，直接给audio标签本身设置src即可，减少一层DOM操作反而能避免属性更新不触发重载的问题，简化后的代码如下：

<h2>Answer</h2>
<audio controls autoplay id="audioholder">
  Your browser does not support the audio element.
</audio>

第二步：修改AJAX请求配置 #

必须显式指定响应类型为blob，禁止框架将二进制数据当文本处理，以jQuery AJAX为例：

$.ajax({
  url: "你的WAV音频接口地址",
  type: "GET",
  // 核心配置：指定响应类型为二进制Blob
  xhrFields: {
    responseType: "blob"
  },
  success: function (wavBlob) {
    // 播放逻辑写在这里
  }
})

第三步：将Blob转为临时地址赋值给audio标签 #

拿到合法的Blob对象后，通过URL.createObjectURL生成浏览器可识别的临时内存地址，直接赋值给audio标签即可：

success: function (wavBlob) {
  // 生成绑定内存中WAV数据的临时URL
  const audioTempUrl = URL.createObjectURL(wavBlob)
  const audioEl = document.getElementById("audioholder")
  audioEl.src = audioTempUrl
  audioEl.load()
  // 如需自动播放，捕获浏览器的自动播放拦截异常
  audioEl.play().catch(e => console.log("自动播放被浏览器策略拦截，需用户手动触发播放"))

  // 音频播放完成后释放临时URL占用的内存
  audioEl.addEventListener("ended", () => {
    URL.revokeObjectURL(audioTempUrl)
  })
}

如果按上述代码配置后仍然无法播放，先做两项检查：

• 把接口返回的Blob对象导出为本地.wav文件，双击本地文件确认音频本身可以正常播放，排除接口返回的WAV文件头缺失、编码不兼容（比如非PCM编码的WAV部分浏览器不支持）的问题
• 自动播放失败是现代浏览器的默认策略限制，必须要求用户先和页面产生交互（比如点击按钮）后再调用play()方法，和流加载逻辑无关

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