recursal/MDN huggingface dataset:
VideoTrackList: change イベント
===========================

`change` イベントは、映像トラックがアクティブまたは非アクティブになったとき（トラックの `selected` プロパティを変更したときなど）に発生します。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("change", (event) => {});

onchange = (event) => {};
```

イベント型
-----

一般的な `Event` で、追加のプロパティはありません。

例
-

`addEventListener()` を使用する場合


```js
const videoElement = document.querySelector("video");
videoElement.videoTracks.addEventListener("change", (event) => {
  console.log(`'${event.type}' イベント発生`);
});

// `selected` の値を変更すると `change` イベントを引き起こします
const toggleTrackButton = document.querySelector(".toggle-track");
toggleTrackButton.addEventListener("click", () => {
  const track = videoElement.videoTracks[0];
  track.selected = !track.selected;
});
```


`onchange` イベントハンドラープロパティを使用する場合


```js
const videoElement = document.querySelector("video");
videoElement.videoTracks.onchange = (event) => {
  console.log(`'${event.type}' イベント発生`);
};

// `selected` の値を変更すると `change` イベントを引き起こします
const toggleTrackButton = document.querySelector(".toggle-track");
toggleTrackButton.addEventListener("click", () => {
  const track = videoElement.videoTracks[0];
  track.selected = !track.selected;
});
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-media-change |
| HTML Standard # handler-tracklist-onchange |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 関連イベント: `addtrack`, `removetrack`
* `AudioTrackList` を対象としたこのイベント: `change`
* メディアキャプチャとストリーム API
* WebRTC
MediaDevices: selectAudioOutput() メソッド
======================================

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

`MediaDevices` の **`selectAudioOutput()`** は、ユーザーに特定の音声出力機器、例えばスピーカーやヘッドフォンを選択するよう尋ねます。
 成功すると、返される `Promise` は選択された機器を記述した `MediaDeviceInfo` で解決されます。

構文
--


```js
selectAudioOutput()
selectAudioOutput(options)
```

### 引数

`options` 省略可

ユーザーへの問い合わせで提供される機器を構成するオブジェクトです。

`deviceId` 省略可

プロンプトに表示する（唯一の）機器の ID を表す文字列（既定値は ""）。

**メモ:** ユーザーエージェントは、指定された NULL ではない ID が以前のセッションで `selectAudioOutput()` によってユーザーに公開されていた場合、ユーザーへのプロンプトをスキップすることを選択することができます。
 この場合、ユーザーエージェントは単にこの機器 ID で解決するか、同じ機器の新しい ID が変更されている場合は、それを使用することができます。


 これは、永続化された機器 ID を使用したいアプリケーションのためのものです。
 この ID は `setSinkId()` で動作する前に `selectAudioOutput()` で正常に渡されなければなりません。




### 返値

`Promise`で、プロミスが履行されると `MediaDeviceInfo` オブジェクトを受け取ります。
 このオブジェクトは、ユーザーが選択した音声出力デバイスを記述します。

### 例外

`NotAllowedError` `DOMException`

現在のページに `speaker-selection` (en-US) 権限ポリシーが与えられていない場合、またはユーザーが機器を選択せずに選択プロンプトを閉じた場合に返されます。

`NotFoundError` `DOMException`

利用可能な音声出力機器がない場合に返されます。

`InvalidStateError` `DOMException`

一時的な有効化が発生していない場合に返されます（何らかの UI イベントから起動する必要があります）。

セキュリティ要件
--------

API へのアクセスは、以下の制約を受けることになります。

* このメソッドは安全なコンテキストで呼び出す必要があります。
* 一時的なユーザーによる有効化が必要です。
 この機能が機能するためには、ユーザーがページや UI 要素を操作する必要があります。
* アクセスは HTTP の `speaker-selection` 権限ポリシーで制限される可能性があります。
* ユーザーエージェント固有の仕組みにより、ユーザーが明示的に音声出力装置の使用許可を与えるか、または以前に許可を与えている必要があります。
 権限ポリシーによってアクセスが拒否された場合、ユーザー権限によって許可されることはないことに注意してください。

権限の状態は、権限 API の `navigator.permissions.query()` メソッドで、 `speaker-selection` 権限の権限記述子を使用することで、確認することができます。

例
-

 こちらは、ボタンクリックにより起動される関数の中で `selectAudioOutput()` を使用する例です。
 これは、選択されたデバイス ID とラベル（もしあれば）またはエラーメッセージを出力しています。


