使用 speechSynchesis.speak()为web程序添加语音

使用 speechSynchesis.speak()为web程序添加语音

 const speecks = new SpeechSynthesisUtterance('在叽叽喳喳什么')
 window.speechSynthesis.speak(speecks)
 

这两行代码的作用就是：创建一个“要朗读的文本”，然后让浏览器发声。

SpeechSynthesisUtterance 是什么？

它是一个“语音朗读任务”的对象。

你创建它之后，可以设置：

speech.text：要朗读的文字

speech.lang：语言（如 zh-CN）

speech.rate：语速（默认 1）

speech.pitch：音调（默认 1）

speech.volume：音量（0–1）

speech.voice：选择具体的声音（女声、男声等）

const u = new SpeechSynthesisUtterance();
u.text = "你好，这是浏览器的语音合成";
u.lang = "zh-CN";
u.rate = 1;     //语速
u.pitch = 1;    //音调
u.volume = 1;   //音量

SpeechSynthesisUtterance 提供一系列事件：

speech.onstart = ()=> console.log("开始朗读");
speech.onend = ()=> console.log("结束");
speech.onerror = ()=> console.log("发生错误");
speech.onpause = ()=> console.log("暂停");
speech.onresume = ()=> console.log("继续");
speech.onboundary = (e)=> console.log("读到一个词或句子");

适合做字幕、打字机效果、逐词高亮等。

window.speechSynthesis.speak()

浏览器收到一个 SpeechSynthesisUtterance，就会把它排进播放队列并朗读。

你可以：

暂停：speechSynthesis.pause()

恢复：speechSynthesis.resume()

停止：speechSynthesis.cancel()

可以选不同的声音（voice）

let voices = speechSynthesis.getVoices();
console.log(voices);

然后选择一个

speech.voice = voices.find(v => v.lang === "zh-CN");

有些浏览器（尤其是移动端）需要 用户操作后才能播放声音：
如必须先点按钮，否则 speak() 不生效。

SpeechSynthesisUtterance 用来创建“要朗读什么”。
speechSynthesis.speak() 用来实际播放语音。

它是浏览器内置的免费 TTS，适合做：

网页朗读

语音助手

教育类应用

字幕同步

辅助功能（Accessibility）