HTML5語音合成Speech Synthesis API簡介

這篇文章發布于 2017年01月13日，星期五，02:20，歸類于js相關。 閱讀 21 次, 今日 21 次

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

本文可全文轉載，但需得到原作者書面許可，同時保留原作者和出處，摘要引流則隨意。

一、關于HTML5語音Web Speech API

HTML5中和Web Speech相關的API實際上有兩類，一類是“語音識別(Speech Recognition)”，另外一個就是“語音合成(Speech Synthesis)”，這兩個名詞聽上去很高大上，實際上指的分別是“語音轉文字”，和“文字變語音”。

而本文要介紹的就是這里的“語音合成-文字變語音”。為什么稱為“合成”呢？比方說你Siri發音“你好，世界！” 實際上是把“你”、“好”、“世”、“界”這4個字的讀音給合并在一起，因此，稱為“語音合成”。

“語音識別”和“語音合成”看上去像是正反兩方面，應該帶有鏡面氣質，實際上，至少從兼容性來看，兩者并無法直接對等。

所以，本文主要介紹下理論上更為適用的HTML5 Speech Synthesis API。不過在此之前，Speech Recognition API還是簡單提一下。

Speech Recognition API也就是語音識別功能，需要麥克風等音頻輸入設備的支持，在Chrome瀏覽器下，實際上可以添加簡單的屬性就可以讓部分控件有語音識別功能，一行JS都不需要寫，這個我之前有專門寫文章介紹過：“ 漸進使用HTML5語言識別, so easy! ”

就是在輸入框上加一個 x-webkit-speech 屬性即可，例如：

lt;input x-webkit-speech /gt;

然而，我剛剛打開demo頁面一測試，發現原來有的麥克風（下圖為以前截圖）居然不見了。。。。看來已經被chrome無情拋棄了！

好吧，就當我上面的內容，什么都沒說過。不過有一點是可以肯定的，就是原來輸入框上的那個語音識別底層就是使用的Speech Recognition API，因此存在一定的共性，比方說文字內容識別需要google服務器返回，因此功能就與網絡環境有很大關系，比方說google被墻了，或者網速很慢了，都有可能導致識別出現異常。

使用的基本套路如下：

1. 創建SpeechRecognition的新實例。由于到目前為止，瀏覽器還沒有廣泛支持，所以需要 webKit 的前綴：

   var newRecognition = webkitSpeechRecognition();

2. 設置是持續聽還是聽到聲音之后就關閉接收。通過設置 continuous 屬性值實現。一般聊天溝通使用 false 屬性值，如果是寫文章寫公眾號之類的則可以設置為 true ，如下示意：

   newRecognition.continuous = true;

3. 控制語音識別的開啟和停止，可以使用start()和stop()方法：

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

4. 對識別到的結果進行處理，可以使用一些事件方法，比方說 onresult

   ：

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

   event 是個對象，我家里電腦不知道什么原因，無法成功返回識別內容，顯示網絡錯誤，可能因為墻的緣故：

   

   所以，我從網上找了下大致數據結構：

   {    ..        results: {        0: {              0: {                confidence: 0.695017397403717,                transcript: quot;你好，世界quot;              },              isFinal:true,              length:1        },        length:1    },    ..}

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

二、關于語音合成Speech Synthesis API

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

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

沒錯，只需要這么一點代碼就足夠了，大家可以在自己瀏覽器的控制臺里面運行上面兩行代碼，看看有沒有讀出聲音。

上面代碼出現了兩個長長的對象， SpeechSynthesisUtterance 和 speechSynthesis ，就是語音合成Speech Synthesis API的核心。

首先是 SpeechSynthesisUtterance 對象，主要用來構建語音合成實例，例如上面代碼中的實例對象 utterThis 。我們可以直接在構建的時候就把要讀的文字內容寫進去：

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

又或者是使用實例對象的一些屬性，包括：

• text – 要合成的文字內容，字符串。
• lang – 使用的語言，字符串， 例如： quot;zh-cnquot;
• 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瀏覽器返回的語言包是兩個：

  

  

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

  

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

  手機Safari瀏覽器也不會讀。

  其中，17是普通話大陸：

  

  另外， getVoices 的獲取是個異步的過程，因此，你可以直接在控制臺輸入， speechSynthesis.getVoices() 返回的是一個空數組，沒關系，多試幾次，或者搞個定時器之類的。

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

對于盲人或弱視用戶，往往會借助一些輔助設備或者軟件訪問我們的網頁，其原理是通過觸摸或定位某些元素發出聲音，來讓用戶感知內容。

有了語音合成Speech Synthesis API，對于這類用戶，以及開發人員自己，都會帶來一定的便利性。首先對于視覺有障礙的用戶，他們就不需要再安裝其他軟件或購買其他設備，就可以無障礙地訪問我們的產品。對于開發人員自己，我們的無障礙建設可以變得更加靈活，不一定要百分百契合ARIA無障礙規范（可參見我之前文章“ WAI-ARIA無障礙網頁應用屬性完全展示 ”），因為我們可以直接讓瀏覽器合成我想要的語音內容，例如，VoiceOver在對一些標簽讀取的時候，總會附帶一句“標志性內容”，就算對于我這樣專業從業者，這個詞也是有點生澀難懂的，我們其實可以把這個語音合成交給自己，使用更通俗易懂的詞反饋給用戶，我想體驗上應該是更好的。

至少我會在17年，嘗試在一些產品上推動這方面工作的建設。

另外一個就是二維碼識別，有時候肉眼看得眼睛疼，加個按鈕讓用戶聽。

等等~

感謝閱讀，歡迎交流！

本文為原創文章，會經常更新知識點以及修正一些錯誤，因此轉載請保留原出處，方便溯源，避免陳舊錯誤知識的誤導，同時有更好的閱讀體驗。

本文地址： http://www.zhangxinxu.com/wordpress/?p=5865

（本篇完）