激動人心！在網頁上通過語音輸入文字 - HTML5 Web Speech API介紹

         很久前我曾經提到過Web Speech API，現在Chrome剛剛發佈的25版本已經爲桌面和Android提供了對此API的支持，這對Web開發者來說無疑是一個具有里程碑意義的事件，因爲我們可以直接在Web App中原生使用語音識別技術，Web應用的新時代將會由此開啓。

         控制不住激動的心情，下面我會通過示例馬上給大家介紹此API的詳細信息。

         Google專門提供了一個原生示例，來演示Web Speech API。

         我們來看看實現代碼。首先需要判斷瀏覽器是否支持Web Speech API，我們通過window下是否存在webkitSpeechRecognition對象來判斷。如果支持，我們創建webkitSpeechRecognition對象，並設置相關屬性和事件。

if (!('webkitSpeechRecognition' in window)) {
  upgrade();
} else {
  var recognition = new webkitSpeechRecognition();
  recognition.continuous = true;
  recognition.interimResults = true;

  recognition.onstart = function() { ... }
  recognition.onresult = function(event) { ... }
  recognition.onerror = function(event) { ... }
  recognition.onend = function() { ... }
  ...

         continuous屬性的默認值是false，代表當用戶停止說話時，語音識別將結束。在這個演示中 ，我們將它設置爲true，這樣即便用戶暫時停止講話，語音識別也將會繼續。

         interimResults屬性的默認值也是false，代表語音識別器的返回值不會改變。在這個演示中，我們把它設置爲true，這樣隨着我們的輸入，識別結果有可能會改變。仔細觀看演示，灰色的文字是臨時性的，有時會改變，而黑色文本是最終結果，不會改變。

         當我們點擊麥克風按鈕時，會觸發如下代碼：

function startButton(event) {
  ...
  final_transcript = '';
  recognition.lang = select_dialect.value;
  recognition.start();

         我們用recognition.lang來設置語音識別的語言，在這個示例中默認爲HTML頁面的語言，通過下拉列表用戶可以進行更換，例如“cmn-Hans-CN”代表普通話，而“en-us”代表美式英語。Chrome瀏覽器的語音識別支持衆多的語言，非常強大。

         設置語言後，我們調用recognition.start()來激活語音識別。一旦開始捕獲音頻，它調用onstart方法，然後爲每一個新的結果集調用onresult方法進行處理。

  recognition.onresult = function(event) {
    var interim_transcript = '';

    for (var i = event.resultIndex; i < event.results.length; ++i) {
      if (event.results[i].isFinal) {
        final_transcript += event.results[i][0].transcript;
      } else {
        interim_transcript += event.results[i][0].transcript;
      }
    }
    final_transcript = capitalize(final_transcript);
    final_span.innerHTML = linebreak(final_transcript);
    interim_span.innerHTML = linebreak(interim_transcript);
  };
}

         這個handler把結果分成兩個字符串：final_transcript和interim_transcript。這裏調用Linebreak方法來進行分段。最後，它會將final_transcript設置爲final_span的innerHTML，顯示爲黑色；而將interim_transcript設置爲interim_span的innerHTML，顯示爲灰色。

         以上就是功能核心代碼。當recognition.start()被調用時，麥克風識別動畫開始顯示，同時Chrome需要獲得用戶對麥克風的授權。有一點非常重要的是，HTTPS網頁不需要反覆獲取授權，而HTTP網頁需要。

         當開始語音輸入、捕獲和識別時，我們還會在桌面右下角看到相關提示。

         從現在開始，Web App的開發者們可以好好考慮考慮，利用Web Speech API能夠開發出什麼樣有趣的產品，或者爲自己的產品添加什麼有趣的功能？

         提示：如果要體驗文中的Demo，請使用Chrome 25以上的版本或者Chrome Canary。

         相關文章：《對HTML5 Device API相關規範的解惑》

         參考文章：VOICE DRIVEN WEB APPS: INTRODUCTION TO THE WEB SPEECH API

         轉載請標明出處：蔣宇捷的專欄