前言
你有没有想过，如果你的网页能说话，它会说些什么？是"欢迎光临，我是你最好的朋友！"还是"快来看看我的新功能！"无论如何，今天我们要聊的就是如何让你的网页拥有这种超能力------通过 SpeechSynthesis 接口，让文本瞬间变成声音，仿佛你的网页突然变成了一个有声有色的播音员。
代码实战
js
if('speechSynthesis' in window){
var voices = [];
var synth = window.speechSynthesis;
synth.onvoiceschanged = () => {
voices = synth.getVoices();
};
const utterance = new SpeechSynthesisUtterance('测试文字');
// const utterance = new SpeechSynthesisUtterance('测试文字');
// utterance.text ='测试文字'
// BCP 47标准的语言标签
// 可设置的常见语言及解释：
// "zh-CN" - 简体中文（中国大陆）
// "en-US" - 美式英语
// "en-GB" - 英式英语
// "zh-HK" - 繁体中文（香港）
// "zh-TW" - 繁体中文（台湾）
// "fr-FR" - 法语（法国）
// "de-DE" - 德语（德国）
// "es-ES" - 西班牙语（西班牙）
// "it-IT" - 意大利语（意大利）
// "ja-JP" - 日语（日本）
// "ko-KR" - 韩语（韩国）
// "ru-RU" - 俄语（俄罗斯）
// "pt-BR" - 葡萄牙语（巴西）
utterance.lang = 'zh-CN';
// 设置语音参数
utterance.volume = 1; // 音量 (0.0 到 1.0)
utterance.rate = 1; // 语速 (0.1 到 10)
utterance.pitch = 1; // 音调 (0 到 2)
// 重要！
utterance.voice = voices.filter(item => item.lang === lang && item.localService)[0]
synth.speak(utterance);
}以上代码就是可运行的代码，记得要传给它的文字最好是与lang相同的文字，这样播报效果更好。查看MDN发现兼容性可以满足大部分人需求，但用于生产环境的话还需谨慎，毕竟是实验性功能。 MDN示例：mdn.github.io/dom-example...
问题
选择除中文外的其它语言播放没反应
如果你的需求是支持多语言，那大概率会遇到这个问题。首先可能疑惑是voice属性没设置，voice属性MDN的解释是获取和设置将用于说出话语的声音。那这个属性就显得尤为重要，我们通过监听onvoiceschanged事件得出本机支持的语音列表，打印语音列表（安装完需要语音之后的打印列表）重点关注localService属性
localService：指示语音是由本地语音合成器服务（true）还是远程语音合成器服务提供（false）
问题基本明确，是因为目前localService为true的只有中文选项，其它均需要远程语音合成。那么我们只需要提供支持本地语音合成选项即可。解决方法就是给本机安装你需要的语音
按照操作指引，选择你需要的语音选项并下载。下载后需要重启电脑才能生效。以上是windows电脑解决方法，其它系统可同样尝试解决。
Chrome浏览器偶现无声音
调用语音播放一般是由ws或接口接收到数据传入后播放，并不是用户主动触发，由此产生这个奇怪的问题。原因是自v71版用户必须手动点击播放按钮才能播放语音合成内容，用户不主动操作那么直接禁止音频的播放
解决办法就是可以创建一个隐藏的按钮或其它元素，如果不是主动触发就需调用按钮的点击事件来触发语音播放