JavaScript如何实现语音合成_怎样将文本转为语音?

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() 播放;支持实时控制:

  • speechSynthesis.pause()speechSynthesis.resume() 暂停/继续当前语音
  • speechSynthesis.cancel() 终止所有排队中的语音
  • 监听 onstartonendonerror 事件做状态反馈
  • 同一时间只能播放一个 utterance;新调用 speak() 会自动中断前一个(除非已结束)

处理中文文本的实用建议

中文合成质量依赖系统语音引擎,实际效果因平台而异:

  • Windows Chrome 常用 Microsoft 语音,发音较清晰;macOS Safari 推荐用 “Tingting”
  • 避免长句,适当添加标点(如逗号、句号)有助于断句和节奏
  • 数字、英文单词可能读错,可预先替换为汉字(如 “2025” → “二零二四”,“API” → “A-P-I”)
  • 移动端部分浏览器(如微信内置浏览器)可能禁用该 API,需降级提示用户