一、关于HTML5语音Web Speech API(已经被chrome抛弃)

<input x-webkit-speech />

H5页面ios长按发送语音弹出菜单 h5发送语音消息_前端

二、关于语音合成Speech Synthesis API
先从最简单的例子说起,如果想让浏览器读出“你好,世界!”的声音,可以下面的JS代码:

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

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

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

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() – 重新开始合成过程。

getVoices –
此方法不接受任何参数,用来返回浏览器支持的语音包列表,是个数组。例如:在我的电脑下,Firefox浏览器返回的语言包是两个:

H5页面ios长按发送语音弹出菜单 h5发送语音消息_字符串_02


chrome浏览器下的语言包:

H5页面ios长按发送语音弹出菜单 h5发送语音消息_前端_03


其中,17是普通话大陆:

H5页面ios长按发送语音弹出菜单 h5发送语音消息_字符串_04

另外,getVoices的获取是个异步的过程,因此,你可以直接在控制台输入,speechSynthesis.getVoices()返回的是一个空数组,没关系,多试几次,或者搞个定时器之类的。