鮮為人知的HTML5語音合成功能

聽一下就會發現，播放出來的聲音並不是預先錄製好的音訊資料，而是透過文字辨識後合成的語音

請先戴上耳機，然後將下面的程式碼複製到chrome控制台中體驗～

 let msg = new SpeechSynthesisUtterance(歡迎你閱讀我的部落格);window.speechSynthesis.speak(msg);

看，前端實現語音合成並不難

透過上面的例子我們可以猜測上面呼叫的兩個方法的功能

 SpeechSyntehesisUtterancwindow.speechSynthesis.speak

當然了，語音合成不只包含這兩個API，but我們先從這兩點入手

參考：developer.mozilla.org/en-US/docs/… SpeechSyntehesisUtteranc物件包含了語音服務要讀取的內容和一些參數，例如語言，音高和音量

 SpeechSyntehesisUtteranc()SpeechSynthesisUtterance.langSpeechSynthesisUtterance.pitchSpeechSynthesisUtterance.rateSpeechSynthesisUtterance.voiceSpeechSynthesisUtterance.volume

注意：以上屬性都是可讀寫的！ 可以把下面這段程式碼copy下來試試一下，註解中會有說明

 let msg = new SpeechSynthesisUtterance();msg.text = how are you // 要合成的文本msg.lang = en-US // 美式英語發音（預設自動選擇）msg.rate = 2 // 二倍速（預設為1，範圍0.1～10）msg.pitch = 2 // 高音調（數字越大越尖銳，預設為1，範圍0～2 ）msg.volume = 0.5 // 音量0.5 倍（預設為1，範圍0～1）window.speechSynthesis.speak(msg);

同時這個物件還可以回應一系列事件，可能會用到的：

• start
• end
• boundary
• pause
• resume

借助這些事件我們可以完成一些簡單的功能，例如英文句子的單字數量統計：

 let count = 0; // 字詞數量let msg = new SpeechSynthesisUtterance();let synth = window.speechSynthesis;msg.addEventListener('start',()=>{ // 開始閱讀console.log(`文字內容： $ {msg.text}`); console.log(start);});msg.addEventListener('end',()=>{ // 閱讀結束console.log(end); console.log(`文字單字（字）數：${count} `); count = 0;});msg.addEventListener('boundary',()=>{ // 統計單字count++;});

經過嘗試，由於中文沒有用空格將每個詞語分開，所以會進行自動的識別，例如歡迎讀者會被識別為歡迎和讀者兩個詞語

參考：developer.mozilla.org/en-US/docs/…

說完了SpeechSyntehesisUtteranc 我們再來看看SpeechSynthesis

SpeechSynthesis 的主要作用是對語音進行一系列的控制，例如開始或暫停

它有三個唯讀屬性，顯示了語音的狀態：

 SpeechSynthesis.pausedSpeechSynthesis.pending

同時還有一系列方法用來操作語音：

•SpeechSynthesis.speak() 開始讀取語音，同時觸發start 事件

•SpeechSynthesis.pause() 暫停，同時觸發pause 事件

•SpeechSynthesis.resume() 繼續，同時觸發resume 事件

•SpeechSynthesis.cancel() 取消閱讀，同時觸發end 事件

基於這些操作方法，我們可以進一步增強我們的文字閱讀器：

讓我們回到最初的起點，我們可以基於上面的內容猜測有些網站中，文章的自動閱讀是怎麼實現的

如果這個網站前端採用了MVVM 框架（以Vue 為例），那麼文章內容是也許儲存在data 中，可以用來建構我們需要的語音合成

當然，也有可能文章是透過ajax 請求得到的，解析請求的數據，建構語音合成對象

如果文章是直接在html 中寫死的，這個時候就需要對DOM 進行解析，經過測試，即便是下面這樣的混亂的結構

 <div id=test> <p>1</p> <p>2</p> <ul> <li>3</li> <li>4</li> </ul> <table> <tr > <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> </tr> </table> <img src=https://www.baidu.com/img/bd_logo1.png 9</div>

直接透過innerText 讀取其中的文本，然後建構語音合成對象，也能依照期望順序閱讀（圖片會被忽略）

當然如果我們想要忽略一些特殊的結構，例如表格，我們可以花一些精力在解析上，把我們不想要的資料或DOM 元素篩掉

不管怎樣，我們都能找到合適的解法～

這個特性，是一個還在草案中的特性，沒有被廣泛支持

再次強調，這個API 暫時還不能應用在生產環境中

目前比較通用的做法是在後端建構將文字合成成語音檔案的API（也許是第三方API），然後在前端作為媒體播放

曾經在我迷惘的時候，我去閱讀一些大牛的文章，讀到一些前輩對前端開發的思考。其中有一點令我印象深刻：

前端是最貼近使用者的，一切要從使用者的角度來考慮，無障礙使用也是一個很重要的課題。雖然做這樣的功能帶來的收益遠遠小於其他業務，但是為了讓產品更好的服務用戶，多付出一些勞動也是值得的，這也是前端開發的一種精神

以上所述是小編給大家介紹的鮮為人知的HTML5語音合成功能，希望對大家有幫助，如果大家有任何疑問歡迎給我留言，小編會及時回覆大家的！