C#如何将Azure TTS字节流直接传递给HTML5 audio元素？

数据老陈

2026-7-23

无需文件读写的文本转语音前端播放方案

你当前用临时文件中转的方案完全可以替代，下面两种方法更直接高效：

方案一：Base64 Data URI 直接注入

服务器把Azure返回的MP3字节数组（或MemoryStream）转成Base64编码字符串，传给前端后，直接将<audio>的src设为data:audio/mpeg;base64,{Base64字符串}就能播放。

示例代码

后端（以C#为例）

// audioBytes是Azure返回的MP3字节数组
string base64Audio = Convert.ToBase64String(audioBytes);
// 将base64Audio通过接口或视图模型返回给前端

前端（JavaScript）

// 假设已从后端拿到base64Audio字符串
const audioEl = document.getElementById('your-audio-element');
audioEl.src = `data:audio/mpeg;base64,${base64Audio}`;
audioEl.play();

方案二：流式返回音频，前端用Blob创建临时URL

服务器直接把MP3字节流作为响应返回，设置响应头Content-Type: audio/mpeg，前端通过请求获取流后转成Blob，再用URL.createObjectURL生成临时地址给<audio>。这种方式没有Base64的体积膨胀问题，大音频场景更合适。

示例代码

后端（以C# ASP.NET Core为例）

[HttpPost("synthesize")]
public IActionResult Synthesize([FromBody] string text)
{
    // 调用Azure TTS服务获取MP3字节数组audioBytes
    return File(audioBytes, "audio/mpeg");
}

前端（JavaScript）

async function playVoice(text) {
    const res = await fetch('/synthesize', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(text)
    });
    const audioBlob = await res.blob();
    const tempAudioUrl = URL.createObjectURL(audioBlob);
    
    const audioEl = document.getElementById('your-audio-element');
    audioEl.src = tempAudioUrl;
    audioEl.play();
    
    // 播放结束后释放临时URL，避免内存泄漏
    audioEl.onended = () => URL.revokeObjectURL(tempAudioUrl);
}