让你的网页会说话：用 SpeechSynthesis 让文本变成声音的魔法

前言

你有没有想过，如果你的网页能说话，它会说些什么？是"欢迎光临，我是你最好的朋友！"还是"快来看看我的新功能！"无论如何，今天我们要聊的就是如何让你的网页拥有这种超能力------通过 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的只有中文选项，其它均需要远程语音合成。那么我们只需要提供支持本地语音合成选项即可。解决方法就是给本机安装你需要的语音

附录 A：支持的语言和语音

按照操作指引，选择你需要的语音选项并下载。下载后需要重启电脑才能生效。以上是windows电脑解决方法，其它系统可同样尝试解决。

Chrome浏览器偶现无声音

调用语音播放一般是由ws或接口接收到数据传入后播放，并不是用户主动触发，由此产生这个奇怪的问题。原因是自v71版用户必须手动点击播放按钮才能播放语音合成内容，用户不主动操作那么直接禁止音频的播放

被垃圾广告滥用后谷歌浏览器71将限制语音合成自动播放

解决办法就是可以创建一个隐藏的按钮或其它元素，如果不是主动触发就需调用按钮的点击事件来触发语音播放