JavaScriptにおけるWeb音声APIを用いた音声認識

WebスピーチAPIは、Webアプリに音声データを組み込むために使用されます.このチュートリアルでは、Web音声APIを使用して音声認識を実装する簡単なWebページを構築します.Web音声APIのブラウザ互換性を確認できますhere .

必要条件

このチュートリアルでは次のようにします.

HTMLとJavaScriptの基本的な理解.

コードエディター.私は使用するVisual Studio Code .

Webページを表示するブラウザGoogle Chrome or Firefox .

起動コードのクローニング

音声認識に焦点を合わせるために、いくつかのスターターコードを用意しました.あなたはそれをクローンすることができますfrom this repository Githubについて指示のために倉庫のREADMEに続いてください.
最後のコードについては、これを見ることができますGitHub Repository .
スターターコードでは、言語と方言の選択メニュー、音声認識を開始/停止する2つのボタン、およびトランスクリプトを表示するボックスを設定しました.使いましたBootstrap Webページのスタイルを設定します.

コードしましょう

まず、新しいJavaScriptファイルを作成し、名前を付けますspeechRecognition.js . 次に、script アフタータグbody タグ.

Adding the script tag after the body tag will make sure that the script file is loaded after all the elements have been loaded to the DOM which aids performance.

<script src="./speechRecognition.js"></script>

さて、スクリプトファイルの中でwebkitSpeechRecognition クラスはwindow オブジェクト.そうでないならconsole.log それで、それは利用できません.

if ("webkitSpeechRecognition" in window) {

  // Speech Recognition Stuff goes here

} else {
  console.log("Speech Recognition Not Available")
}

初期設定

我々が今から書くすべては、中で行きますif コンディション.
を作成しましょうwebkitSpeechRecognition オブジェクト.

let speechRecognition = new webkitSpeechRecognition();

プロパティ

では、このプロパティを設定しましょうspeechRecognition オブジェクト.

連続リスニング

音声認識オブジェクトは、ユーザーが話すのを止めた後に聞くのを止めることができるか、ユーザーがそれを止めるまで、それが聞くのを続けることができます.場合は、フレーズや単語を認識する場合はfalse . このチュートリアルではtrue .

speechRecognition.continuous = true;

中間結果

中間結果はまだ最終的ではない結果です.このプロパティを有効にするとspeechRecognition オブジェクトは最終結果と共に中間結果を返します.設定しましょうtrue .

speechRecognition.interimResults = true;

言語

これはユーザが話す言語です.このプロパティを設定するには、Localeコードを使用する必要があります.すべての言語がまだこの機能で利用可能であることに注意してください.
選択メニューからユーザーが選んだ言語を設定しましょう.ダイアログを選択し、その値をLanguageプロパティに使用する必要があります.

speechRecognition.lang = document.querySelector("#select_dialect").value;

イベントとコールバック

あなたのようなイベントのコールバックを提供することができますonStart , onEnd , onResult , and onError .

オンスタート

このイベントは、ユーザーによって音声認識が開始されるときに引き起こされる.音声認識インスタンスがウェブページで聞いていることを示すコールバック関数を通過しましょう.
スターターコードでは<p> ステータスというIDを持つ要素Listening... . CSSを使用して、要素の表示プロパティをNoneに設定することで非表示になります.
設定しましょうdisplay: block 音声認識が始まるとき.

speechRecognition.onstart = () => {
  document.querySelector("#status").style.display = "block";
};

オンエンド

このイベントは、ユーザによる音声認識が終了したときに発生する.ステータスを隠すコールバック関数を渡しましょう<p> Webページの要素.
設定しましょうdisplay: none 音声認識が始まるとき.

speechRecognition.onend = () => {
  document.querySelector("#status").style.display = "none";
};

エラー

音声認識に何らかの誤りがあるとき、このイベントは引き起こされます.ステータスを隠すコールバック関数を渡しましょう<p> Webページの要素.
設定しましょうdisplay: none 音声認識が始まるとき.

speechRecognition.onError = () => {
  document.querySelector("#status").style.display = "none";
};

結果

このイベントはspeechRecognition オブジェクトは認識からいくつかの結果を有する.これは最終結果と中間結果が含まれます.結果をそれぞれに設定するコールバック関数を渡しましょう<span> 転写ボックス内.
これは、Webページの転写ボックスのHTMLコードです.中間結果は中間結果と最終結果を区別するために異なる色で着色される.

<div class="p-3" style="border: 1px solid gray; height: 300px; border-radius: 8px;">
  <span id="final" class="text-light"></span>
  <span id="interim" class="text-secondary"></span>
</div>

我々は、中間結果をspan ID中間と最終結果をspan IDファイナルで.
結果イベントはevent コールバック関数へのオブジェクト.このオブジェクトは結果を配列形式で含みます.配列の各要素にはisFinal その項目が中間結果か最終結果であるかどうかを示す.
コールバック関数の外部の最終転写物の変数と、コールバック関数内の中間転写体の変数を宣言しましょう.

