JavaScript语音合成依赖Web Speech API的SpeechSynthesis接口，支持纯前端文本转语音；需检测window.speechSynthesis可用性，监听voiceschanged获取音色，创建SpeechSynthesisUtterance配置参数后调用speak()播放，并可控制暂停、恢复、取消及监听事件。
JavaScript 实现语音合成主要依靠 Web Speech API 中的 SpeechSynthesis 接口，它无需后端、纯前端即可将文本转为语音，兼容 Chrome、Edge、Safari（部分支持）、Firefox（需手动启用）等现代浏览器。
检查并获取语音合成实例
不是所有浏览器都默认启用或完全支持该 API，调用前应先检测可用性：
- 用
window.speechSynthesis判断是否存在 - 通过
speechSynthesis.getVoices()获取系统可用音色列表（注意：首次调用可能为空，需监听voiceschanged事件）
示例：
if ('speechSynthesis' in window) {
const synth = window.speechSynthesis;
synth.onvoiceschanged = () => {
const voices = synth.getVoices();
console.log('可用语音：', voices);
};
} else {
console.warn('当前浏览器不支持语音合成');
}
设置语音参数并播放文本
创建 SpeechSynthesisUtterance 实例，配置文字、语速、音高、音量和指定语音（voice），再交给 speechSynthesis.speak() 播放：
立即学习“Java免费学习笔记（深入）”；
-
text：要朗读的字符串（建议过滤 HTML 标签和特殊符号） -
rate：语速（0.1–10，默认 1） -
pitch：音高（0–2，默认 1） -
volume：音量（0–1，默认 1） -
voice：从getVoices()中选取，例如voices.find(v => v.lang === 'zh-CN')
示例（中文朗读）：
const utterance = new SpeechSynthesisUtterance('你好，欢迎使用语音合成');
utterance.lang = 'zh-CN';
utterance.rate = 0.9;
utterance.pitch = 1.1;
// 选择中文语音（确保已加载完成）
synth.onvoiceschanged = () => {
const voices = synth.getVoices();
const cnVoice = voices.find(v => v.lang.includes('zh'));
if (cnVoice) utterance.voice = cnVoice;
};
synth.speak(utterance);
控制播放与监听状态
语音合成支持暂停、恢复、取消和事件监听，适合做交互式语音功能：
-
synth.pause()和synth.resume()控制播放暂停/继续 -
synth.cancel()终止所有排队中的语音 - 常用事件：
onstart、onend、onerror、onpause、onresume
例如监听结束并自动播放下一句：
utterance.onend = () => {
console.log('朗读完成');
// 可触发下一步逻辑，如高亮对应段落、加载新内容等
};
注意事项与兼容性提醒
实际开发中容易踩坑的地方：
- Safari 对中文语音支持较弱，部分系统无内置中文 voice，可降级提示或 fallback 到英文
- 移动端 iOS Safari 仅在用户手势触发（如点击按钮）后才允许首次调用
speak() - 多次连续调用
speak()会自动入队，但未处理好cancel()可能导致旧语音意外播放 - 隐私模式下某些浏览器会禁用该 API，建议加 try-catch 和友好提示
不复杂但容易忽略细节，合理封装成工具函数可大幅提升复用性和健壮性。
