Web SpeechRecognitionで、音声入力による言葉を認識・取得する

音声を認識して、その文字を取得してくれる優れたAPIで、いろいろとやってみる備忘録です。ブラウザでマイクをONにすると音声を取得、文字を認識してテキスト化してくれる優れモノです。
SpeechRecognitionのAPIの詳細は、こちらを参照ください。
ちなみに、テキスト・文字を簡易的に音声にしてくれるものは、SpeechSynthesisを参照ください。

SpeechRecognition - Web API | MDN

SpeechRecognition はウェブ音声 API のインターフェイスで、認識サービスの制御インターフェイスです。これは、認識サービスから送信された SpeechRecognitionEvent も処理します。

＊使用できるブラウザに制限がございます。chromeの環境でご使用ください。（FireFoxが使用不可）

HTML

<!--Start_Button-->
<button id="rec" class=""><span class="material-symbols-outlined mike-on">mic</span></button>
<!--result_Text-->
<p id="text">____</p>

Typescript

let SpeechRecActive = false;// SpeechRecが動作中かどうか
const Htmltext = document.getElementById('text') as HTMLElement; //テキストを表示させる

// 型定義
//@ts-ignore
const SpeechRecognition = webkitSpeechRecognition || SpeechRecognition;
const SpeechRec = new SpeechRecognition();
SpeechRec!.lang = 'ja-JP'; // 'ja-JP', 'en-US', 'en-GB', 'zh-CN', 'ko-KR'
SpeechRec!.interimResults = false; // 暫定的な結果を返すかどうか
SpeechRec!.maxAlternatives = 1;
SpeechRec!.continuous = true; // 単一の認識結果だけを返す:false 継続するかtrue

//
// SpeechRec!.continuous = true だと
// SpeechRec.stop()しない限り、終了しない
//
// SpeechRec!.continuous = false だと
// 一度、認識したらendが出て、終了する
//

// 開始時の処理
SpeechRec!.onstart = () => {
  console.log("on_start");

  SpeechRecActive = true;
}
// 音声認識が開始されたとき
SpeechRec!.onspeechstart = () => {
  console.log("on_speechStart");
}
// 音声認識が終了したときの処理
SpeechRec!.onend = () => {
  console.log("on_End");

  SpeechRecActive = false;
};
// 音声認識が終了したとき
SpeechRec!.onspeechend = () => {
  console.log("on_speechEnd");
}
// 音声認識の結果を取得する処理
SpeechRec!.onresult = (event: any) => {
  console.log(event.results);
  const transcript = event.results[num][0].transcript;

  // interimResults = trueの場合、何度もonresultが呼ばれますが、isFinalで、最終結果を取得できます。
  if (event.results[num].isFinal) {
    console.log(transcript)
  }

};
// 音声認識のエラー処理
SpeechRec!.onerror = (event:any) => {
  console.log("on_error");
  //@ts-ignore
  if (event.error === 'no-speech') {
    console.log("音声が認識されませんでした。");
  //@ts-ignore
  } else if (event.error === 'audio-capture') {
    console.log("マイクから音声をキャプチャできませんでした。");
  //@ts-ignore
  } else if (event.error === 'not-allowed') {
    console.log("音声認識が許可されていません。");
  } else {
    //@ts-ignore
    console.log("その他のエラー:", event.error);
  }
};
// 音声認識の結果が一致しなかったときの処理
SpeechRec!.onnomatch = () => {
  console.log("on_noMatch");
};

//SpeechRec.start();

// ボタンで、起動のON/OFF
const RecButton = document.getElementById('rec') as HTMLButtonElement;
RecButton.addEventListener('click', () => {

  if(SpeechRecActive === false){

    SpeechRec.start();

    RecButton.classList.add("is-active");
  }else{
    SpeechRec.stop();

    RecButton.classList.remove("is-active");
  }
})

Buttonを押せは、起動して、音声を取得し続けます。文字にできそうな言葉を検知するとテキストにしてくれます。