聊聊js中的Speech Synthesis API

931 阅读2分钟

这是我参与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可以使用:

微信截图_20220205192728.png

  • text:要合成的文字内容。

  • rate:语速。

  • pitch:音高。

  • volume:音量。

  • lang:使用的语言,如zh-CN。可以通过speechSynthesis.getVoices()方法去获取到系统存在的lang。

微信截图_20220205193121.png

  • onboundary:当说出的话语到达单词或句子的边界时触发。
  • onerror:当发生错误导致无法成功说出话语时触发。
  • onstart: 当话语开始被说出时触发。
  • onpause:当话语中途暂停时触发。
  • onresume: 当暂停的话语恢复时触发。
  • onend: 当话语说完时触发。

还有这个实例对象也从它的父接口继承方法:

SpeechSynthesis.speak():添加一个语音到谈话队列,它将会在其他语音谈话播放完之后播放。

SpeechSynthesis.getVoices():返回当前设备所有可用声音的列表。

SpeechSynthesis.pause():把 SpeechSynthesis 对象置为暂停状态。

SpeechSynthesis.resume():把 SpeechSynthesis 对象置为一个非暂停状态:如果已经暂停了则继续。

SpeechSynthesis.cancel() :移除所有语音谈话队列中的谈话。

兼容

IE和绝大部分安卓手机是不可能了,但是谷歌和苹果支持的却出奇的好。而且,声音太过机械并不自然,如果既要考虑兼容性又要考虑很多的声色,那么还可以考虑诸如百度语音合成来去完成需求。

微信截图_20220205164334.png