Chromeブラウザ上で音声入力できるJavaScriptライブラリ「Web Speech API」がスゴイ！

なんと、Web Speech APIというJavaScriptライブラリを使うことでなんとブラウザ上で音声入力できるようになります。

Chromeブラウザでしか動作しませんが、実際に使ってみたところかなり正確に音声認識してくれます。プログラミングも超簡単です。

[ad#top-1]

完成形

こちらが完成形です。「Start」ボタンを押した後にしゃべると音声を拾って表示してくれます。ボタン下に文字を表示する他に、ブラウザのコンソールにも表示するようにしました。

 

ソースコード全文

こちらがソースコード全文です。機能別の解説は後述します。

解説

まず、webkitSpeechRecognitionオブジェクトを生成して、ボタン押下後に音声認識をスタートさせています。

const speech = new webkitSpeechRecognition();
speech.lang = 'ja-JP';
btn.addEventListener('click', () => {
  btn.disabled = true;
  speech.start();
});
 

 

次に音声を拾ったら一旦ストップさせ、認識した音声データをコンソールとresult要素内に表示させています。

speech.onresult = (e) => {
  speech.stop();
  if(e.results[0].isFinal){
    console.log(e.results[0][0].transcript);
    document.getElementById('result').innerHTML = e.results[0][0].transcript;
  }
};

 

繰り返し音声認識できるようストップした後に続けて再スタートさせています。

speech.onend = () => {
  speech.start();
};
 

 

[ad#ad-1]

 - HTML/JavaScript