```js
document.querySelector("#myButton").addEventListener("click", () => {
  if (!navigator.mediaDevices.selectAudioOutput) {
    console.log("selectAudioOutput() not supported.");
    return;
  }

  // 選択した機器やエラーをプロンプト表示しログ出力する
  navigator.mediaDevices
    .selectAudioOutput()
    .then((device) => {
      console.log(`${device.kind}: ${device.label} id = ${device.deviceId}`);
    })
    .catch((err) => {
      console.error(`${err.name}: ${err.message}`);
    });
});
```


出力を選択すると、このような結果が出るかもしれません。


```bash
audiooutput: Realtek Digital Output (Realtek(R) Audio) id = 0wE6fURSZ20H0N2NbxqgowQJLWbwo+5ablCVVJwRM3k=
```

仕様書
---

| Specification |
| --- |
| Audio Output Devices API # dom-mediadevices-selectaudiooutput |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* WebRTC - この API の紹介ページ
MediaDevices: enumerateDevices() メソッド
=====================================

`MediaDevices` の **`enumerateDevices()`** メソッドは、マイクやカメラ、ヘッドセットなど、利用可能なメディア入出力機器の一覧を要求します。
 返されたプロミス (`Promise`) は、機器を記述した `MediaDeviceInfo` の配列で解決されます。

 特定の機器へのアクセスは、権限 API によって制限されます。
 返される機器の一覧では、対応する権限が付与されていない機器は省略されます。`microphone`, `camera`, `speaker-selection` (en-US) （出力機器の場合）などです。

構文
--


```js
enumerateDevices()
```

### 引数

なし。

### 返値

`Promise` で、プロミスが履行されると `MediaDeviceInfo` オブジェクトの配列を受け取ります。
 配列内の各オブジェクトは、利用可能なメディア入出力機器の 1 つを記述します。
 順番は重要で、既定のキャプチャ機器が最初にリストアップされます。

 権限が付与された機器種別のみが "available" となります。
 また、`speaker-selection` (en-US) 権限ポリシーを使用して、音声出力の使用をブロックしていた場合、リストには現れないことに注意してください。

列挙に失敗した場合、プロミスは拒否されます。

セキュリティ要件
--------

API へのアクセスは、以下の制約を受けます。

* このメソッドは、安全なコンテキストで呼び出す必要があります。
例
-

これは `enumerateDevices()` の使用例です。デバイス ID の一覧と、もしあればそのラベルが出力されます。


```js
if (!navigator.mediaDevices?.enumerateDevices) {
  console.log("enumerateDevices() not supported.");
} else {
  // List cameras and microphones.
  navigator.mediaDevices
    .enumerateDevices()
    .then((devices) => {
      devices.forEach((device) => {
        console.log(`${device.kind}: ${device.label} id = ${device.deviceId}`);
      });
    })
    .catch((err) => {
      console.error(`${err.name}: ${err.message}`);
    });
}
```


出力例です。
```

videoinput: id = csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi+SqfBZZ8=
audioinput: id = RKxXByjnabbADGQNNZqLVLdmXlS0YkETYCIbg+XxnvM=
audioinput: id = r2/xw1xUPIyZunfV1lGrKOma5wTOvCkWfZ368XCndm0=
```


または 1 つ以上の `MediaStream` がアクティブな場合、または永続的な権限が付与されている場合は次のようになります。
```

videoinput: FaceTime HD Camera (Built-in) id=csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi+SqfBZZ8=
audioinput: default (Built-in Microphone) id=RKxXByjnabbADGQNNZqLVLdmXlS0YkETYCIbg+XxnvM=
audioinput: Built-in Microphone id=r2/xw1xUPIyZunfV1lGrKOma5wTOvCkWfZ368XCndm0=
```

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # dom-mediadevices-enumeratedevices |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `MediaDevices.getUserMedia`
* WebRTC - API の入門ページ
* MediaStream API - メディアストリームオブジェクトの API
* ウェブか無での写真撮影 は、動画ではなく写真を撮るために `getUserMedia()` を使用するチュートリアルです。
MediaDevices: getSupportedConstraints() メソッド
============================================

**`getSupportedConstraints()`** は `MediaDevices` インターフェイスのメソッドで、 `MediaTrackSupportedConstraints` 辞書に基づくオブジェクトを返却し、そのそれぞれのメンバーフィールドは、ユーザーエージェントが理解する制約可能なプロパティの 1 つを指定します。

構文
--


```js
getSupportedConstraints()
```

### 引数

なし。

### 返値

