JavaScript 可通过 Web Speech API 的 SpeechSynthesis 接口实现原生语音合成,需检测支持性、监听 onvoiceschanged 事件获取语音列表,设置 voice、rate、pitch、volume 等参数,调用 speak() 播放并支持暂停、继续、取消及事件监听,中文合成需注意平台差异与文本预处理。

JavaScript 可以通过浏览器内置的 Web Speech API 中的 SpeechSynthesis 接口实现语音合成,无需第三方服务或额外库,兼容主流现代浏览器(Chrome、Edge、Safari 14.1+、Firefox 部分支持)。
检查并获取语音合成实例
SpeechSynthesis 是一个单例对象,通过 window.speechSynthesis 访问。使用前建议先检测支持性,并监听语音引擎就绪事件:
- 用
'onvoiceschanged'事件确保语音列表加载完成(尤其首次调用时可能为空) - 调用
speechSynthesis.getVoices()获取可用语音,通常需在事件触发后调用才有效 - 可缓存语音列表,避免重复查询
选择语音并设置发音参数
不同系统/浏览器预装的语音不同(如中文常用 “Microsoft Yaoyao”、“Tingting”、“Google 中文(简体)”)。关键参数包括:
-
voice:从getVoices()返回数组中选取,推荐按lang(如'zh-CN')和name筛选 -
rate:语速(0.5–2,默认 1),数值过大会导致吞音 -
pitch:音调(0–2,默认 1),影响自然度但对中文效果有限 -
volume:音量(0–1,默认 1)
播放、暂停与控制语音
创建 SpeechSynthesisUtterance 实例后,用 speechSynthesis.speak() 播放;支持实时控制:
立即学习“Java免费学习笔记(深入)”;
-
speechSynthesis.pause()和speechSynthesis.resume()暂停/继续当前语音 -
speechSynthesis.cancel()终止所有排队中的语音 - 监听
onstart、onend、onerror事件做状态反馈 - 同一时间只能播放一个 utterance;新调用
speak()会自动中断前一个(除非已结束)
处理中文文本的实用建议
中文合成质量依赖系统语音引擎,实际效果因平台而异:










