トップへ(mam-mam.net/)

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

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

Javascriptでマイクから音声認識を行い文字起こしすることが出来ます。
音声認識にはマイクを使用しますので使用権限ダイアログが表示されます。
Edge、Chrome、Chrome Android、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>