如何转换API返回的音频响应数据并在前端实现正常播放

你现有代码播放失败的核心问题是错误使用text()方法读取二进制音频响应：text()会按照UTF-8等文本编码规则解析原始字节，会把单字节二进制值错误转码为多字节字符，最终生成的Blob和原始音频数据不一致，自然无法正常解码播放。

直接通过fetch原生的二进制读取方法拿响应，跳过手动逐字节转码的错误逻辑，从根源避免编码损坏：

getAudio = async () => {
  try {
    const url = `example`;
    // 直接读取二进制ArrayBuffer格式响应，禁止用text()处理二进制音频
    const res = await fetch(url);
    if (!res.ok) throw new Error('音频请求失败');
    const audioBuffer = await res.arrayBuffer();

    let audioURL = "";
    if (audioBuffer.byteLength > 200) {
      // 注意：Blob的type值需要和接口实际返回的音频格式匹配
      // wav对应audio/wav，mp3对应audio/mpeg，ogg对应audio/ogg
      const blob = new Blob([audioBuffer], { type: "audio/wav" });
      audioURL = window.URL.createObjectURL(blob);
    } else {
      toast("No audio found!", { type: "error" });
    }

    this.setState({ audioURL });
  } catch (e) {
    console.log(e);
    toast("音频加载异常", { type: "error" });
  }
};

• 如果替换代码后仍无法播放，先核对接口返回的真实音频格式，修改Blob对应的MIME type值即可，类型不匹配会导致浏览器无法解码音频。
• 音频播放完成、组件卸载时记得调用window.URL.revokeObjectURL(audioURL)释放生成的对象URL，避免不必要的内存占用。
• 所有二进制类型的接口响应（音频、图片、文件等），都不要用text()读取，优先使用arrayBuffer()或blob()方法直接获取原始二进制数据，避免转码导致内容损坏。

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