你所不知道的HTML5——語音合成

時間 2019-12-04

標籤所不知道 html5 html 語音合成欄目 HTML5 简体版

原文原文鏈接

你所不知道的HTML5——語音合成

前端能力的加強很大程度上依賴於 HTML5 的新 API，從這篇文章開始我也會對平時作不經常使用的一些 API 作一下學習總結今天的文章就從語音合成開始html

爲何想到這個 API 呢？前端

在寫報告查資料的時候在「人人都是產品經理」http://www.woshipm.com/ 上發現了一個有趣的功能（打了醜醜的馬賽克） git

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

那麼咱們如何在前端實現這樣的功能呢？主角登場！github

⚠️注意，這個 API 尚在草案階段，而且在寫 demo 的時候瀏覽器提示部分 API 可能將不被支持，因此本文中提到的解決方案不要用於產品中ajax

語音合成超簡單例子

請先戴上耳機，而後將下面的代碼複製到chrome控制檯中體驗～chrome

let msg = new SpeechSynthesisUtterance("歡迎你閱讀個人博客");
window.speechSynthesis.speak(msg);
複製代碼

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

今天的主角 Speech Synthesis API

經過上面的例子咱們能夠猜想到上面調用的兩個方法的功能瀏覽器

SpeechSyntehesisUtteranc 用來構造一個能夠被讀出的「東西」
window.speechSynthesis.speak 將構造好的「東西」讀出來

固然了，語音合成不單單包含這兩個API，but咱們先從這兩點入手框架

SpeechSyntehesisUtteranc

參考：developer.mozilla.org/en-US/docs/… SpeechSyntehesisUtteranc對象包含了語音服務要讀取的內容和一些參數，好比語言，音高和音量函數

首先咱們能夠經過 SpeechSyntehesisUtteranc() 構造函數構造一個對象
SpeechSynthesisUtterance.lang 語言
SpeechSynthesisUtterance.pitch 音調
SpeechSynthesisUtterance.rate 語速
SpeechSynthesisUtterance.voice 語音
SpeechSynthesisUtterance.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++;
});
複製代碼

通過嘗試，因爲中文沒有用空格將每一個詞語分開，因此會進行自動的識別，好比 歡迎讀者 會被識別爲 歡迎 和 讀者 兩個詞語

SpeechSynthesis

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

說完了 SpeechSyntehesisUtteranc 咱們再來看看 SpeechSynthesis

SpeechSynthesis 的主要做用是對語音進行一系列的控制，好比開始或者暫停

它有三個只讀屬性，代表了語音的狀態：

SpeechSynthesis.paused（boolean 是否處於暫停）
SpeechSynthesis.pending（boolean 是否處於還有未讀語句）
SpeechSynthesis.speaking` （boolean 是否處於閱讀中）

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

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" alt="">
    9
</div>
複製代碼