一、關(guān)于HTML5語(yǔ)音Web Speech API

HTML5中和Web Speech相關(guān)的API實(shí)際上有兩類(lèi)，一類(lèi)是“語(yǔ)音識(shí)別(Speech Recognition)”，另外一個(gè)就是“語(yǔ)音合成(Speech Synthesis)”，這兩個(gè)名詞聽(tīng)上去很高大上，實(shí)際上指的分別是“語(yǔ)音轉(zhuǎn)文字”，和“文字變語(yǔ)音”。

而本文要介紹的就是這里的“語(yǔ)音合成-文字變語(yǔ)音”。為什么稱(chēng)為“合成”呢？比方說(shuō)你Siri發(fā)音“你好，世界！” 實(shí)際上是把“你”、“好”、“世”、“界”這4個(gè)字的讀音給合并在一起，因此，稱(chēng)為“語(yǔ)音合成”。

“語(yǔ)音識(shí)別”和“語(yǔ)音合成”看上去像是正反兩方面，應(yīng)該帶有鏡面氣質(zhì)，實(shí)際上，至少?gòu)募嫒菪詠?lái)看，兩者并無(wú)法直接對(duì)等。“語(yǔ)音識(shí)別(Speech Recognition)”目前的就Chrome瀏覽器和Opera瀏覽器默認(rèn)支持，但是，“語(yǔ)音合成(Speech Synthesis)”的兼容性要好上太多了Chrome，F(xiàn)F，Edge，Safari等等都是支持的。

使用的基本套路如下：

• 創(chuàng)建SpeechRecognition的新實(shí)例。由于到目前為止，瀏覽器還沒(méi)有廣泛支持，所以需要webKit的前綴：

var newRecognition = webkitSpeechRecognition();

• 設(shè)置是持續(xù)聽(tīng)還是聽(tīng)到聲音之后就關(guān)閉接收。通過(guò)設(shè)置continuous屬性值實(shí)現(xiàn)。一般聊天溝通使用false屬性值，如果是寫(xiě)文章寫(xiě)公眾號(hào)之類(lèi)的則可以設(shè)置為true，如下示意：

newRecognition.continuous = true;

• 控制語(yǔ)音識(shí)別的開(kāi)啟和停止，可以使用start()和stop()方法：

// 開(kāi)啟
newRecognition.start();
// 停止
newRecognition.stop();

• 對(duì)識(shí)別到的結(jié)果進(jìn)行處理，可以使用一些事件方法，比方說(shuō)onresult：

newRecognition.onresult = function(event) { 
    console.log(event);
}

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

二、關(guān)于語(yǔ)音合成Speech Synthesis API

先從最簡(jiǎn)單的例子說(shuō)起，如果想讓瀏覽器讀出“你好，世界！”的聲音，可以下面的JS代碼：

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

沒(méi)錯(cuò)，只需要這么一點(diǎn)代碼就足夠了，大家可以在自己瀏覽器的控制臺(tái)里面運(yùn)行上面兩行代碼，看看有沒(méi)有讀出聲音。

上面代碼出現(xiàn)了兩個(gè)長(zhǎng)長(zhǎng)的對(duì)象，SpeechSynthesisUtterance和speechSynthesis，就是語(yǔ)音合成Speech Synthesis API的核心。

首先是SpeechSynthesisUtterance對(duì)象，主要用來(lái)構(gòu)建語(yǔ)音合成實(shí)例，例如上面代碼中的實(shí)例對(duì)象utterThis。我們可以直接在構(gòu)建的時(shí)候就把要讀的文字內(nèi)容寫(xiě)進(jìn)去：

var utterThis = new window.SpeechSynthesisUtterance('你好，世界！');

又或者是使用實(shí)例對(duì)象的一些屬性，包括：

• text – 要合成的文字內(nèi)容，字符串。
• lang – 使用的語(yǔ)言，字符串， 例如："zh-cn"
• voiceURI – 指定希望使用的聲音和服務(wù)，字符串。
• volume – 聲音的音量，區(qū)間范圍是0到1，默認(rèn)是1。
• rate – 語(yǔ)速，數(shù)值，默認(rèn)值是1，范圍是0.1到10，表示語(yǔ)速的倍數(shù)，例如2表示正常語(yǔ)速的兩倍。
• pitch – 表示說(shuō)話的音高，數(shù)值，范圍從0（最小）到2（最大）。默認(rèn)值為1。

