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

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

相关推荐
软件技术NINI2 小时前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
mapbar_front3 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie3 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀3 小时前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻3 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
叶梅树4 小时前
从零构建A股量化交易工具:基于Qlib的全栈系统指南
前端·后端·算法
巴博尔4 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
Asthenia04125 小时前
技术复盘:从一次UAT环境CORS故障看配置冗余的危害与最佳实践
前端
csj505 小时前
前端基础之《React(1)—webpack简介》
前端·react
被巨款砸中5 小时前
前端 20 个零依赖浏览器原生 API 实战清单
前端·javascript·vue.js·web