JavaScript语音合成依赖Web Speech API的SpeechSynthesis接口,支持Chrome、Edge等主流浏览器,需检测window.speechSynthesis可用性、监听voiceschanged事件获取音色,设置utterance属性后调用speak()播放,注意Safari中文兼容性及移动端手势触发限制。

JavaScript 中实现语音合成(文字转语音)主要靠浏览器内置的 Web Speech API,特别是其中的 SpeechSynthesis 接口。它无需第三方库、不发请求、纯前端运行,兼容 Chrome、Edge、Safari(部分支持)、Firefox(需手动启用),是目前最轻量实用的方案。
检查并获取语音合成实例
不是所有浏览器都默认开启或完全支持,先安全检测:
- 用
window.speechSynthesis判断 API 是否可用 - 调用
window.speechSynthesis.getVoices()获取可用音色列表(注意:首次调用可能为空,需监听voiceschanged事件后再读取)
基础语音播放代码
三步搞定一句话朗读:
- 创建 utterance:
const utter = new SpeechSynthesisUtterance('你好,今天天气不错'); - 可选设置语速、音调、音量、语言和音色:
utter.rate = 1; utter.lang = 'zh-CN'; utter.voice = voices.find(v => v.name.includes('Tingting')); - 播放:
window.speechSynthesis.speak(utter);
处理音色与语言适配
中文推荐优先选系统自带的中文音色(如 macOS 的 'Tingting'、Windows 的 'Microsoft Yaoyao'、Chrome 的 'Google Zh-CN'),但不同系统返回的 voice.name 差异大:
标签: javascript java 前端 go windows 浏览器 edge safari mac macos win
还木有评论哦,快来抢沙发吧~