鮮為人知的HTML5語(yǔ)音合成功能

聽(tīng)一下就會(huì)發(fā)現(xiàn)，播放出來(lái)的聲音并不是預(yù)先錄制好的音頻資料，而是通過(guò)文字識(shí)別后合成的語(yǔ)音

請(qǐng)先戴上耳機(jī)，然后將下面的代碼復(fù)制到chrome控制臺(tái)中體驗(yàn)～

let msg = new SpeechSynthesisUtterance("歡迎你閱讀我的博客");
window.speechSynthesis.speak(msg);

看，前端實(shí)現(xiàn)語(yǔ)音合成并不難

今天的主角 Speech Synthesis API

通過(guò)上面的例子我們可以猜測(cè)到上面調(diào)用的兩個(gè)方法的功能

SpeechSyntehesisUtteranc
window.speechSynthesis.speak

當(dāng)然了，語(yǔ)音合成不僅僅包含這兩個(gè)API，but我們先從這兩點(diǎn)入手

SpeechSyntehesisUtteranc

參考：developer.mozilla.org/en-US/docs/… SpeechSyntehesisUtteranc 對(duì)象包含了語(yǔ)音服務(wù)要讀取的內(nèi)容和一些參數(shù)，比如語(yǔ)言，音高和音量

SpeechSyntehesisUtteranc()
SpeechSynthesisUtterance.lang
SpeechSynthesisUtterance.pitch
SpeechSynthesisUtterance.rate
SpeechSynthesisUtterance.voice
SpeechSynthesisUtterance.volume

注意：以上屬性都是 可讀寫(xiě) 的！ 可以把下面這段代碼copy下來(lái)嘗試一下，注釋中會(huì)有說(shuō)明

let msg = new SpeechSynthesisUtterance();
msg.text = "how are you" // 要合成的文本
msg.lang = "en-US" // 美式英語(yǔ)發(fā)音（默認(rèn)自動(dòng)選擇）
msg.rate = 2  // 二倍速（默認(rèn)為 1，范圍 0.1～10）
msg.pitch = 2 // 高音調(diào)（數(shù)字越大越尖銳，默認(rèn)為 1，范圍 0～2 ）
msg.volume = 0.5 // 音量 0.5 倍（默認(rèn)為1，范圍 0～1）
window.speechSynthesis.speak(msg);

同時(shí)這個(gè)對(duì)象還可以響應(yīng)一系列事件，可能會(huì)用到的：

• start
• end
• boundary
• pause
• resume

借助這些事件我們可以完成一些簡(jiǎn)單的功能，比如英文句子的單詞數(shù)量統(tǒng)計(jì)：

let count = 0; // 詞語(yǔ)數(shù)量
let msg = new SpeechSynthesisUtterance();
let synth = window.speechSynthesis;
msg.addEventListener('start',()=>{
    // 開(kāi)始閱讀
    console.log(`文本內(nèi)容： ${msg.text}`);
    console.log("start");
});
msg.addEventListener('end',()=>{
    // 閱讀結(jié)束
    console.log("end");
    console.log(`文本單詞（詞語(yǔ)）數(shù)量：${count}`);
    count = 0;
});
msg.addEventListener('boundary',()=>{
    // 統(tǒng)計(jì)單詞
    count++;
});

經(jīng)過(guò)嘗試，由于中文沒(méi)有用空格將每個(gè)詞語(yǔ)分開(kāi)，所以會(huì)進(jìn)行自動(dòng)的識(shí)別，比如 歡迎讀者 會(huì)被識(shí)別為 歡迎 和 讀者 兩個(gè)詞語(yǔ)

SpeechSynthesis

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

說(shuō)完了 SpeechSyntehesisUtteranc 我們?cè)賮?lái)看看 SpeechSynthesis

SpeechSynthesis 的主要作用是對(duì)語(yǔ)音進(jìn)行一系列的控制，比如開(kāi)始或者暫停

它有三個(gè)只讀屬性，表明了語(yǔ)音的狀態(tài)：

SpeechSynthesis.paused
SpeechSynthesis.pending

同時(shí)還有一系列方法用來(lái)操作語(yǔ)音：

•SpeechSynthesis.speak() 開(kāi)始讀語(yǔ)音，同時(shí)觸發(fā) start 事件
•SpeechSynthesis.pause() 暫停，同時(shí)觸發(fā) pause 事件
•SpeechSynthesis.resume() 繼續(xù)，同時(shí)觸發(fā) resume 事件
•SpeechSynthesis.cancel() 取消閱讀，同時(shí)觸發(fā) end 事件

基于這些操作方法，我們可以進(jìn)一步增強(qiáng)我們的文字閱讀器：

回到最初的起點(diǎn)

讓我們回到最初的起點(diǎn)，我們可以基于上面的內(nèi)容猜測(cè)一下有些網(wǎng)站中，文章的自動(dòng)閱讀是怎么實(shí)現(xiàn)的

如果這個(gè)網(wǎng)站前端采用了 MVVM 框架（以 Vue 為例），那么文章內(nèi)容是也許存儲(chǔ)在 data 中，可以用來(lái)構(gòu)造我們需要的語(yǔ)音合成

當(dāng)然，也有可能文章是通過(guò) ajax 請(qǐng)求得到的，解析請(qǐng)求的數(shù)據(jù)，構(gòu)造語(yǔ)音合成對(duì)象

如果文章是直接在 html 中寫(xiě)死的，這個(gè)時(shí)候就需要對(duì) DOM 進(jìn)行解析，經(jīng)過(guò)測(cè)試，即便是下面這樣的混亂的結(jié)構(gòu)

<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" alt="">
    9
</div>

直接通過(guò) innerText 讀取其中的文本，然后構(gòu)造語(yǔ)音合成對(duì)象，也能按照期望順序閱讀（圖片會(huì)被忽略）

當(dāng)然如果我們想要忽略一些特殊的結(jié)構(gòu)，比如表格，我們可以花一些精力在解析上，把我們不想要的數(shù)據(jù)或者 DOM 元素篩掉

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

閑話

這個(gè)特性，是一個(gè)還在草案中的特性，沒(méi)有被廣泛支持

再次強(qiáng)調(diào)，這個(gè) API 暫時(shí)還不能應(yīng)用到生產(chǎn)環(huán)境中

目前比較通用的做法是在后端構(gòu)造將文本合成成語(yǔ)音文件的 API（也許是第三方 API），然后在前端作為媒體播放

曾經(jīng)在我迷茫的時(shí)候，我去閱讀一些大牛的文章，讀到一些前輩對(duì)前端開(kāi)發(fā)的思考。其中有一點(diǎn)令我印象深刻：

前端是最貼近用戶的，一切要從用戶的的角度考慮，無(wú)障礙使用也是一個(gè)很重要的課題。雖然做這樣的功能帶來(lái)的收益遠(yuǎn)遠(yuǎn)小于其他業(yè)務(wù)，但是為了讓產(chǎn)品更好的服務(wù)用戶，多付出一些勞動(dòng)也是值得的，這也是前端開(kāi)發(fā)的一種精神
 

總結(jié)

以上所述是小編給大家介紹的鮮為人知的HTML5語(yǔ)音合成功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！