H5 让我们的 Web 交互更加生动有趣,但浏览器的多样性以及挥之不去的兼容问题,却阻碍了技术发展。这并不是我们拒绝的理由,恰恰相反,它应该成为动力。
一、语音场景
文章标题为了严谨,所以叫音频合成。如果用大白话来解释,那就是「文字转语音」。语音的场景就太多了:
- 点读机:哪里不会点哪里
- 有声小说:看着太累,听起来不错
Web
页面警示用户的操作- 闹钟,提醒,小秘书
- 残疾人支持
…
这些都是随处可见的例子,但真正燃起我激情的是这个场景,简直酷炫到爆。原来动画和语音结合起来才是最佳的用户体验。
二、技术核心
看完上面的动画,按捺不住内心的好奇,随手就翻起了源码。Oh~原来如此,把你揪出来:
1 |
let sayhello = new window.SpeechSynthesisUtterance('你好,欢迎来到 Jartto 的博客!'); |
事情的真相就是简单如此,短短两行,就实现了语音播报。
三、兼容性
如此有趣的 API
,突然想到了一万个应用场景。别忙,先来看看 SpeechSynthesis
的兼容性吧:
看起来各大浏览器支持的还不错,那就试试呗!
四、API 文档
SpeechSynthesis
接口是语音服务的控制接口,属于网页语音 API,它可以用于获取设备上关于可用的合成声音的信息,开始、暂停语音,或除此之外的其他命令。
既然浏览器已经普遍支持了,那么我们不妨打印出来看看。
下面我们来适当的解释一下:
- SpeechSynthesis.paused: 当
SpeechSynthesis
处于暂停状态时,Boolean
值返回true
。 - SpeechSynthesis.pending: 当语音播放队列到目前为止保持没有说完的语音时,
Boolean
值返回true
。 - SpeechSynthesis.speaking: 当语音谈话正在进行的时候,即使
SpeechSynthesis
处于暂停状态,Boolean
返回true
。 - SpeechSynthesis.onvoiceschanged: 当由
SpeechSynthesis.getVoices()
方法返回的SpeechSynthesisVoice
列表改变时触发。
此外,还有几个非常实用的方法:
- SpeechSynthesis.cancel(): 移除所有语音谈话队列中的谈话。
- SpeechSynthesis.getVoices(): 返回当前设备所有可用声音的
SpeechSynthesisVoice
列表。 - SpeechSynthesis.pause(): 把 SpeechSynthesis 对象置为暂停状态。
- SpeechSynthesis.resume(): 把 SpeechSynthesis 对象置为一个非暂停状态:如果已经暂停了则继续。
- SpeechSynthesis.speak(): 添加一个 utterance 到语音谈话队列;它将会在其他语音谈话播放完之后播放。
API 很简单,这里就不赘述了,来个例子尝尝鲜。
五、代码演示
MDN Web Docs上面有个很形象的例子,我们拿过来学习学习:
1 |
var synth = window.speechSynthesis; |