WEBサイトでJavascriptを使ってマイクから音声認識で文字起こしを行う

Javascriptでマイクから音声認識を行い文字起こしする

2023/8/現在、Edge、Chrome、Chrome Android、iPhone Safari(※条件有り)で動作します

※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>