如何在React应用中使用Azure文本转语音的音频二进制响应作为音频源

1. 先确认请求是否正确拿到二进制数据 #

这是最容易踩的坑：如果请求没明确指定获取二进制响应，浏览器会默认把返回的二进制解析成文本/JSON，直接导致数据损坏。

• 用fetch的话，必须用arrayBuffer()处理响应：

fetch('你的Azure TTS接口地址', {
  method: 'POST',
  // 带上Azure要求的请求头，比如Authorization、Content-Type等
})
.then(response => response.arrayBuffer()) // 关键：别用json()或text()
.then(data => {
  const audioBlob = new Blob([data], { type: 'audio/mpeg' }); // 格式要和Azure返回的匹配
  setAudioUrl(URL.createObjectURL(audioBlob));
})
.catch(err => console.error(err));

• 用axios的话，必须加responseType: 'arraybuffer'配置：

axios.post('你的Azure TTS接口地址', 请求数据, {
  headers: {
    // Azure要求的请求头，比如Authorization、Content-Type: application/ssml+xml等
  },
  responseType: 'arraybuffer' // 核心配置，别漏
})
.then(response => {
  // 直接用响应头里的Content-Type更稳妥，不用硬编码
  const audioBlob = new Blob([response.data], { type: response.headers['content-type'] });
  setAudioUrl(URL.createObjectURL(audioBlob));
});

2. 核对Azure返回的音频格式和Blob的type参数 #

Azure TTS默认可能返回audio/wav格式，不是audio/mpeg，如果Blob的type设错，浏览器根本解析不了音频。

• 打开Thunder Client看响应头的Content-Type，比如显示audio/wav，就把Blob的type改成'audio/wav'；
• 最稳妥的方式是直接读取响应头里的类型，避免硬编码出错。

3. 检查Blob数据完整性 #

创建Blob后打印audioBlob.size，和Thunder Client里保存的文件大小对比：

• 如果两个数值差很多，说明请求拿到的数据已经损坏，回到第一步检查响应处理逻辑；
• 如果大小一致，可能是浏览器不支持该音频编码，可以把Azure的输出格式改成通用的，比如audio-16khz-128kbitrate-mono-mp3。

4. 可选：清理Blob URL避免内存泄漏 #

组件卸载或者更新音频链接时，记得释放之前创建的Blob URL：

useEffect(() => {
  return () => {
    if (audioUrl) {
      URL.revokeObjectURL(audioUrl);
    }
  };
}, [audioUrl]);

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