`MediaTrackSupportedConstraints` 辞書に基づく新しいオブジェクトです。このオブジェクトはユーザーエージェントが扱うことができるメディア制約の一覧を含みます。この一覧に含まれているものは、ユーザーエージェントが取り扱えるものだけなので、全ての論理型のプロパティは `true` の値になっています。

例
-

この例は、実行中のブラウザーで対応している制約の一覧を出力するものです。
```

<p>あなたのブラウザーは、以下のメディア制約に対応しています。</p>

<ul id="constraintList"></ul>
```


```
body {
  font:
    15px Arial,
    sans-serif;
}
```



```js
const constraintList = document.querySelector("#constraintList");
const supportedConstraints = navigator.mediaDevices.getSupportedConstraints();

for (const constraint of Object.keys(supportedConstraints)) {
  const elem = document.createElement("li");
  elem.innerHTML = `<code>${constraint}</code>`;
  constraintList.appendChild(elem);
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # dom-mediadevices-getsupportedconstraints |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
SpeechRecognition: nomatch イベント
===============================

**`nomatch`** はウェブ音声 API のイベントで、音声認識サービスが明確に認識できたものなしに最終結果を返したときに発生します。

`confidence` (en-US) の閾値を超えたり満たしたりしない程度の認識がされた場合も含まれます。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("nomatch", (event) => {});

onnomatch = (event) => {};
```

イベント型
-----

`SpeechRecognitionEvent` です。 `Event` を継承しています。

Event

SpeechRecognitionEventイベントプロパティ
---------

*以下に列挙したプロパティに加えて、親インターフェイスである `Event` から継承したプロパティも利用できます。*

`SpeechRecognitionEvent.emma` 読取専用 

結果の EMMA (Extensible MultiModal Annotation markup language) - XML - 表現を返します。

`SpeechRecognitionEvent.interpretation` 読取専用 

ユーザーが言ったことの意味づけを返します。

`SpeechRecognitionEvent.resultIndex` 読取専用 

実際に変更された `SpeechRecognitionResultList` (en-US) 「配列」の中で最もインデックス値の小さい結果を返します。

`SpeechRecognitionEvent.results` 読取専用 

現在のセッションのすべての音声認識結果を表す `SpeechRecognitionResultList` (en-US) オブジェクトを返します。

例
-

`nomatch` イベントは、 `addEventListener` メソッドで使用することができます。


```js
const recognition = new webkitSpeechRecognition() || new SpeechRecognition();

recognition.addEventListener("nomatch", (event) => {
  console.error("音声が認識されませんでした");
});
```


または `onnomatch` イベントハンドラープロパティを使用してください。


```js
recognition.onnomatch = () => {
  console.error("音声が認識されませんでした");
};
```

仕様書
---

| Specification |
| --- |
| Web Speech API # eventdef-speechrecognition-nomatch |
| Web Speech API # dom-speechrecognition-onnomatch |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ウェブ音声 API
SpeechRecognition: error イベント
=============================

**`error`** はウェブ音声 API の
 `SpeechRecognition` オブジェクトのイベントで、音声認識のエラーが発生した時に発生します。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("error", (event) => {});

onerror = (event) => {};
```

イベント型
-----

`SpeechRecognitionErrorEvent` です。 `Event` を継承しています。

Event

SpeechRecognitionErrorEventイベントプロパティ
---------

*以下に列挙したプロパティに加えて、親インターフェイスである `Event` から継承したプロパティも利用できます。*

`SpeechRecognitionErrorEvent.error` (en-US) 読取専用 

発生したエラーの種類を示します。

`SpeechRecognitionErrorEvent.message` (en-US) 読取専用 

エラーの詳細を説明するメッセージを返します。

例
-

`error` イベントは、 `addEventListener` メソッドで使用することができます。


```js
const recognition = new webkitSpeechRecognition() || new SpeechRecognition();

recognition.addEventListener("error", (event) => {
  console.error(`音声認識エラーが発生しました: ${event.error}`);
});
```


または `onerror` イベントハンドラープロパティを使用してください。


```js
recognition.onerror = (event) => {
  console.error(`音声認識エラーが発生しました: ${event.error}`);
};
```

仕様書
---

| Specification |
| --- |
| Web Speech API # eventdef-speechrecognition-error |
| Web Speech API # dom-speechrecognition-onerror |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ウェブ音声 API
SpeechRecognition.grammars
==========================

**`grammars`** は `SpeechRecognition` インターフェイスのプロバティで、現在の `SpeechRecognition` が理解できる文法を表す `SpeechGrammar` オブジェクトの集合を返します。

値
-

`SpeechGrammarList` (en-US) で、アプリの文法を表す`SpeechGrammar` オブジェクトが入っています。

例
-

下記のソースコードは Speech color changer を参考しています。


```js
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;

