HTML5語音合成Speech Synthesis API簡介

jhhost發表於2019-03-08
HTMLAPI

一、關於HTML5語音Web Speech API

HTML5中和Web Speech相關的API實際上有兩類，一類是“語音識別(Speech Recognition)”，另外一個就是“語音合成(Speech Synthesis)”，這兩個名詞聽上去很高大上，實際上指的分別是“語音轉文字”，和“文字變語音”。 而本文要介紹的就是這裡的“語音合成-文字變語音”。為什麼稱為“合成”呢？比方說你Siri發音“你好，世界！” 實際上是把“你”、“好”、“世”、“界”這4個字的讀音給合併在一起，因此，稱為“語音合成”。 “語音識別”和“語音合成”看上去像是正反兩方面，應該帶有鏡面氣質，實際上，至少從相容性來看，兩者並無法直接對等。“語音識別(Speech Recognition)”目前的就Chrome瀏覽器和Opera瀏覽器預設支援，但是，“語音合成(Speech Synthesis)”的相容性要好上太多了Chrome，FF，Edge，Safari等等都是支援的。

使用的基本套路如下：

建立SpeechRecognition的新例項。由於到目前為止，瀏覽器還沒有廣泛支援，所以需要webKit的字首：

var newRecognition = webkitSpeechRecognition(); 
複製程式碼

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

newRecognition.continuous = true;
複製程式碼

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

// 開啟

newRecognition.start();
複製程式碼

// 停止

newRecognition.stop();
複製程式碼

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

newRecognition.onresult = function(event) { 
    console.log(event);
}
複製程式碼

除了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 – 使用的語言，字串， 例如："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瀏覽器返回的語言包是兩個：

HTML5語音合成Speech Synthesis API簡介

語言包Firefox瀏覽器

HTML5語音合成Speech Synthesis API簡介

Firefox瀏覽器下的語言包執行結果

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

HTML5語音合成Speech Synthesis API簡介

Chrome瀏覽器下返回的語言包

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

普通話中國大陸語言包

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

三、語音合成Speech Synthesis API有什麼用 對於盲人或弱視使用者，往往會藉助一些輔助裝置或者軟體訪問我們的網頁，其原理是通過觸控或定位某些元素髮出聲音，來讓使用者感知內容。 有了語音合成Speech Synthesis API，對於這類使用者，以及開發人員自己，都會帶來一定的便利性。 by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=5865

作者：一個被床封印的程式猿 連結：https://www.jianshu.com/p/92dec635f6c5 來源：簡書 簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。

相關文章