HTML <audio> 标签仅支持播放预录制音频，无法实现文字转语音；真正实现TTS需依赖Web Speech API的SpeechSynthesis接口，通过SpeechSynthesisUtterance配置参数并调用speak()、pause()、cancel()等方法进行原生语音控制。
HTML <audio> 标签本身不支持语音合成（TTS）功能，它只用于播放预录制的音频文件（如 MP3、WAV），无法将文字实时转为语音并朗读。真正实现“文字转语音朗读”的控制接口，靠的是 Web Speech API 中的 SpeechSynthesis 接口，不是 <audio> 标签。
如果你看到有人用 <audio> 标签配合语音合成，那通常是混淆了概念——比如把 TTS 生成的音频流导出为 blob 再喂给 <audio> 播放，但这属于绕路方案，既低效又失去原生控制能力（如暂停在句子中间、动态调速、实时中断等）。
要实现真正的语音合成朗读控制，必须用 JavaScript 调用 speechSynthesis：
✅ 正确做法：用 SpeechSynthesisUtterance + speechSynthesis
const utterance = new SpeechSynthesisUtterance('今天天气真好');
utterance.lang = 'zh-CN';
utterance.rate = 1.0;
utterance.pitch = 1.0;
utterance.volume = 1.0;
// 播放
window.speechSynthesis.speak(utterance);
// 暂停（当前正在说的）
window.speechSynthesis.pause();
// 恢复
window.speechSynthesis.resume();
// 停止（清空当前和待播队列）
window.speechSynthesis.cancel();? 关键控制能力（<audio> 完全不具备）
-
按句/词级暂停恢复：
pause()/resume()可在任意位置中断并续播 -
动态参数调节：运行中可改
rate、pitch、volume（需新建 utterance 并重播） -
事件监听：
onstart、onend、onerror、onpause精准响应状态变化 -
队列管理：多个 utterance 会自动排队；
cancel()清队列，pause()只停当前 - 中文语义理解：保留标点（如“100%”读作“百分之百”，非“百分之一百”）
⚠️ 注意事项（实操易踩坑）
-
speechSynthesis.getVoices()初次调用常为空，必须监听voiceschanged事件后再获取：window.speechSynthesis.onvoiceschanged = () => { const voices = window.speechSynthesis.getVoices(); const zhVoice = voices.find(v => v.lang === 'zh-CN'); utterance.voice = zhVoice; }; - Safari 和部分 iOS WebView 禁止自动触发，首次
speak()必须由用户手势（如点击按钮）发起 - 长文本建议按
。！？分段，每段新建SpeechSynthesisUtterance，避免卡顿或中断丢失 - 不同系统返回的 voice 名称差异大（如 macOS 是 “Alex”、“Ting-Ting”，Windows 是 “Microsoft Yaoyao”），靠
lang匹配更可靠
❌ 为什么不用 <audio> 实现 TTS 控制？
-
<audio>没有speak()、pause()在语句中途的能力 - 它无法解析文本、调用 TTS 引擎、动态调整语速音调
- 若强行用 Web Audio API 或录音 blob 中转，延迟高、兼容差、无错误反馈、无法监听朗读进度
本质上，语音合成是浏览器调用系统级 TTS 引擎（如 macOS 的 AVSpeechSynthesizer、Windows 的 SAPI）的过程，<audio> 是播放器，SpeechSynthesis 才是“说话的人”。想控制朗读，就得跟“人”打交道，而不是跟“录音机”打交道。
立即学习“前端免费学习笔记（深入）”；
