非IT企業に勤める中年サラリーマンのIT日記

非IT企業でしかもITとは全く関係ない部署にいる中年エンジニア。唯一の趣味がプログラミングという”自称”プログラマー。

Web Speech API(JavaScript)でChromeブラウザ上で音声認識させる

   

Web Speech APIというライブラリを使ってJavaScriptで音声認識させることができます。

Chromeブラウザでしか動作しませんが、使ってみたところかなり正確に音声認識してくれます。

広告

完成形

こちらが完成形です。「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();
};
 

 

広告

 - HTML/JavaScript