// ...
```

仕様書
---

| Specification |
| --- |
| Web Speech API # dom-speechrecognition-grammars |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ウェブ音声 API
SpeechRecognition.abort()
=========================

**`abort()`** はウェブ音声 API のメソッドで、音声認識サービスが、入ってくる音を待ち受けすることを停止し、 `SpeechRecognitionResult` (en-US) を返さないようにします。

構文
--


```js
abort()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-


```js
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;

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

document.body.onclick = () => {
  recognition.start();
  console.log("色のコマンドを受け付ける準備ができました。");
};

abortBtn.onclick = () => {
  recognition.abort();
  console.log("音声認識が中止されました。");
};

recognition.onspeechend = () => {
  recognition.stop();
  console.log("音声認識サービスが停止されました。");
};
```

仕様書
---

| Specification |
| --- |
| Web Speech API # dom-speechrecognition-abort |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ウェブ音声 API
SpeechRecognition: result イベント
==============================

**`result`** はウェブ音声 API のイベントで、音声認識サービスが結果を返したとき、つまり単語やフレーズが正の値で認識され、それがアプリに伝達されたときに発行されます。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("result", (event) => {});

onresult = (event) => {};
```

イベント型
-----

`SpeechRecognitionEvent` です。 `Event` を継承しています。

Event

SpeechRecognitionEventイベントプロパティ
---------

*以下に列挙したプロパティに加えて、親インターフェイスである `Event` から継承したプロパティも利用できます。*

`SpeechRecognitionEvent.emma` 読取専用 

結果の EMMA (Extensible MultiModal Annotation markup language) - XML - 表現を返します。

`SpeechRecognitionEvent.interpretation` 読取専用 

ユーザーが言ったことの意味づけを返します。

`SpeechRecognitionEvent.resultIndex` 読取専用 

実際に変更された `SpeechRecognitionResultList` (en-US) 「配列」の中で最もインデックス値の小さい結果を返します。

`SpeechRecognitionEvent.results` 読取専用 

現在のセッションのすべての音声認識結果を表す `SpeechRecognitionResultList` (en-US) オブジェクトを返します。

例
-

下記のソースコードは Speech color changer の例を参考しています

`result` イベントは、 `addEventListener` メソッドで使用することができます。


```js
const recognition = new SpeechRecognition();

recognition.addEventListener("result", (event) => {
  const color = event.results[0][0].transcript;
  diagnostic.textContent = `結果を受信しました: ${color}.`;
  bg.style.backgroundColor = color;
});
```


または `onresult` イベントハンドラープロパティを使用してください。


```js
recognition.onresult = (event) => {
  const color = event.results[0][0].transcript;
  diagnostic.textContent = `結果を受信しました: ${color}.`;
  bg.style.backgroundColor = color;
};
```

仕様書
---

| Specification |
| --- |
| Web Speech API # eventdef-speechrecognition-result |
| Web Speech API # dom-speechrecognition-onresult |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ウェブ音声 API
SpeechRecognition: audiostart イベント
==================================

**`audiostart`** はウェブ音声 API のイベントで、ユーザーエージェントが音声認識のためのオーディオキャプチャを開始したときに発生します。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("audiostart", (event) => {});

onaudiostart = (event) => {};
```

イベント型
-----

一般的な `Event` であり、追加のプロパティはありません。

例
-

`audiostart` イベントは、 `addEventListener` メソッドで使用することができます。


```js
const recognition = new webkitSpeechRecognition() || new SpeechRecognition();

recognition.addEventListener("audiostart", () => {
  console.log("音声キャプチャを開始しました。");
});
```


または `onaudiostart` イベントハンドラープロパティを使用してください。


```js
recognition.onaudiostart = () => {
  console.log("音声キャプチャを開始しました。");
};
```

仕様書
---

| Specification |
| --- |
| Web Speech API # eventdef-speechrecognition-audiostart |
| Web Speech API # dom-speechrecognition-onaudiostart |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ウェブ音声 API
SpeechRecognition.interimResults
================================

**`interimResults`** は `SpeechRecognition` インターフェイスのプロパティで、中間の結果を返す (`true`) か返さない (`false`) か制御します。中間の結果は最終的ではない結果になります（例えば `SpeechRecognitionResult.isFinal` プロパティは `false` となります）。