let final_transcript = "";

speechRecognition.onresult = (event) => {
  // Create the interim transcript string locally because we don't want it to persist like final transcript
  let interim_transcript = "";
};

では、結果配列から文字列を作りましょう.結果項目が最終であるならば、ループを通してそれを走らせて、結果項目を最終的な転写物に加えなければなりません.そうでなければ、中間結果ストリングにそれを加えなければなりません.

// Loop through the results from the speech recognition object.
for (let i = event.resultIndex; i < event.results.length; ++i) {
  // If the result item is Final, add it to Final Transcript, Else add it to Interim transcript
  if (event.results[i].isFinal) {
    final_transcript += event.results[i][0].transcript;
  } else {
    interim_transcript += event.results[i][0].transcript;
  }
}

最後に、転写値をDOMを更新しましょう.

document.querySelector("#final").innerHTML = final_transcript;
document.querySelector("#interim").innerHTML = interim_transcript;

これは、onResult イベント.

let final_transcript = "";

speechRecognition.onresult = (event) => {
  // Create the interim transcript string locally because we don't want it to persist like final transcript
  let interim_transcript = "";

  // Loop through the results from the speech recognition object.
  for (let i = event.resultIndex; i < event.results.length; ++i) {
    // If the result item is Final, add it to Final Transcript, Else add it to Interim transcript
    if (event.results[i].isFinal) {
      final_transcript += event.results[i][0].transcript;
    } else {
      interim_transcript += event.results[i][0].transcript;
    }
  }

  // Set the Final franscript and Interim transcript.
  document.querySelector("#final").innerHTML = final_transcript;
  document.querySelector("#interim").innerHTML = interim_transcript;
};

スタート/ストップ認識

最後に、認識を始めて停止しましょう.
スタートのOnClickプロパティを設定し、ボタンを停止して音声認識を開始したり停止したりする必要があります.

document.querySelector("#start").onclick = () => {
  speechRecognition.start();
};
document.querySelector("#stop").onclick = () => {
  speechRecognition.stop();
};

これが最後のコードですspeechRecognition.js :

if ("webkitSpeechRecognition" in window) {
  // Initialize webkitSpeechRecognition
  let speechRecognition = new webkitSpeechRecognition();

  // String for the Final Transcript
  let final_transcript = "";

  // Set the properties for the Speech Recognition object
  speechRecognition.continuous = true;
  speechRecognition.interimResults = true;
  speechRecognition.lang = document.querySelector("#select_dialect").value;

  // Callback Function for the onStart Event
  speechRecognition.onstart = () => {
    // Show the Status Element
    document.querySelector("#status").style.display = "block";
  };
  speechRecognition.onerror = () => {
    // Hide the Status Element
    document.querySelector("#status").style.display = "none";
  };
  speechRecognition.onend = () => {
    // Hide the Status Element
    document.querySelector("#status").style.display = "none";
  };

  speechRecognition.onresult = (event) => {
    // Create the interim transcript string locally because we don't want it to persist like final transcript
    let interim_transcript = "";

    // Loop through the results from the speech recognition object.
    for (let i = event.resultIndex; i < event.results.length; ++i) {
      // If the result item is Final, add it to Final Transcript, Else add it to Interim transcript
      if (event.results[i].isFinal) {
        final_transcript += event.results[i][0].transcript;
      } else {
        interim_transcript += event.results[i][0].transcript;
      }
    }

    // Set the Final transcript and Interim transcript.
    document.querySelector("#final").innerHTML = final_transcript;
    document.querySelector("#interim").innerHTML = interim_transcript;
  };

  // Set the onClick property of the start button
  document.querySelector("#start").onclick = () => {
    // Start the Speech Recognition
    speechRecognition.start();
  };
  // Set the onClick property of the stop button
  document.querySelector("#stop").onclick = () => {
    // Stop the Speech Recognition
    speechRecognition.stop();
  };
} else {
  console.log("Speech Recognition Not Available");
}

結果

プロジェクトの配備されたバージョンを見ることができますhere .

再生しましょう

我々は、githubリポジトリからスターターコードをクローンしました.

新しいJavaScriptファイルを作成し、HTMLファイルにリンクしました.

我々はwebkitSpeechRecognition クラスはwindow オブジェクト.

の新しいインスタンスを作成しましたwebkitSpeechRecognition クラス.

いくつかのプロパティを設定しますcontinuous , interimResults , and language その音声認識のインスタンス.

別のイベントのコールバックメソッドを追加しましたonStart , onEnd , onError , and onResult .

スタートのOnClickプロパティを設定し、ボタンを停止して音声認識を開始して停止します.

おめでとう.🥳 あなたはそれをした.
読書ありがとう!