因此上面的代碼也可以寫(xiě)作：

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

不僅如此，該實(shí)例對(duì)象還暴露了一些方法：

• onstart – 語(yǔ)音合成開(kāi)始時(shí)候的回調(diào)。
• onpause – 語(yǔ)音合成暫停時(shí)候的回調(diào)。
• onresume – 語(yǔ)音合成重新開(kāi)始時(shí)候的回調(diào)。
• onend – 語(yǔ)音合成結(jié)束時(shí)候的回調(diào)。

接下來(lái)是speechSynthesis對(duì)象，主要作用是觸發(fā)行為，例如讀，停，還原等：

• speak() – 只能接收SpeechSynthesisUtterance作為唯一的參數(shù)，作用是讀合成的話語(yǔ)。

• stop() – 立即終止合成過(guò)程。

• pause() – 暫停合成過(guò)程。

• resume() – 重新開(kāi)始合成過(guò)程。

• getVoices – 此方法不接受任何參數(shù)，用來(lái)返回瀏覽器支持的語(yǔ)音包列表，是個(gè)數(shù)組，例如，在我的電腦下，F(xiàn)irefox瀏覽器返回的語(yǔ)言包是兩個(gè)：

  語(yǔ)言包Firefox瀏覽器
  Firefox瀏覽器下的語(yǔ)言包運(yùn)行結(jié)果

  而在chrome瀏覽器下，數(shù)量就很驚人了：

  
  
  Chrome瀏覽器下返回的語(yǔ)言包

  雖然數(shù)量很多，是有種給人中看不中用的感覺(jué)，為什么這么說(shuō)呢！在我的chrome瀏覽器下，不知道為什么，不會(huì)讀任何聲音，但是同樣的demo見(jiàn)面，公司的電腦就可以，我后來(lái)仔細(xì)查了一下，有可能(20%可能性)是我家里的電腦win7版本是閹割版，沒(méi)有安裝或配置TTS引擎。

  手機(jī)Safari瀏覽器也不會(huì)讀。

  其中，17是普通話大陸：

  
  
  普通話中國(guó)大陸語(yǔ)言包

  另外，getVoices的獲取是個(gè)異步的過(guò)程，因此，你可以直接在控制臺(tái)輸入，speechSynthesis.getVoices()返回的是一個(gè)空數(shù)組，沒(méi)關(guān)系，多試幾次，或者搞個(gè)定時(shí)器之類(lèi)的。

三、語(yǔ)音合成Speech Synthesis API有什么用

對(duì)于盲人或弱視用戶，往往會(huì)借助一些輔助設(shè)備或者軟件訪問(wèn)我們的網(wǎng)頁(yè)，其原理是通過(guò)觸摸或定位某些元素發(fā)出聲音，來(lái)讓用戶感知內(nèi)容。
有了語(yǔ)音合成Speech Synthesis API，對(duì)于這類(lèi)用戶，以及開(kāi)發(fā)人員自己，都會(huì)帶來(lái)一定的便利性。

by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=5865

示例效果

青團(tuán)社招聘：

招聘崗位：高級(jí)前端開(kāi)發(fā)工程師P5及以上
坐標(biāo)杭州市余杭區(qū)文一西路1380號(hào)金之源大廈11層

簡(jiǎn)歷投遞到：hr@qtshe.com || haochen@qtshe.com

職位描述：

1、建設(shè)工具、提煉組件、抽象框架，促進(jìn)前端工程化、服務(wù)化，持續(xù)提升研發(fā)效率，保障線上產(chǎn)品質(zhì)量

2、構(gòu)建H5/PC應(yīng)用基礎(chǔ)設(shè)施，主導(dǎo)建設(shè)前端各種發(fā)布/監(jiān)控等平臺(tái)，指導(dǎo)落實(shí)解決方案

3、持續(xù)優(yōu)化前端頁(yè)面性能，維護(hù)前端代碼規(guī)范，鉆研各種前沿技術(shù)和創(chuàng)新交互，增強(qiáng)用戶體驗(yàn)、開(kāi)拓前端能力邊界