程式人雜誌 -- 2013 年 10 月號 (開放公益出版品)

JavaScript (10) – Google 的語音辨識 API 之使用 (作者:陳鍾誠)

在上期「程式人雜誌」當中,我們介紹了的語音合成的主題,也就是如何讓網頁念出中文或英文,文章網址如下:

本期中,我們將介紹如何製作可以進行語音辨識的網頁,同樣也是利用 Google 的服務。但不同的是,目前 好像只有 Chrome 瀏覽器之援這個功能。

簡介

2012 年,W3C 釋出了 [W3C:Web Speech API Specification] 這份文件,讓瀏覽器可以具備語音辨識的功能,而 Google 的 Chrome 在第 25 beta 版當中,就開始支援語音辨識功能了,這個功能的主角是一個稱為 webkitSpeechRecognition 的物件,用法如下所示。

  var recognition = new webkitSpeechRecognition();
  recognition.continuous = true; // 連續辨識
  recognition.interimResults = true; // 是否要輸出中間結果
  recognition.onstart = function() { ... } // 開始辨識時會自動呼叫這個函數
  recognition.onend = function() { ... }   // 辨識完成時會自動呼叫這個函數
  recognition.onresult = function(event) { ... } // 辨識有任何結果時會呼叫這個函數
  ...

透過這個物件,我們就能輕易的寫出語音辨識的 HTML+JavaScript 程式了。

範例程式

以下是筆者根據 Google 釋出的 Web Speech API Demonstration 這個範例所修改而來的一個簡化範例,其執行畫面如下。

圖、本程式的英文的語音辨識結果

圖、本程式的英文的語音辨識結果

圖、本程式的中文的語音辨識結果

圖、本程式的中文的語音辨識結果

以下是筆者自己使用這個程式的錄影示範,您可以先看完之後再來使用這個範例,可能會比較順利。

必須注意的是,當您直接將以下範例放在「電腦硬碟」當中執行時,是會因為安全性問題而被檔下的,因此您必須將此範例 放到 Web Server 上或 Dropbox 等環境下,然後再用 Google Chrome 25 版之後的瀏覽器開啟執行,這樣就可以正常運作了。

檔案:speechToText.html

網址:https://dl.dropboxusercontent.com/u/101584453/pmag/201310/code/SpeechToText.html

<html>
<head><meta charset="utf-8" /></head>
<body>
<script type="text/javascript">
var infoBox; // 訊息 label
var textBox; // 最終的辨識訊息 text input
var tempBox; // 中間的辨識訊息 text input
var startStopButton; // 「辨識/停止」按鈕
var final_transcript = ''; // 最終的辨識訊息的變數
var recognizing = false; // 是否辨識中

function startButton(event) {
  infoBox = document.getElementById("infoBox"); // 取得訊息控制項 infoBox
  textBox = document.getElementById("textBox"); // 取得最終的辨識訊息控制項 textBox
  tempBox = document.getElementById("tempBox"); // 取得中間的辨識訊息控制項 tempBox
  startStopButton = document.getElementById("startStopButton"); // 取得「辨識/停止」這個按鈕控制項
  langCombo = document.getElementById("langCombo"); // 取得「辨識語言」這個選擇控制項
  if (recognizing) { // 如果正在辨識,則停止。
    recognition.stop();
  } else { // 否則就開始辨識
    textBox.value = ''; // 清除最終的辨識訊息
    tempBox.value = ''; // 清除中間的辨識訊息
    final_transcript = ''; // 最終的辨識訊息變數
    recognition.lang = langCombo.value; // 設定辨識語言
    recognition.start(); // 開始辨識
  }
}

if (!('webkitSpeechRecognition' in window)) {  // 如果找不到 window.webkitSpeechRecognition 這個屬性
  // 就是不支援語音辨識,要求使用者更新瀏覽器。 
  infoBox.innerText = "本瀏覽器不支援語音辨識,請更換瀏覽器!(Chrome 25 版以上才支援語音辨識)";
} else {
  var recognition = new webkitSpeechRecognition(); // 建立語音辨識物件 webkitSpeechRecognition
  recognition.continuous = true; // 設定連續辨識模式
  recognition.interimResults = true; // 設定輸出中先結果。

  recognition.onstart = function() { // 開始辨識
    recognizing = true; // 設定為辨識中
    startStopButton.value = "按此停止"; // 辨識中...按鈕改為「按此停止」。  
    infoBox.innerText = "辨識中...";  // 顯示訊息為「辨識中」...
  };

  recognition.onend = function() { // 辨識完成
    recognizing = false; // 設定為「非辨識中」
    startStopButton.value = "開始辨識";  // 辨識完成...按鈕改為「開始辨識」。
    infoBox.innerText = ""; // 不顯示訊息
  };

  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; // 將其加入中間結果中
      }
    }
    if (final_transcript.trim().length > 0) // 如果有最終辨識文字
        textBox.value = final_transcript; // 顯示最終辨識文字
    if (interim_transcript.trim().length > 0) // 如果有中間辨識文字
        tempBox.value = interim_transcript; // 顯示中間辨識文字
  };
}
</script>   
<BR/>
最後結果:<input id="textBox" type="text" size="60" value=""/><BR/>
中間結果:<input id="tempBox" type="text" size="60" value=""/><BR/>
辨識語言:
<select id="langCombo">
  <option value="en-US">英文(美國)</option>
  <option value="cmn-Hant-TW">中文(台灣)</option>
</select>
<input id="startStopButton" type="button" value="辨識" onclick="startButton(event)"/><BR/>
<label id="infoBox"></label>
</body>
</html>

結語

透過 webkitSpeechRecognition 這個物件,我們可以用不是很長的程式碼,完成語音辨識的功能,當然也可以將這個功能進一步包裝 讓大家更方便使用,而不需要每次都寫幾十行程式碼。

如果您想更進一步瞭解 webkitSpeechRecognition 這個物件,可以參考以下 Google 釋出的專案,這個專案的介面較美觀,支援更多語言, 但是程式碼也較多,建議您先讀懂上述範例的寫法之後,再來閱讀這個專案。

原本、筆者認為 Web 程式要做語音辨識是一項很困難的任務,但在 Web 越來越發達的時代,似乎甚麼樣困難的任務都變得很簡單了, 或許再過不久,所有的程式都可以用 Web 的方式製作了也不一定。

參考文獻