如何在JavaScript中播放Azure TTS REST API返回的指定格式音频？

数据老陈

2026-8-8

解决Azure TTS REST API音频响应播放问题

你遇到的问题核心是请求未正确获取二进制数据，以及Blob的MIME类型设置不够标准。以下是可行的解决步骤：

关键修正点

请求必须指定responseType: 'arraybuffer'，否则返回的音频数据会被解析为字符串，破坏二进制结构
MP3标准MIME类型是audio/mpeg（部分浏览器兼容audio/mp3，但用标准类型更稳妥）

完整实现代码示例

// 假设用axios发送请求
axios.post('https://eastus.tts.speech.microsoft.com/cognitiveservices/v1', {
    // TTS请求体内容（如text、voice等参数）
}, {
    headers: {
        'Ocp-Apim-Subscription-Key': '你的订阅密钥',
        'Content-Type': 'application/ssml+xml',
        'X-Microsoft-OutputFormat': 'audio-24khz-160kbitrate-mono-mp3'
    },
    responseType: 'arraybuffer' // 必须设置这个！
})
.then(res => {
    // 创建Blob对象
    const audioBlob = new Blob([res.data], { type: 'audio/mpeg' });
    // 创建可播放的音频URL
    const audioUrl = URL.createObjectURL(audioBlob);
    
    // 方式1：用原生Audio对象播放
    const audio = new Audio(audioUrl);
    audio.play().catch(err => console.error('播放失败:', err));
    
    // 方式2：绑定到页面已有的audio标签
    // document.getElementById('your-audio-element').src = audioUrl;
})
.catch(err => console.error('请求失败:', err));