这是我参与2022首次更文挑战的第20天,活动详情查看:2022首次更文挑战
介绍
众所周知,Speech Synthesis 在js里负责合成语音,简而言之,就是通过它可以让你输入的字符串通过浏览器说出来,听到这个是不是有小伙伴想到了什么新想法,如,捕获b站的弹幕让浏览器自己读出来等等,本期我们就简单来了解一下它吧。matt-west大佬在codepen也做了一套代码演示,有兴趣的小伙伴可以先康康~
概念
Speech Synthesis API是js的语音服务的控制接口,它可以用于获取设备上关于可用的合成声音的信息,开始、暂停语音,或除此之外的其他命令。
使用
使用起来异常的简单,如下:
let utterThis = new SpeechSynthesisUtterance("Hello world!");
speechSynthesis.speak(utterThis);
你可以拷贝下来,复制到你的谷歌浏览器控制台上执行一下,你就可以听到一个机器女声对你说出一句”Hello world!“。那么现在就恭喜你,你已经打开了语音合成的大门。
当然,他可操作的内容可不止这些,它的实例还有很多的API可以使用:
-
text:要合成的文字内容。
-
rate:语速。
-
pitch:音高。
-
volume:音量。
-
lang:使用的语言,如zh-CN。可以通过
speechSynthesis.getVoices()方法去获取到系统存在的lang。
- onboundary:当说出的话语到达单词或句子的边界时触发。
- onerror:当发生错误导致无法成功说出话语时触发。
- onstart: 当话语开始被说出时触发。
- onpause:当话语中途暂停时触发。
- onresume: 当暂停的话语恢复时触发。
- onend: 当话语说完时触发。
还有这个实例对象也从它的父接口继承方法:
SpeechSynthesis.speak():添加一个语音到谈话队列,它将会在其他语音谈话播放完之后播放。
SpeechSynthesis.getVoices():返回当前设备所有可用声音的列表。
SpeechSynthesis.pause():把 SpeechSynthesis 对象置为暂停状态。
SpeechSynthesis.resume():把 SpeechSynthesis 对象置为一个非暂停状态:如果已经暂停了则继续。
SpeechSynthesis.cancel() :移除所有语音谈话队列中的谈话。
兼容
IE和绝大部分安卓手机是不可能了,但是谷歌和苹果支持的却出奇的好。而且,声音太过机械并不自然,如果既要考虑兼容性又要考虑很多的声色,那么还可以考虑诸如百度语音合成来去完成需求。