HTML5 中和 Web Speech 相关的 API 实际上有两类,一类是 "语音识别 (Speech Recognition)",另外一个就是 "语音合成 (Speech Synthesis)",这两个名词听上去很高大上,实际上指的分别是 "语音转文字",和 "文字变语音"。
而本文要介绍的就是这里的 "语音合成 - 文字变语音"。为什么称为 "合成" 呢?比方说你 Siri 发音 "你好,世界!" 实际上是把 "你"、"好"、"世"、"界" 这 4 个字的读音给合并在一起,因此,称为 "语音合成"。
"语音识别" 和 "语音合成" 看上去像是正反两方面,应该带有镜面气质,实际上,至少从兼容性来看,两者并无法直接对等。
"语音识别 (Speech Recognition)" 目前的就 Chrome 浏览器和死忠小弟 Opera 浏览器默认支持,并且需要
私有前缀:
- webkit
但是,"语音合成 (Speech Synthesis)" 的兼容性要好上太多了,如下图:
所以,本文主要介绍下理论上更为适用的 HTML5 Speech Synthesis API。不过在此之前,Speech Recognition API 还是简单提一下。
Speech Recognition API 也就是语音识别功能,需要麦克风等音频输入设备的支持,在 Chrome 浏览器下,实际上可以添加简单的属性就可以让部分控件有语音识别功能,一行 JS 都不需要写,这个我之前有专门写文章介绍过:" "
就是在输入框上加一个
属性即可,例如:
- x-webkit-speech
- <input x-webkit-speech />
然而,我刚刚打开 demo 页面一测试,发现原来有的麦克风(下图为以前截图)居然不见了。。。。看来已经被 chrome 无情抛弃了!
好吧,就当我上面的内容,什么都没说过。不过有一点是可以肯定的,就是原来输入框上的那个语音识别底层就是使用的 Speech Recognition API,因此存在一定的共性,比方说文字内容识别需要 google 服务器返回,因此功能就与网络环境有很大关系,比方说 google 被墙了,或者网速很慢了,都有可能导致识别出现异常。
使用的基本套路如下:
的前缀:
- webKit
- var newRecognition = webkitSpeechRecognition();
属性值实现。一般聊天沟通使用
- continuous
属性值,如果是写文章写公众号之类的则可以设置为
- false
,如下示意:
- true
- newRecognition.continuous = true;
- // 开启
- newRecognition.start();
- // 停止
- newRecognition.stop();
:
- onresult
- newRecognition.onresult = function(event) {
- console.log(event);
- }
是个对象,我家里电脑不知道什么原因,无法成功返回识别内容,显示网络错误,可能因为墙的缘故: 所以,我从网上找了下大致数据结构:
- event
- {
- ..
- results: {
- 0: {
- 0: {
- confidence: 0.695017397403717,
- transcript: "你好,世界"
- },
- isFinal:true,
- length:1
- },
- length:1
- },
- ..
- }
除了
事件外,还有其他一些事件,例如,
- result
、
- soundstart
、
- speechstart
等。
- error
先从最简单的例子说起,如果想让浏览器读出 "你好,世界!" 的声音,可以下面的 JS 代码:
- var utterThis = new window.SpeechSynthesisUtterance('你好,世界!');
- window.speechSynthesis.speak(utterThis);
没错,只需要这么一点代码就足够了,大家可以在自己浏览器的控制台里面运行上面两行代码,看看有没有读出声音。
上面代码出现了两个长长的对象,
和
- SpeechSynthesisUtterance
,就是语音合成 Speech Synthesis API 的核心。
- speechSynthesis
首先是
对象,主要用来构建语音合成实例,例如上面代码中的实例对象
- SpeechSynthesisUtterance
。我们可以直接在构建的时候就把要读的文字内容写进去:
- utterThis
- var utterThis = new window.SpeechSynthesisUtterance('你好,世界!');
又或者是使用实例对象的一些属性,包括:
– 要合成的文字内容,字符串。
- text
– 使用的语言,字符串, 例如:
- lang
- "zh-cn"
– 指定希望使用的声音和服务,字符串。
- voiceURI
– 声音的音量,区间范围是
- volume
到
- 0
,默认是
- 1
。
- 1
– 语速,数值,默认值是
- rate
,范围是
- 1
到
- 0.1
,表示语速的倍数,例如
- 10
表示正常语速的两倍。
- 2
– 表示说话的音高,数值,范围从
- pitch
(最小)到
- 0
(最大)。默认值为
- 2
。
- 1
因此上面的代码也可以写作:
- var utterThis = new window.SpeechSynthesisUtterance();
- utterThis.text = '你好,世界!';
不仅如此,该实例对象还暴露了一些方法:
– 语音合成开始时候的回调。
- onstart
– 语音合成暂停时候的回调。
- onpause
– 语音合成重新开始时候的回调。
- onresume
– 语音合成结束时候的回调。
- onend
接下来是
对象,主要作用是触发行为,例如读,停,还原等:
- speechSynthesis
– 只能接收
- speak()
作为唯一的参数,作用是读合成的话语。
- SpeechSynthesisUtterance
– 立即终止合成过程。
- stop()
– 暂停合成过程。
- pause()
– 重新开始合成过程。
- resume()
– 此方法不接受任何参数,用来返回浏览器支持的语音包列表,是个数组,例如,在我的电脑下,Firefox 浏览器返回的语言包是两个: 而在 chrome 浏览器下,数量就很惊人了: 虽然数量很多,是有种给人中看不中用的感觉,为什么这么说呢!在我的 chrome 浏览器下,不知道为什么,不会读任何声音,但是同样的 demo 见面,公司的电脑就可以,我后来仔细查了一下,有可能 (20% 可能性) 是我家里的电脑 win7 版本是阉割版,没有安装或配置 TTS 引擎。 手机 Safari 浏览器也不会读。 其中,17 是普通话大陆: 另外,
- getVoices
的获取是个异步的过程,因此,你可以直接在控制台输入,
- getVoices
返回的是一个空数组,没关系,多试几次,或者搞个定时器之类的。
- speechSynthesis.getVoices()
对于盲人或弱视用户,往往会借助一些辅助设备或者软件访问我们的网页,其原理是通过触摸或定位某些元素发出声音,来让用户感知内容。
至少我会在 17 年,尝试在一些产品上推动这方面工作的建设。
另外一个就是二维码识别,有时候肉眼看得眼睛疼,加个按钮让用户听。
等等~
最后,放上一张今天别墅 home party 团建照一张:
来源: