Chromeの音声認識を使う

SpeechRecognitionというWeb APIがあり、ブラウザで音声認識を使える。ただ、今のところ対応しているのはChromeのみ（Firefoxは対応予定あり）。そういうわけで、Chrome限定ではあるが、ブラウザの音声認識を使ってみる。

インスタンス作成とオプションの設定

まずはSpeechRecognitionインスタンスの作成。Chromeで使うには、プレフィックスwebkitが必要。オプションはいくつかあるが、とりあえずcontinuousとlangを設定しておけば音声認識を試せる。

// インスタンス作成
recognition = new webkitSpeechRecognition();
// 連続して音声認識を行うかどうか
recognition.continuous = true;
// 認識する言語の設定
recognition.lang = 'ja-JP';

音声認識の開始と停止

音声認識の開始と停止にはそれぞれstart、stopメソッドを使う。

// 音声認識開始
recognition.start();
// 音声認識停止
recognition.stop();

startが実行されると、ブラウザでマイク使用許可を求めるポップアップが表示される。ここでユーザーが許可しないと、音声認識ははじまらない。また、SpeechRecognitionはサーバーにhtmlを置いてアクセスしないと使えないので、ローカルにあるhtmlを開いても、マイク使用許可を求めるポップアップは表示されない。

イベントの設定

SpeechRecognition APIにはいくつかイベントが用意されているが、よく使いそうなのは以下の通り。中でも認識結果が得られる度に呼ばれるonresultは必ず必要になる。onresultが呼ばれる度にevent.results配列に要素が追加されていき、認識された音声のテキストはevent.results[i][0].transcriptから取得できる。event.results配列には音声認識が停止されるまでに認識された結果がすべて入っているので、1回目の認識で「あいうえお」と認識されたあとに、2回目の認識で「かきくけこ」と認識されてonresultが呼ばれたときには、event.results[0][0].transcript = 'あいうえお'、event.results[１][0].transcript = 'かきくけこ' となる。

// 音声認識が開始されたとき（ユーザーがマイクの使用を許可した後）に呼ばれる
recognition.onstart = function() {
};

// 音声認識が停止したときに呼ばれる
recognition.onend = function() {
};


// 音声認識される度に呼ばれる
recognition.onresult = function( event ) {
  // 音声認識されるごとに、event.results配列に要素が追加されていく
  for ( var i = event.resultIndex; i < event.results.length; ++i ) {
    if ( event.results[i].isFinal ) {
     // 認識された音声のテキストを出力
          console.log( event.results[i][0].transcript );
      }
    }
  }
};

// エラーが起きたときに呼ばれる
recognition.onerror = function( event ) {
   // エラーメッセージの出力
   console.log( event.error );
};

実装

ボタンで音声認識の開始／停止を切り替えるようにした。

• サンプルの表示

Startボタンを押すと、マイクの使用許可を求めるポップアップウィンドウが開くので、許可すると音声認識がはじまる。マイクに向かって何かしゃべると、認識された音声のテキストが画面に表示される。

結果はなかなか優秀。最後の認識については、3番目の「木」は「気」が正解。でもそれ以外はちゃんと認識できた。