让你的网页会说话:用 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将限制语音合成自动播放

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

相关推荐
萌新小码农‍20 分钟前
SpringBoot+alibaba的easyexcel实现前端使用excel表格批量插入
前端·spring boot·excel
冰暮流星1 小时前
css3新增背景图片样式
前端·css·css3
书唐瑞1 小时前
谷歌浏览器和火狐浏览器对HTML的嗅探(Sniff)能力
前端·html
rocky1912 小时前
谷歌浏览器插件 使用 playwright 回放用户动作键盘按键特殊处理方案
前端
rocky1912 小时前
playwright里兼容处理回放无界微前端内iframe内部元素事件和不在无界微前端内的iframe元素
前端
rocky1912 小时前
谷歌浏览器插件 使用 playwright 回放slide 拖动动作
前端
惺忪97982 小时前
回调函数的概念
开发语言·前端·javascript
前端 贾公子2 小时前
Element Plus组件v-loading在el-dialog组件上使用无效
前端·javascript·vue.js
天外飞雨道沧桑2 小时前
JS/CSS实现元素样式隔离
前端·javascript·css·人工智能·ai
程序0072 小时前
前端写一个密码登录,验证码登录,注册模板
前端