**`interimResults`** の既定値は `false` です。

### 値

論理値で、現在の `SpeechRecognition` の中間結果の状態を表します。 `true` の場合は中間の結果を返すことができ、 `false` の場合は返すことができません。

例
-

下記のソースコードは Speech color changer を参考しています


```js
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;

// ...
```

仕様書
---

| Specification |
| --- |
| Web Speech API # dom-speechrecognition-interimresults |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ウェブ音声 API
SpeechRecognition()
===================

**`SpeechRecognition()`** コンストラクターは、 `SpeechRecognition` のオブジェクトインスタンスを作成します。

構文
--


```js
new SpeechRecognition()
```

### 引数

なし。

例
-

このコードは、 Speech color changer から引用しています。


```js
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;

// ...
```

仕様書
---

| Specification |
| --- |
| Web Speech API # dom-speechrecognition-speechrecognition |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ウェブ音声 API
SpeechRecognition: audioend イベント
================================

**`audioend`** はウェブ音声 API のイベントで、ユーザーエージェントが音声認識のためのオーディオキャプチャを終了したときに発生します。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("audioend", (event) => {});

onaudioend = (event) => {};
```

イベント型
-----

一般的な `Event` であり、追加のプロパティはありません。

例
-

`audioend` イベントは、 `addEventListener` メソッドで使用することができます。


```js
const recognition = new webkitSpeechRecognition() || new SpeechRecognition();

recognition.addEventListener("audioend", () => {
  console.log("音声認識が終了しました。");
});
```


または `onaudioend` イベントハンドラープロパティを使用してください。


```js
recognition.onaudioend = () => {
  console.log("Audio capturing ended");
};
```

仕様書
---

| Specification |
| --- |
| Web Speech API # eventdef-speechrecognition-audioend |
| Web Speech API # dom-speechrecognition-onaudioend |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ウェブ音声 API
SpeechRecognition.start()
=========================

**`start()`** はウェブ音声 API のメソッドで、 `SpeechRecognition` に関連する文法を認識する意図をもって、着信される音声を認識する音声認識サービスを開始します。

構文
--


```js
start()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-


```js
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;

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

document.body.onclick = () => {
  recognition.start();
  console.log("色のコマンドを受け付ける準備ができました。");
};

abortBtn.onclick = () => {
  recognition.abort();
  console.log("音声認識が中止されました。");
};

recognition.onspeechend = () => {
  recognition.stop();
  console.log("音声認識サービスが停止されました。");
};
```

仕様書
---

| Specification |
| --- |
| Web Speech API # dom-speechrecognition-start |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ウェブ音声 API
SpeechRecognition.stop()
========================

**`stop()`** はウェブ音声 API のメソッドで、入ってくる音声の待ち受けする認識サービスを停止し、今まで認識した音声を `SpeechRecognitionResult` (en-US) として返します。

構文
--


```js
stop()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-


```js
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;

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

document.body.onclick = () => {
  recognition.start();
  console.log("色のコマンドを受け付ける準備ができました。");
};

abortBtn.onclick = function () {
  recognition.abort();
  console.log("音声認識が中止されました。");
};

recognition.onspeechend = function () {
  recognition.stop();
  console.log("音声認識サービスが停止されました。");
};
```

仕様書
---

| Specification |
| --- |
| Web Speech API # dom-speechrecognition-stop |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ウェブ音声 API
SpeechRecognition: start イベント
=============================

**`speechstart`** はウェブ音声 API の `SpeechRecognition` オブジェクトのイベントで、これは、音声認識サービスが、現在の `SpeechRecognition` に関連する文法を認識するために、入力される音声を聞き始めたときに発行されます。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("start", (event) => {});

onstart = (event) => {};
```

イベント型
-----

一般的な `Event` であり、追加のプロパティはありません。

例
-

`start` イベントは、 `addEventListener` メソッドで使用することができます。


```js
const recognition = new webkitSpeechRecognition() || new SpeechRecognition();

recognition.addEventListener("start", () => {
  console.log("音声認識サービスが開始しました");
});
```


または `onstart` イベントハンドラープロパティを使用してください。


```js
recognition.onstart = () => {
  console.log("音声認識サービスが開始しました");
};
```

仕様書
---

| Specification |
| --- |
| Web Speech API # eventdef-speechrecognition-start |
| Web Speech API # dom-speechrecognition-onstart |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ウェブ音声 API