HTML5語音合成Speech Synthesis API簡介


要在前端實現語音合成,即將文字講述出來,一開始考慮用百度tts語音合成的方法,后來發現html5 本身就支持語音合成。就直接用html5的咯,百度的那個還有調用次數限制,配置還麻煩

一、關於HTML5語音Web Speech API

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

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

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

“語音識別(Speech Recognition)”目前的就Chrome瀏覽器和死忠小弟Opera瀏覽器默認支持,並且需要webkit私有前綴:
Speech Recognition API兼容性截圖

但是,“語音合成(Speech Synthesis)”的兼容性要好上太多了,如下圖:
Speech Synthesis API兼容性截圖

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

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

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

<input x-webkit-speech />

然而,我剛剛打開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: "你好,世界"
                  },
                  isFinal:true,
                  length:1
            },
            length:1
        },
        ..
    }

除了result事件外,還有其他一些事件,例如,soundstartspeechstarterror等。

二、關於語音合成Speech Synthesis API

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

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

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

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

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

var utterThis = new window.SpeechSynthesisUtterance('你好,世界!');

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

  • text – 要合成的文字內容,字符串。
  • lang – 使用的語言,字符串, 例如:"zh-cn"
  • voiceURI – 指定希望使用的聲音和服務,字符串。
  • volume – 聲音的音量,區間范圍是01,默認是1
  • rate – 語速,數值,默認值是1,范圍是0.110,表示語速的倍數,例如2表示正常語速的兩倍。
  • pitch – 表示說話的音高,數值,范圍從0(最小)到2(最大)。默認值為1

因此上面的代碼也可以寫作:

var utterThis = new window.SpeechSynthesisUtterance();
utterThis.text = '你好,世界!';

不僅如此,該實例對象還暴露了一些方法:

  • onstart – 語音合成開始時候的回調。
  • onpause – 語音合成暫停時候的回調。
  • onresume – 語音合成重新開始時候的回調。
  • onend – 語音合成結束時候的回調。

接下來是speechSynthesis對象,主要作用是觸發行為,例如讀,停,還原等:

  • speak() – 只能接收SpeechSynthesisUtterance作為唯一的參數,作用是讀合成的話語。
  • stop() – 立即終止合成過程。
  • pause() – 暫停合成過程。
  • resume() – 重新開始合成過程。
  • getVoices – 此方法不接受任何參數,用來返回瀏覽器支持的語音包列表,是個數組,例如,在我的電腦下,Firefox瀏覽器返回的語言包是兩個:

    語言包Firefox瀏覽器

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

    而在chrome瀏覽器下,數量就很驚人了:
    Chrome瀏覽器下返回的語言包

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

    手機Safari瀏覽器也不會讀。

    其中,17是普通話大陸:
    普通話中國大陸語言包

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

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

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

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

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

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

等等~


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM