SpeechSynthesis实现页面内容语音播报

1.效果

voice

2.使用

2.1 创建对象

 // 创建SpeechSynthesisUtterance对象方式1
 const message= new SpeechSynthesisUtterance('家人们谁懂啊')
 // 创建SpeechSynthesisUtterance对象方式2
 const message= new SpeechSynthesisUtterance()
 message.text = '家人们谁懂啊'

2.2 属性

message.text = "Hello, world!";
message.lang = "zh-CN"; // 指定语音合成的语言
message.rate = 1; // 设置语速，默认为1（正常速度）
message.volume = 1; // 设置音量，默认为1（最大音量）
message.pitch = 1 ;// 设置播报音调
message.voice = ''; // 朗读时的语音

//在语音开始合成时触发的事件处理程序
message.onstart = () => {
  console.log('');
};

//在语音合成完成时触发的事件处理程序
message.onend = () => {
  console.log('');
};

//在语音合成过程中发生错误时触发的事件处理程序
message.onerror= () => {
  console.log('');
};

//在暂停语音合成时触发的事件处理程序。
message.onpause= () => {
  console.log('');
}

//在恢复暂停的语音合成时触发的事件处理程序。
message.onresume= () => {
  console.log('');
}

//在语音合成过程中达到特定边界时触发的事件处理程序。
message.onboundary= () => {
  console.log('');
}

2.3 监听

message.addEventListener('start', () => {
  // 朗读开始时触发
});

message.addEventListener('end', () => {
  // 朗读结束时触发
});

message.addEventListener('error', (event) => {
  // 朗读错误时触发
  console.error('朗读错误:', event.error);
});

2.4 方法

window.speechSynthesis.speak(message);  // 开始朗读
window.speechSynthesis.cancel();  // 停止朗读。
window.speechSynthesis.pause() // 暂停当前正在进行的语音合成。
window.speechSynthesis.resume() // 恢复暂停的语音合成。

2.5 demo

const message= new SpeechSynthesisUtterance('家人们谁懂啊');
message.rate = 1; 
message.volume = 1; 
window.speechSynthesis.speak(message); 

2.6 适配

SpeechSynthesis是基于Web Speech API的一部分，目前主流浏览器大都支持Web Speech API，因此SpeechSynthesis理论上适用于以下浏览器：

Google Chrome：支持SpeechSynthesis API的所有版本。
Mozilla Firefox：支持SpeechSynthesis API的所有版本。
Microsoft Edge：支持SpeechSynthesis API的所有版本。
Safari：从Safari 14版本开始支持SpeechSynthesis API。

2.7 问题

不同的浏览器可能会在支持的语音合成引擎、可用语音列表和不同语音的声音质量方面有所差异。具体的支持情况和可用语音列表可以通过speechSynthesis.getVoices()方法获取。

console.log(window.speechSynthesis.getVoices())

//↓↓↓ 我这么写浏览器直接不吱声了,不知道啥原因也没报错
const voiceList = window.speechSynthesis.getVoices()
message.voice = voiceList[0]