其他分享
首页 > 其他分享> > HTML5语音合成Speech Synthesis API简介

HTML5语音合成Speech Synthesis API简介

作者:互联网

一、关于HTML5语音Web Speech API

HTML5中和Web Speech相关的API实际上有两类,一类是“语音识别(Speech Recognition)”,另外一个就是“语音合成(Speech Synthesis)”,这两个名词听上去很高大上,实际上指的分别是“语音转文字”,和“文字变语音”。

而本文要介绍的就是这里的“语音合成-文字变语音”。为什么称为“合成”呢?比方说你Siri发音“你好,世界!” 实际上是把“你”、“好”、“世”、“界”这4个字的读音给合并在一起,因此,称为“语音合成”。

“语音识别”和“语音合成”看上去像是正反两方面,应该带有镜面气质,实际上,至少从兼容性来看,两者并无法直接对等。“语音识别(Speech Recognition)”目前的就Chrome浏览器和Opera浏览器默认支持,但是,“语音合成(Speech Synthesis)”的兼容性要好上太多了Chrome,FF,Edge,Safari等等都是支持的。

使用的基本套路如下:

var newRecognition = webkitSpeechRecognition();
newRecognition.continuous = true;
// 开启
newRecognition.start();
// 停止
newRecognition.stop();
newRecognition.onresult = function(event) { 
    console.log(event);
}

除了result事件外,还有其他一些事件,例如,soundstart、speechstart、error等。

二、关于语音合成Speech Synthesis API

先从最简单的例子说起,如果想让浏览器读出“你好,世界!”的声音,可以下面的JS代码:

var utterThis = new window.SpeechSynthesisUtterance('你好,世界!');
window.speechSynthesis.speak(utterThis);

没错,只需要这么一点代码就足够了,大家可以在自己浏览器的控制台里面运行上面两行代码,看看有没有读出声音。

上面代码出现了两个长长的对象,SpeechSynthesisUtterancespeechSynthesis,就是语音合成Speech Synthesis API的核心。

首先是SpeechSynthesisUtterance对象,主要用来构建语音合成实例,例如上面代码中的实例对象utterThis。我们可以直接在构建的时候就把要读的文字内容写进去:

var utterThis = new window.SpeechSynthesisUtterance('你好,世界!');

又或者是使用实例对象的一些属性,包括:

因此上面的代码也可以写作:

var utterThis = new window.SpeechSynthesisUtterance();
utterThis.text = '你好,世界!';

不仅如此,该实例对象还暴露了一些方法:

接下来是speechSynthesis对象,主要作用是触发行为,例如读,停,还原等:

三、语音合成Speech Synthesis API有什么用

对于盲人或弱视用户,往往会借助一些辅助设备或者软件访问我们的网页,其原理是通过触摸或定位某些元素发出声音,来让用户感知内容。
有了语音合成Speech Synthesis API,对于这类用户,以及开发人员自己,都会带来一定的便利性。



作者:被床封印怎么都吃不胖的程序猿
链接:https://www.jianshu.com/p/92dec635f6c5
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

标签:浏览器,合成,API,Speech,HTML5,语音,Synthesis
来源: https://www.cnblogs.com/cangqinglang/p/12119185.html