JavaScriptで音声認識・文字起こしを実装する方法｜マイク入力対応のサンプル付き

JavaScriptで音声認識を導入！マイクで文字起こしする方法

このページでは、JavaScriptのSpeechRecognition APIを使って、音声認識による文字起こしを行う方法を紹介しています。
マイク入力に対応したサンプルコードを掲載しており、ブラウザ上で音声をテキストに変換する基本的な仕組みを学ぶことができます。
音声入力機能をWebアプリに組み込みたい方におすすめです。

音声認識にはマイクを使用しますので使用権限ダイアログが表示されます。
対応ブラウザは Edge・Chrome・Android Chrome・iPhone Safari など。
「音声入力」や Siriの設定 を有効にすると、スマホでも簡単に利用可能です。

マイク入力をテキスト化する実例

サンプルコード：マイク入力をテキスト化

<input type="button" id="recognitionStart" value="音声認識開始"><br>
<textarea id="recognitionResult" cols="60" rows="20" style="overflow-y:scroll;"></textarea>

<script>
var SRecognition=null;
if(window.webkitSpeechRecognition){
  SRecognition = new window.webkitSpeechRecognition();
}else if(window.SpeechRecognition){
  SRecognition = new window.SpeechRecognition();
}

window.addEventListener("load",function(){
  if(SRecognition!=null){
    SRecognition.continuous = false
    SRecognition.interimResults = false
    SRecognition.lang="ja-JP";

    //音声認識が完了した時のイベント
    SRecognition.addEventListener("result",function(event){
      let txt=document.getElementById("recognitionResult");
      txt.innerHTML=
        document.getElementById("recognitionResult").innerHTML +
        event.results[0][0].transcript+"\n";
      txt.scrollTop=txt.scrollHeight;
      SRecognition.stop();
    });

    //対応している場合は「音声認識開始」ボタンを使用可能にする
    document.getElementById("recognitionStart").addEventListener("click",function(){
      SRecognition.start();
    });
  }else{
    //未対応の場合は「音声認識開始」ボタンを使用不可にする
document.getElementById("recognitionStart").setAttribute("disabled","true");
  }
});
</script>