HTML5 Web Speech API，讓網站更有趣

Web API 變得愈來愈豐富，其中一個值得注意的是Web Speech API。傳統的網站只能「說」，這個API的出現，讓網站能「傾聽」用戶。這個功能已經開放了一系列的用法，很是棒。

在這篇文章中，咱們將看一下這項技術和建議的用法，以及如何用它來加強用戶體驗的一些好例子。

聲明：本技術比較前沿，目前該規範是W3C的「非官方編輯器的徵求意見稿」（截至2014年6月6日）。它的使用方法可能和本文中的代碼片有所不一樣。查看代碼規範和發佈前的測試是頗有必要的。

語音合成 Speech Synthesis

該API分爲兩部分。首先，讓咱們來看看語音的合成部分——說話。若是你的網站有一些文字內容——文章主體、表單、輸入框、標籤等——你能夠運行一些有趣的功能，設備就會把文字讀給用戶聽。

來看看作到這一點所須要的代碼。首先建立SpeechSynthesisUtterance接口的新實例。而後指定要閱讀的文本。再把這個實例添加到隊列中，告訴瀏覽器何時說話。

下面的speak函數裏完成了上面所述的功能 ，把想要朗讀的內容做爲參數。

function speak(textToSpeak) {
   //建立一個 SpeechSynthesisUtterance的實例
   var newUtterance = new SpeechSynthesisUtterance();

   // 設置文本
   newUtterance.text = textToSpeak;

   // 添加到隊列
   window.speechSynthesis.speak(newUtterance);
}

如今咱們須要作的就是調用這個函數，並傳入咱們想要朗讀的內容：

speak('Welcome to Smashing Magazine');

SpeechSynthesisUtterance還有開始、暫停、中止功能，還能設置語言、速度、聲音。中止、啓動或暫停都觸發一個事件，開發者能夠編寫這個事件來完成不少有趣的事情。

目前，語音合成只有Chrome和Safari（包括桌面和移動設備版）支持。此外，經過API提供給用戶的聲音在很大程度上取決於操做系統。谷歌有本身的一套給Chrome的默認聲音，能夠在Mac OS X，Windows和Ubuntu上使用。Mac OS X的聲音也可用，因此和OSX的Safari的聲音同樣。你能夠經過開發者工具的控制檯看有哪一種聲音可用。

window.speechSynthesis.getVoices();

若是你使用OS X，能夠用「Zarvox」聲音

語音識別 Speech Recognition

Web Speech API另外一部分是語音識別，它可以識別用過從麥克風或網站應用獲取的語音。

讓咱們經過一些代碼運行。這一次，咱們將建立SpeechRecognition的新實例。由於這部分只獲得了Chrome的支持，因此要添加WebKit的前綴。

var newRecognition = webkitSpeechRecognition();

peechRecognition有至關多的屬性。好比狀態是可連續的，瀏覽器在沒有接收到聲音的一段時間後默認把狀態設爲false，若是你想繼續聽，能夠設爲true。

newRecognition.continuous = true;

開啓和中止語音識別，使用start() 、 stop()：

// 開始
newRecognition.start();

// 中止
newRecognition.stop();

還能夠綁定不少事件，例如：soundstart、speechstart、result 、 error。看看這個demo。

使用場景舉例

聽寫

目前，Speech API最多見的用法是聽寫和讀取。也就是用戶經過麥克風說話，設備把語音翻譯成文字（看看Chrome開發團隊作的demo），或者設備讀取文字轉化成語音。

設備能說話這是很是有用的功能。設想一下，當你早上起牀的時候，鏡子告訴你今天的天氣，這多麼神奇。

不少汽車都有語音系統，在你開車的時候給你導航。設想一下，當你在開車的時候，瀏覽器把你想要的內容讀給你聽，多麼方便。

聲音控制

聽寫能夠很容易地變成語音控制。正如上面的例子，咱們能夠經過語音導航。若是把這個功能加入到網絡電視的瀏覽器中，將會有更多有意思的實現。

個人同事作了個網球應用，在他打球的時候，它的應用會把他的分數讀出來。

翻譯

將來翻譯會變得很不同。一我的說了一段話，設備就翻譯成對方的語言並讀出。

限制

離線是須要注意的問題。目前API的實現是瀏覽器把數據發送到遠端服務器，再把處理好的數據返回。沒有網絡就沒法實現功能。

---

英文原文： Enhancing User Experience With The Web Speech API 由SegmentFault整理翻譯