如何用原生JavaScript播放POST请求返回的audio/mpeg音频文件

你的核心问题是错误地用JSON解析了二进制音频数据：接口返回的是audio/mpeg格式的二进制流，不是JSON，所以调用response.json()必然触发解析错误。正确的处理方式是直接获取二进制Blob对象，再转换成浏览器可播放的音频URL。

修正后的完整代码 #

async function postTTS(url, data) {
  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'xi-api-key': API_KEY_EL,
    },
    body: JSON.stringify(data),
  });
  // 关键：用blob()获取二进制音频数据，而非json()
  return response.blob();
}

// 绑定按钮点击事件（对应你HTML里的按钮id）
document.getElementById('outputSound').addEventListener('click', async () => {
  try {
    // 获取音频Blob对象
    const audioBlob = await postTTS(
      `https://api.elevenlabs.io/v1/text-to-speech/${bellaVoiceId}`,
      body
    );
    // 将Blob转换为浏览器可识别的临时音频URL
    const audioUrl = URL.createObjectURL(audioBlob);
    // 创建Audio实例并播放
    const audio = new Audio(audioUrl);
    await audio.play();
    // 播放结束后释放临时URL，避免内存泄漏
    audio.addEventListener('ended', () => {
      URL.revokeObjectURL(audioUrl);
    });
  } catch (err) {
    console.error('播放失败：', err);
  }
});

关键说明 #

• response.blob()：专门用于获取音频、图片这类二进制类型的响应数据，是处理文件流的正确方法。
• URL.createObjectURL(blob)：将Blob对象转换为浏览器可直接识别的临时URL，Audio对象可以通过这个URL加载并播放音频。
• URL.revokeObjectURL(audioUrl)：播放完成后主动释放临时URL，防止长期占用浏览器内存。

内容的提问来源于stack exchange，提问作者me-an-ape