SpeechRecognition

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

メモ: Chrome など一部のブラウザーでは、ウェブページ上で音声認識を使用するとサーバーベースの認識エンジンが使用されます。音声を認識処理するためにウェブサービスへ送信するため、オフラインでは動作しません。

コンストラクター

SpeechRecognition.SpeechRecognition(): 新しい SpeechRecognition オブジェクトを作成します。

インスタンスプロパティ

SpeechRecognition は、親インターフェイスである EventTarget からのプロパティも継承しています。

SpeechRecognition.grammars: SpeechGrammar オブジェクトのコレクションを返却および設定します。これは、現在の SpeechRecognition により理解される文法を表します。
SpeechRecognition.lang: 現在の SpeechRecognition の言語を返して設定します。指定されない場合、これは既定でで HTML の lang 属性の値になります。どちらも設定されていない場合、ユーザーエージェントの言語設定が使用されます。
SpeechRecognition.continuous: 各認識の継続的な結果を返すか、単一の認識結果だけを返すかを制御します。既定値は単一 (false) です。
SpeechRecognition.interimResults: 暫定的な結果を返すか (true)、そうでないか (false) を制御します。暫定的な結果は、最終的な結果ではありません（つまり、SpeechRecognitionResult.isFinal プロパティの値は false です）。
SpeechRecognition.maxAlternatives: 結果ごとに提供される SpeechRecognitionAlternative の最大数を設定します。既定値は 1 です。

インスタンスメソッド

SpeechRecognition は、その親インターフェイスである EventTarget からのメソッドも継承しています。

SpeechRecognition.abort(): 音声認識サービスによる入力音声のリスニングを停止し、SpeechRecognitionResult を返そうとしないようにします。
SpeechRecognition.start(): 音声認識サービスによる入力音声のリスニングを開始し、現在の SpeechRecognition に関連付けられた文法の認識を行います。
SpeechRecognition.stop(): 音声認識サービスによる入力音声のリスニングを停止し、その時点までに補足した音声を使用して SpeechRecognitionResult を返そうとします。

イベント

これらのイベントを addEventListener() を使用して待ち受けするか、イベントリスナーをこのインターフェイスの onイベント名 プロパティに代入するかしてください。

audiostart: ユーザーエージェントが音声のキャプチャを開始したときに発行されます。 onaudiostart プロパティからも利用できます。
audioend: ユーザーエージェントが音声のキャプチャを完了したときに発行されます。 onaudioend プロパティからも利用できます。
end: 音声認識サービスが切断されたときに発行される。 onend プロパティからも利用できます。
error: 音声認識エラーが発生したときに発行されます。 onerror プロパティからも利用できます。
nomatch: 音声認識サービスが、有意な認識がない最終結果を返したときに発行されます。これは、 confidence の閾値を満たさない、または超えない、ある程度の認識を含む場合があります。 onnomatch プロパティからも利用できます。
result: 音声認識サービスが結果を返したとき、つまり単語やフレーズが正の値で認識され、これがアプリに伝達されたときに発行されます。 onresult プロパティからも利用できます。
soundstart: （認識可能な音声であるかどうかに関わらず）何らかの音が検出されたときに発行されます。 onsoundstart プロパティからも利用できます。
soundend: 認識可能な音声であろうとなかろうと、何らかの音が検出されなくなったときに発行されます。 onsoundend プロパティからも利用できます。
speechstart: 音声認識サービスによって音声として認識される音が検出されたときに発行されます。 onpeechstart プロパティからも利用できます。
speechend: 音声認識サービスによって認識された音声が検出されなくなったときに発行されます。また、 onspeechend プロパティからも利用できます。
start: 音声認識サービスが、現在の SpeechRecognition に関連付けられた文法を認識するために、入力された音声を聞き始めたときに発行されます。 onstart プロパティからも利用できます。

シンプルな Speech color changer の例では、　SpeechRecognition() コンストラクターを使用して新しい SpeechRecognition オブジェクトのインスタンスを生成し、新しい SpeechGrammarList を作成、それを SpeechRecognition.grammars プロパティを使用して SpeechRecognition インスタンスにより認識される文法に設定します。

他の値を定義した後、それを設定して、クリックイベントの発生時 (SpeechRecognition.start() 参照) に認識サービスを開始します。音声の認識に成功すると、SpeechRecognition.result_event イベントが発生し、イベントオブジェクトから発話された色を展開、そしてそれを <html> 要素の背景色に設定します。

const grammar =
  "#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;";
const recognition = new SpeechRecognition();
const speechRecognitionList = new SpeechGrammarList();
speechRecognitionList.addFromString(grammar, 1);
recognition.grammars = speechRecognitionList;
recognition.continuous = false;
recognition.lang = "en-US";
recognition.interimResults = false;
recognition.maxAlternatives = 1;

const diagnostic = document.querySelector(".output");
const bg = document.querySelector("html");

document.body.onclick = () => {
  recognition.start();
  console.log("Ready to receive a color command.");
};

recognition.onresult = (event) => {
  const color = event.results[0][0].transcript;
  diagnostic.textContent = `Result received: ${color}`;
  bg.style.backgroundColor = color;
};

仕様書

Specification
Web Speech API # speechreco-section