HTMLMediaElement: emptied イベント - Web API

HTMLMediaElement: emptied イベント
==============================

`emptied` イベントは、メディアが空になると発生します。 例えば、このイベントは、メディアがすでに読み込まれている（または部分的に読み込まれている）状態で、それを再読み込みするために `load()` メソッドを呼び出した場合に送信されます。

このイベントはキャンセル不可で、バブリングしません。

構文
--

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

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

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

イベント型
-----

一般的な `Event` です。

例
-

これらの例では、 `HTMLMediaElement` の `emptied` イベントのイベントリスナーを追加し、そのイベントハンドラーがイベントの発生に反応したときにメッセージを投稿します。

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

```js
const video = document.querySelector("video");

video.addEventListener("emptied", (event) => {
  console.log("ええっと。メディアが空です。 load() を呼び出しましたか？");
});
```

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

```js
const video = document.querySelector("video");

video.onemptied = (event) => {
  console.log("ええっと。メディアが空です。 load() を呼び出しましたか？");
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-media-emptied |
| HTML Standard # handler-onemptied |

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

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

関連イベント
------

* HTMLMediaElement `playing` イベント
* HTMLMediaElement `waiting` イベント
* HTMLMediaElement `seeking` イベント
* HTMLMediaElement `seeked` イベント
* HTMLMediaElement `ended` イベント
* HTMLMediaElement `loadedmetadata` イベント
* HTMLMediaElement `loadeddata` イベント
* HTMLMediaElement `canplay` イベント
* HTMLMediaElement `canplaythrough` イベント
* HTMLMediaElement `durationchange` イベント
* HTMLMediaElement `timeupdate` イベント
* HTMLMediaElement `play` イベント
* HTMLMediaElement `pause` イベント
* HTMLMediaElement `ratechange` イベント
* HTMLMediaElement `volumechange` イベント
* HTMLMediaElement `suspend` イベント
* HTMLMediaElement `emptied` イベント
* HTMLMediaElement `stalled` イベント
関連情報
----

* `HTMLAudioElement`
* `HTMLVideoElement`
* `<audio>`
* `<video>`


HTMLMediaElement.buffered - Web API

HTMLMediaElement.buffered
=========================

**`buffered`** は `HTMLMediaElement` オブジェクトの読み取り専用プロパティで、この `buffered` プロパティがアクセスされた時点でユーザーエージェントがバッファリングしているメディアリソースの範囲があれば，それを表す新しい静的な正規化された `TimeRanges` オブジェクトを返します。

**メモ:** この機能はウェブワーカーでは利用できません。

値
-

`buffered` プロパティがアクセスされた時点で、（存在する場合）ユーザーエージェントがバッファリングしているメディアリソースの範囲を表す、新しい静的な正規化 TimeRanges オブジェクトです。

例
-

```js
const obj = document.createElement("video");
console.log(obj.buffered); // TimeRanges { length: 0 }
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-media-buffered-dev |
| Media Source Extensions™ # htmlmediaelement-extensions |

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

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

関連情報
----

* これを定義しているインターフェイスである `HTMLMediaElement`


HTMLMediaElement.playbackRate - Web API

HTMLMediaElement.playbackRate
=============================

**`HTMLMediaElement.playbackRate`** プロパティは、メディアが再生されるレートを設定します。これはユーザーが早送りやスローモーションなどのユーザー制御を実装するために使用されます。通常の再生レートにこの値を掛けて現在のレートが求められるため、 1.0 の値が通常の速度です。

`playbackRate` が負の数であれば、メディアは逆方向に再生されます。

音声は、逆方向の再生であったり、早送りやスロー再生が実用的な範囲を外れていた場合（例えば、 Gecko では `0.25` から `4.0` の範囲であれば）ミュートされます。

既定の設定では、音声のピッチが補正されます。ピッチ補正は `HTMLMediaElement.preservesPitch` プロパティで無効にすることができます。

値
-

`double` 値です。 `1.0` は「通常の速度」で、 `1.0` より小さければ通常より遅く、大きければ通常より早く再生されます。（**既定値:** `1.0`）

例
-

```js
const obj = document.createElement("video");
console.log(obj.playbackRate); // Expected Output: 1
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-media-playbackrate-dev |

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

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

関連情報
----

* 定義している `HTMLMediaElement` インターフェイス


HTMLMediaElement: stalled イベント - Web API

HTMLMediaElement: stalled イベント
==============================

`stalled` イベントは、ユーザーエージェントがメディアデータをフェッチしようとして、データが予期せずに来なかったときに発生します。

このイベントはキャンセル不可で、バブリングしません。

構文
--

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

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

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

イベント型
-----

一般的な `Event` です。

例
-

これらの例では、`HTMLMediaElement` の `stalled` イベントのイベントリスナーを追加し、そのイベントハンドラがイベントの発生に反応したときにメッセージを投稿します。

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

```js
const video = document.querySelector("video");

video.addEventListener("stalled", (event) => {
  console.log("データのフェッチに失敗しました。");
});
```

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

```js
const video = document.querySelector("video");

video.onstalled = (event) => {
  console.log("データのフェッチに失敗しました。");
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-media-stalled |
| HTML Standard # handler-onstalled |

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

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

関連イベント
------

* HTMLMediaElement `playing` イベント
* HTMLMediaElement `waiting` イベント
* HTMLMediaElement `seeking` イベント
* HTMLMediaElement `seeked` イベント
* HTMLMediaElement `ended` イベント
* HTMLMediaElement `loadedmetadata` イベント
* HTMLMediaElement `loadeddata` イベント
* HTMLMediaElement `canplay` イベント
* HTMLMediaElement `canplaythrough` イベント
* HTMLMediaElement `durationchange` イベント
* HTMLMediaElement `timeupdate` イベント
* HTMLMediaElement `play` イベント
* HTMLMediaElement `pause` イベント
* HTMLMediaElement `ratechange` イベント
* HTMLMediaElement `volumechange` イベント
* HTMLMediaElement `suspend` イベント
* HTMLMediaElement `emptied` イベント
* HTMLMediaElement `stalled` イベント
関連情報
----

* `HTMLAudioElement`
* `HTMLVideoElement`
* `<audio>`
* `<video>`


HTMLMediaElement.ended - Web API

HTMLMediaElement.ended
======================

**`HTMLMediaElement.ended`** は、メディア要素が再生を終了したかどうかを示します。

値
-

論理値で、要素に含まれているメディアの再生が終了した場合に `true` となります。

メディアのソースが `MediaStream` の場合、ストリームの `active` プロパティの値が `false` であれば、この値は `true` です。

例
-

```js
const obj = document.createElement("video");
console.log(obj.ended); // false
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-media-ended-dev |

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

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

関連情報
----

* 定義している `HTMLMediaElement` インターフェイス
* `MediaStream`
* `MediaStream.active`


HTMLMediaElement: progress イベント - Web API

HTMLMediaElement: progress イベント
===============================

**`progress`** イベントは、ブラウザーがリソースを読み込むときに定期的に発生します。

このイベントはキャンセル不可で、バブリングしません。

構文
--

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

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

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

イベント型
-----

一般的な `Event` です。

例
-

### ライブデモ

#### HTML

```html
<div class="example">
  <button type="button">Load video</button>
  <video controls width="250"></video>

  <div class="event-log">
    <label for="eventLog">Event log:</label>
    <textarea readonly class="event-log-contents" id="eventLog"></textarea>
  </div>
</div>
```

```
.event-log-contents {
  width: 18rem;
  height: 5rem;
  border: 1px solid black;
  margin: 0.2rem;
  padding: 0.2rem;
}

.example {
  display: grid;
  grid-template-areas:
    "button log"
    "video log";
}

button {
  grid-area: button;
  width: 10rem;
  margin: 0.5rem 0;
}

video {
  grid-area: video;
}

.event-log {
  grid-area: log;
}

.event-log > label {
  display: block;
}
```

#### JavaScript

```js
const loadVideo = document.querySelector("button");
const video = document.querySelector("video");
const eventLog = document.querySelector(".event-log-contents");
let source = null;

function handleEvent(event) {
  eventLog.textContent += `${event.type}\n`;
}

video.addEventListener("loadstart", handleEvent);
video.addEventListener("progress", handleEvent);
video.addEventListener("canplay", handleEvent);
video.addEventListener("canplaythrough", handleEvent);

loadVideo.addEventListener("click", () => {
  if (source) {
    document.location.reload();
  } else {
    loadVideo.textContent = "Reset example";
    source = document.createElement("source");
    source.setAttribute(
      "src",
      "https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/rabbit320.mp4",
    );
    source.setAttribute("type", "video/mp4");

    video.appendChild(source);
  }
});
```

#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # event-media-progress |
| HTML Standard # handler-onprogress |

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

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

関連情報
----

* `HTMLAudioElement`
* `HTMLVideoElement`
* `<audio>`
* `<video>`


HTMLMediaElement.volume - Web API

HTMLMediaElement.volume
=======================

**`HTMLMediaElement.volume`** プロパティは、メディアを再生する音量を設定します。

値
-

`double` 値で 0 から 1 の間でなければなりません。 ここで、0 は効果的にミュートされ、1 が最大の可能な値です。

例
-

```js
const obj = document.createElement("audio");
console.log(obj.volume); // 1
obj.volume = 0.75;
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-media-volume-dev |

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

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

関連情報
----

* 定義している `HTMLMediaElement` インターフェイス
* `HTMLMediaElement.muted`


HTMLMediaElement.currentTime - Web API

HTMLMediaElement.currentTime
============================

`HTMLMediaElement` インターフェイスの **`currentTime`** プロパティは、現在の再生時間を秒単位で示します。

この値を変更すると、メディアは新しい時刻にシークされます。

値
-

現在の再生時刻を秒単位で示す倍精度浮動小数点値です。

メディアがまだ再生されていない場合、 `currentTime` の値は `play()` メソッドが呼ばれたときに再生が開始されるメディア内の時刻位置を示しています。

`currentTime`に新しい値を設定すると、メディアが利用可能であれば、指定された時刻にシークします。

ライブストリーミングされたメディアなど、再生時間が不明なメディアでは、ブラウザーがメディアバッファーから時間切れのメディア部分を取得できない可能性があります。また、タイムラインが 0 秒で始まらないメディアは、そのタイムラインの最も早い時刻より前にシークすることはできません。

秒単位のメディアの長さは、 `duration`プロパティを用いて決定することができます。

例
-

```js
const video = document.createElement("video");
console.log(video.currentTime);
```

使用上の注意
------

### 時間精度の引き下げ

タイミング攻撃や フィンガープリントから保護するために、ブラウザーは `currentTime` が返す値を丸めたり、その他の方法で調整することがあります。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-media-currenttime-dev |

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

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

関連情報
----

* 定義している `HTMLMediaElement` インターフェイス
* `HTMLMediaElement.fastSeek()`: 時刻をセットする他の方法
* `HTMLMediaElement.duration`: 秒単位のメディアの再生時間


HTMLMediaElement.currentSrc - Web API

HTMLMediaElement.currentSrc
===========================

**`HTMLMediaElement.currentSrc`** プロパティには、選択されたメディアリソースの絶対 URL が入っています。この選択は、例えば、ウェブサーバーがユーザーのディスプレイの解像度に基づいてメディアファイルを選択した場合に発生する可能性があります。 `networkState` プロパティが `EMPTY` の場合、値は空の文字列です。

値
-

選択されたメディアソースの絶対 URL を含む文字列です。 `networkState` が `EMPTY` の場合、これは空の文字列になります。 それ以外の場合は、メディア要素内に含まれる `HTMLSourceElement` によってリストされたリソースのいずれか、`<source>` 要素が指定されていない場合は値または `src` になります。

例
-

```js
const obj = document.createElement("video");
console.log(obj.currentSrc); // ""
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-media-currentsrc-dev |

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

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

関連情報
----

* これを定義しているインターフェイスである `HTMLMediaElement`


HTMLMediaElement.controlsList - Web API

HTMLMediaElement.controlsList
=============================

**`controlsList`** は `HTMLMediaElement` インターフェイスのプロパティで、ユーザーエージェントが自分自身で一連のコントロールを表示するときに、メディア要素上に表示するコントロールを選択することを支援する DOMTokenList を返します。 DOMTokenList は、3 つの使用可能な値 `nodownload`, `nofullscreen`, `noremoteplayback` のうちの 1 つ以上を取ります。

値
-

`DOMTokenList` です。

仕様書
---

| Specification |
| --- |
| Unknown specification # solution-outline |

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

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

関連情報
----

* Chrome HTMLMediaElement controlsList Sample


HTMLMediaElement: timeupdate イベント - Web API

HTMLMediaElement: timeupdate イベント
=================================

`timeupdate` イベントは、`currentTime` 属性で示される時刻が更新されたときに発生します。

イベントの頻度はシステムの負荷に依存しますが、およそ 4Hz と 66Hz との間で発生します（イベントハンドラーが実行するのに 250ms 以上かかることはないと仮定します）。ユーザーエージェントはシステム負荷とその都度イベントを処理する平均コストに基づいて、イベントの頻度を変えることが推奨されているため、ユーザーエージェントがビデオのデコード中に快適に処理できるよりも頻繁に UI 更新が行われることはありません。

このイベントはキャンセル不可で、バブリングしません。

構文
--

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

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

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

イベント型
-----

一般的な `Event` です。

例
-

これらの例は、 HTMLMediaElement の `timeupdate` イベントのイベントリスナーを追加し、イベントが発生してイベントハンドラーが動作するときにメッセージを投稿します。なお、イベントの頻度はシステムの稼働状況に依存します。

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

```js
const video = document.querySelector("video");

video.addEventListener("timeupdate", (event) => {
  console.log("The currentTime attribute has been updated. Again.");
});
```

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

```js
const video = document.querySelector("video");

video.ontimeupdate = (event) => {
  console.log("The currentTime attribute has been updated. Again.");
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-media-timeupdate |
| HTML Standard # handler-ontimeupdate |

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

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

関連イベント
------

* HTMLMediaElement `playing` イベント
* HTMLMediaElement `waiting` イベント
* HTMLMediaElement `seeking` イベント
* HTMLMediaElement `seeked` イベント
* HTMLMediaElement `ended` イベント
* HTMLMediaElement `loadedmetadata` イベント
* HTMLMediaElement `loadeddata` イベント
* HTMLMediaElement `canplay` イベント
* HTMLMediaElement `canplaythrough` イベント
* HTMLMediaElement `durationchange` イベント
* HTMLMediaElement `timeupdate` イベント
* HTMLMediaElement `play` イベント
* HTMLMediaElement `pause` イベント
* HTMLMediaElement `ratechange` イベント
* HTMLMediaElement `volumechange` イベント
* HTMLMediaElement `suspend` イベント
* HTMLMediaElement `emptied` イベント
* HTMLMediaElement `stalled` イベント
関連情報
----

* `HTMLAudioElement`
* `HTMLVideoElement`
* `<audio>`
* `<video>`


HTMLMediaElement: durationchange イベント - Web API

HTMLMediaElement: durationchange イベント
=====================================

`durationchange` イベントは、`duration` 属性が更新されたときに発生します。

構文
--

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

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

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

イベント型
-----

一般の `Event` です。

例
-

これらの例では、`HTMLMediaElement` の `durationchange` イベントのイベントリスナーを追加し、そのイベントハンドラがイベントの発生に反応したときにメッセージを投稿します。

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

```js
const video = document.querySelector("video");

video.addEventListener("durationchange", (event) => {
  console.log("理由はわかりませんが、動画の再生時間が変わりました。");
});
```

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

```js
const video = document.querySelector("video");

video.ondurationchange = (event) => {
  console.log("理由はわかりませんが、動画の再生時間が変わりました。");
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-media-durationchange |
| HTML Standard # handler-ondurationchange |

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

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

関連イベント
------

* HTMLMediaElement `playing` イベント
* HTMLMediaElement `waiting` イベント
* HTMLMediaElement `seeking` イベント
* HTMLMediaElement `seeked` イベント
* HTMLMediaElement `ended` イベント
* HTMLMediaElement `loadedmetadata` イベント
* HTMLMediaElement `loadeddata` イベント
* HTMLMediaElement `canplay` イベント
* HTMLMediaElement `canplaythrough` イベント
* HTMLMediaElement `durationchange` イベント
* HTMLMediaElement `timeupdate` イベント
* HTMLMediaElement `play` イベント
* HTMLMediaElement `pause` イベント
* HTMLMediaElement `ratechange` イベント
* HTMLMediaElement `volumechange` イベント
* HTMLMediaElement `suspend` イベント
* HTMLMediaElement `emptied` イベント
* HTMLMediaElement `stalled` イベント
関連情報
----

* `HTMLAudioElement`
* `HTMLVideoElement`
* `<audio>`
* `<video>`


HTMLMediaElement: playing イベント - Web API

HTMLMediaElement: playing イベント
==============================

`playing` イベントは再生が最初に開始されたときと、再生が再開されたときに発行されます。例えば、データ不足で一時停止や遅延していた再生が再開されたときに発行されます。

このイベントはキャンセル不可で、バブリングしません。

構文
--

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

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

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

イベント型
-----

一般的な `Event` です。

例
-

これらの例は、 HTMLMediaElement の `playing` イベントにイベントリスナーを追加してから、イベントが発生したことでイベントハンドラーが動作したときにメッセージをポストします。

`addEventListener()` を使用した例:

```js
const video = document.querySelector("video");

video.addEventListener("playing", (event) => {
  console.log("Video is no longer paused");
});
```

`onplaying` イベントハンドラープロパティを使用した例:

```js
const video = document.querySelector("video");

video.onplaying = (event) => {
  console.log("Video is no longer paused.");
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-media-playing |
| HTML Standard # handler-onplaying |

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

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

関連イベント
------

* HTMLMediaElement `playing` イベント
* HTMLMediaElement `waiting` イベント
* HTMLMediaElement `seeking` イベント
* HTMLMediaElement `seeked` イベント
* HTMLMediaElement `ended` イベント
* HTMLMediaElement `loadedmetadata` イベント
* HTMLMediaElement `loadeddata` イベント
* HTMLMediaElement `canplay` イベント
* HTMLMediaElement `canplaythrough` イベント
* HTMLMediaElement `durationchange` イベント
* HTMLMediaElement `timeupdate` イベント
* HTMLMediaElement `play` イベント
* HTMLMediaElement `pause` イベント
* HTMLMediaElement `ratechange` イベント
* HTMLMediaElement `volumechange` イベント
* HTMLMediaElement `suspend` イベント
* HTMLMediaElement `emptied` イベント
* HTMLMediaElement `stalled` イベント
関連情報
----

* `HTMLAudioElement`
* `HTMLVideoElement`
* `<audio>`
* `<video>`


HTMLMediaElement.loop - Web API

HTMLMediaElement.loop
=====================

**`HTMLMediaElement.loop`** プロパティは、 HTML の `loop` 属性を反映し、メディア要素が最後に到達したときに最初からやり直すかどうかを制御します。

値
-

論理値です。

例
-

```js
const obj = document.createElement("video");
obj.loop = true; // true
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-media-loop |

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

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

関連情報
----

* 定義している `HTMLMediaElement` インターフェイス


HTMLMediaElement.load() - Web API

HTMLMediaElement.load()
=======================

`HTMLMediaElement` の **`load()`** メソッドは、メディア要素をその初期状態にリセットし、再生を開始する準備としてメディアソースを選択してメディアを読み込むプロセスを開始します。

先読みされるメディアデータの量は、要素の `preload` 属性の値によって決まります。

このメソッドは通常、要素の `src` 属性を変更するか、メディア要素自体の中にネストされている `<source>` 要素を追加または削除することによって、メディア要素に使用可能な一連のソースを動的に変更した場合にのみ役立ちます。 `load()` は要素をリセットして利用可能なソースを再スキャンし、それによって変更を有効にします。

構文
--

```js
load()
```

### 引数

なし。

### 返値

なし (`undefined`)。

使用上のメモ
------

`load()` を呼び出すと、このメディア要素を含む進行中のすべての操作が中止され、`<audio>` 要素または `<video>` 要素で指定されたオプションとその `src` 属性または子の `<source>` 要素を指定して適切なメディアリソースの選択と読み込みのプロセスが開始されます。 これについては、動画と音声のコンテンツで詳しく説明しています。

進行中のアクティビティを中止するプロセスにより、 `play()` によって返された未処理のプロミス (`Promise`) が、新しいメディアの読み込みが開始される前に、そのステータスに基づいて適切に解決または拒否されます。保留中の再生用のプロミスは、 `"AbortError"` `DOMException` で中止されます。

読み込みプロセスが進むにつれて、次のように適切なイベントがメディア要素自体に送信されます。

* 要素がすでにメディアの読み込み処理中の場合、その読み込み処理は中止され、 **`abort`** イベントが送信されます。
* 要素がすでにメディアで初期化されている場合は、 **`emptied`** イベントが送信されます。
* 再生位置をメディアの先頭にリセットすると、実際に再生位置が変更された場合（つまり、まだ先頭になっていない場合）、 **`timeupdate`** イベントが送信されます。
* メディアが選択され、読み込みの開始準備が整うと、 **`loadstart`** イベントが配信されます。
* これ以降は、メディアの読み込みと同じようにイベントが送信されます。
例
-

この例では、文書内の `<video>` 要素を見つけて、`load()` を呼び出してそれをリセットします。

```js
const mediaElem = document.querySelector("video");
mediaElem.load();
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-media-load-dev |

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

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


HTMLMediaElement.setMediaKeys() - Web API

HTMLMediaElement.setMediaKeys()
===============================

**`setMediaKeys()`** は `HTMLMediaElement` インターフェイスのメソッドで、このメソッドは、渡された `MediaKeys` (en-US) に解決する `Promise` を返します。これは、再生中にメディアの暗号を解除するために使用されます。

構文
--

```js
setMediaKeys(mediaKeys)
```

### 引数

`mediaKeys`

再生中にメディアデータの復号のために `HTMLMediaElement` が使用できる `MediaKeys` (en-US) オブジェクトへの参照です。

### 返値

`Promise` で、 `MediaKeys` の渡されたインスタンスに解決します。

仕様書
---

| Specification |
| --- |
| Encrypted Media Extensions # dom-htmlmediaelement-setmediakeys |

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

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


HTMLMediaElement: volumechange イベント - Web API

HTMLMediaElement: volumechange イベント
===================================

`volumechange` イベントは、ボリュームが変更されたときに発生します。

このイベントはキャンセル不可で、バブリングしません。

構文
--

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

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

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

イベント型
-----

一般的な `Event` です。

例
-

これらの例では HTMLMediaElement の `volumechange` イベントのイベントリスナーを追加し、イベントが発生してイベントハンドラーが反応したときにメッセージをポストします。

`addEventListener()` を使用した例:

```js
const video = document.querySelector("video");

video.addEventListener("volumechange", (event) => {
  console.log("The volume changed.");
});
```

`onvolumechange` イベントハンドラープロパティを使用した例:

```js
const video = document.querySelector("video");

video.onvolumechange = (event) => {
  console.log("The volume changed.");
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-media-volumechange |
| HTML Standard # handler-onvolumechange |

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

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

関連イベント
------

* HTMLMediaElement `playing` イベント
* HTMLMediaElement `waiting` イベント
* HTMLMediaElement `seeking` イベント
* HTMLMediaElement `seeked` イベント
* HTMLMediaElement `ended` イベント
* HTMLMediaElement `loadedmetadata` イベント
* HTMLMediaElement `loadeddata` イベント
* HTMLMediaElement `canplay` イベント
* HTMLMediaElement `canplaythrough` イベント
* HTMLMediaElement `durationchange` イベント
* HTMLMediaElement `timeupdate` イベント
* HTMLMediaElement `play` イベント
* HTMLMediaElement `pause` イベント
* HTMLMediaElement `ratechange` イベント
* HTMLMediaElement `volumechange` イベント
* HTMLMediaElement `suspend` イベント
* HTMLMediaElement `emptied` イベント
* HTMLMediaElement `stalled` イベント
関連情報
----

* `HTMLAudioElement`
* `HTMLVideoElement`
* `<audio>`
* `<video>`


HTMLMediaElement.seekToNextFrame() - Web API

HTMLMediaElement.seekToNextFrame()
==================================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**`HTMLMediaElement.seekToNextFrame()`** メソッドは、非同期に現在の再生位置をメディアの次のフレームに進めます。

**警告:** この標準外のメソッドは、フィルタリングや編集などのタスクのためのメディアへの非リアルタイムアクセスに対応している実験プロセスの一部です。
 このメソッドは、予告なしに実装が変更されたり、削除されたりする可能性があるため、実運用コードでは使用しない方がよいでしょう。しかし、このメソッドを使って実験することは可能です。

このメソッドを使用すると、メディアをリアルタイムで実行せずに、動画メディアのフレームにアクセスすることができます。また、タイムコードではなくフレームをシーク単位として使用してメディアにアクセスすることもできます（ただし、目的のフレームに到達するまで一度に 1 フレームずつシークするだけですが）。このメソッドの有益な使用法としては、動画コンテンツのフィルタリングや編集が挙げられます。

このメソッドは、シーク処理が完了したときに 履行ハンドラーが呼び出される `Promise` を即座に返します。さらに、シークが配置されたことを関係者に知らせるために `seeked` イベントが送信されます。メディアが既に最後のフレームにあるためにシークに失敗した場合、`seeked` イベントが発生し、それ以降に `ended` イベントが続いて発生します。

メディア要素に動画がない場合、またはメディアがシーク可能でない場合は、何も起こりません。

構文
--

```js
seekToNextFrame()
```

### 引数

なし。

### 返値

シーク操作が完了したら履行される `Promise` です。

仕様書
---

どの仕様にも属していません。

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

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


HTMLMediaElement.crossOrigin - Web API

HTMLMediaElement.crossOrigin
============================

**`HTMLMediaElement.crossOrigin`** プロパティは、画像等の要素のための CORS 設定です。 詳しくは、 CORS 設定属性を参照してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-media-crossorigin |

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

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

関連情報
----

* これを定義しているインターフェイスである `HTMLMediaElement`


HTMLMediaElement.defaultMuted - Web API

HTMLMediaElement.defaultMuted
=============================

**`HTMLMediaElement.defaultMuted`** プロパティは、 HTML の `muted` 属性を反映し、メディア要素の音声出力を既定でミュートするかどうかを示します。このプロパティは動的な効果はありません。 音声出力をミュートおよびミュート解除するには、`muted` プロパティを使用してください。

値
-

論理値です。値が `true` の場合、既定で音声出力がミュートされることを意味します。

例
-

```js
const videoEle = document.createElement("video");
videoEle.defaultMuted = true;
console.log(videoEle.outerHTML); // <video muted=""></video>
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-media-defaultmuted |

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

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

関連情報
----

* 定義している `HTMLMediaElement` インターフェイス
* `HTMLMediaElement.muted`
* `HTMLMediaElement.volume`


HTMLMediaElement: pause イベント - Web API

HTMLMediaElement: pause イベント
============================

`pause` イベントは、動作の一時停止のリクエストが処理され、動作が一時状態に入ったときに送信されるものであり、メディアが要素の `pause()` の呼び出しを通して一時停止した後が最も一般的です。

イベントは `pause()` メソッドから戻り、メディア要素の `paused` プロパティが `true` に変化した後で一度送信されます。

このイベントはキャンセル不可で、バブリングしません。

構文
--

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

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

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

イベント型
-----

一般的な `Event` です。

例
-

これらの例は、 HTMLMediaElement の `pause` イベントにイベントリスナーを追加してから、イベントが発生したことでイベントハンドラーが動作したときにメッセージをポストします。

`addEventListener()` を使用した例:

```js
const video = document.querySelector("video");

video.addEventListener("pause", (event) => {
  console.log(
    "The Boolean paused property is now true. Either the " +
      "pause() method was called or the autoplay attribute was toggled.",
  );
});
```

`onpause` イベントハンドラープロパティを使用した例:

```js
const video = document.querySelector("video");

video.onpause = (event) => {
  console.log(
    "The Boolean paused property is now true. Either the " +
      "pause() method was called or the autoplay attribute was toggled.",
  );
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-media-pause |
| HTML Standard # handler-onpause |

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

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

関連イベント
------

* HTMLMediaElement `playing` イベント
* HTMLMediaElement `waiting` イベント
* HTMLMediaElement `seeking` イベント
* HTMLMediaElement `seeked` イベント
* HTMLMediaElement `ended` イベント
* HTMLMediaElement `loadedmetadata` イベント
* HTMLMediaElement `loadeddata` イベント
* HTMLMediaElement `canplay` イベント
* HTMLMediaElement `canplaythrough` イベント
* HTMLMediaElement `durationchange` イベント
* HTMLMediaElement `timeupdate` イベント
* HTMLMediaElement `play` イベント
* HTMLMediaElement `pause` イベント
* HTMLMediaElement `ratechange` イベント
* HTMLMediaElement `volumechange` イベント
* HTMLMediaElement `suspend` イベント
* HTMLMediaElement `emptied` イベント
* HTMLMediaElement `stalled` イベント
関連情報
----

* `HTMLAudioElement`
* `HTMLVideoElement`
* `<audio>`
* `<video>`
* `SpeechSynthesisUtterance`


HTMLMediaElement.audioTracks - Web API

HTMLMediaElement.audioTracks
============================

**`audioTracks`** は `HTMLMediaElement` オブジェクトの読み取り専用プロパティで、メディア要素の音声トラックを表すすべての `AudioTrack` オブジェクトを列挙した `AudioTrackList` オブジェクトを返します。

このメディア要素は、`<audio>` 要素または `<video>` 要素のどちらでもかまいません。

返されたリストは*生きて*います。つまり、トラックがメディア要素に追加、削除されると、リストの内容が動的に変更されます。一度リストへの参照を得れば、新しい音声トラックが追加されたり、既存のものが削除されたりしたときに、その変更を監視することができます。メディア要素のトラックリストの変更を監視する方法については、 AudioTrackList のイベントを参照してください。

値
-

メディア要素に含まれる音声トラックのリストを表す `AudioTrackList` オブジェクト。トラックのリストは、配列記法や、オブジェクトの `getTrackById()` メソッドを使ってアクセスできます。

各トラックは、そのトラックに関する情報を提供する `AudioTrack` オブジェクトによって表されます。

例
-

この例では、特定の要素のすべての音声トラックをミュートしています。

### HTML

HTML で、要素自体を確立します。

```html
<video id="video" src="somevideo.mp4"></video>
```

### JavaScript

JavaScript コードで、動画要素の音声トラックのミュートを処理します。

```js
const video = document.getElementById("video");

for (let i = 0; i < video.audioTracks.length; i += 1) {
  video.audioTracks[i].enabled = false;
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-media-audiotracks-dev |

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

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

関連情報
----

* これを定義しているインターフェイスである `HTMLMediaElement`
* `<audio>` および `<video>`
* `AudioTrack` および `AudioTrackList`


HTMLMediaElement.autoplay - Web API

HTMLMediaElement.autoplay
=========================

**`HTMLMediaElement.autoplay`** プロパティは、 HTML の `autoplay` 属性を反映しています。これは、メディアが中断なく再生できるようになった時点で自動的に再生を開始するかどうかを示します。

ソースが `MediaStream` で `autoplay` プロパティが `true` のメディア要素は、アクティブになると（つまり、`MediaStream.active` が `true` になると）再生を開始します。

**メモ:** 自動的に音声（または音声トラックを含む動画）を再生するサイトは、ユーザーにとって不快な経験になる可能性があるため、可能な限り避けるべきです。 自動再生機能を提供する必要がある場合は、オプトインする必要があります（ユーザーに明確に有効にするよう要求する）。 ただし、自動再生は、ソースが後でユーザーの制御下で設定されるメディア要素を作成するときには便利です。

自動再生、自動再生のブロック、およびユーザーのブラウザーによって自動再生がブロックされた場合の対応方法についての詳細は、メディアおよびウェブオーディオ API の自動再生ガイドを参照してください。

値
-

論理値で、このメディア要素が中断することなく再生できる量のコンテンツを読み込んだらすぐに再生を開始する場合は `true` となります。

**メモ:** ブラウザーによっては、ユーザーに無断でまたはバックグラウンドで破壊的な音声または動画が再生されるのを防ぐために、ユーザーが `autoplay` を無効にすることができるようにしている場合があります。 `autoplay` が実際に再生を開始するとは限りませんので、代わりに `play` イベントを使用してください。

例
-

```html
<video id="video" controls>
  <source
 src="https://player.vimeo.com/external/250688977.sd.mp4?s=d14b1f1a971dde13c79d6e436b88a6a928dfe26b&profile\_id=165" />
</video>
```

```js
// 自動再生を無効化（推奨）
// false が既定値です
document.querySelector("#video").autoplay = false;
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-media-autoplay |

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

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

関連情報
----

* これを定義しているインターフェイスである `HTMLMediaElement`
* `<audio>` および `<video>`


HTMLMediaElement.canPlayType() - Web API

HTMLMediaElement.canPlayType()
==============================

`HTMLMediaElement` の **`canPlayType()`** メソッドは、現在のブラウザーが指定された MIME タイプのメディアを再生できるかどうかを報告します。

**メモ:** この機能はウェブワーカーでは利用できません。

構文
--

```js
canPlayType(type)
```

### 引数

`type`

文字列で、メディアの MIME タイプと（オプションで） `codecs` 引数 (en-US)で対応しているコーデックのカンマ区切りのリストで指定します。

### 返値

 メディアを再生できる可能性がどの程度あるかを示す文字列です。
 この文字列は以下の値のいずれかです。

`""` (空文字列)

このメディアは現在の機器では再生できません。

`probably`

このメディアは、おそらくこのデバイスで再生可能です。

`maybe`

メディアが再生可能かどうかを判断するための十分な情報がありません（実際に再生が試みられるまで）。

例
-

```js
let obj = document.createElement("video");
console.log(obj.canPlayType("video/mp4")); // "maybe"
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-navigator-canplaytype-dev |

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

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

関連情報
----

* 定義している `HTMLMediaElement` インターフェイス
* `MediaCapabilities` (en-US) （メディア能力 API）
* ウェブコンテンツのメディア対応に関する問題への対応 (en-US)
* ウェブ上のメディア種別と形式のガイド
* `codecs` 引数 (en-US)


HTMLMediaElement: seeked イベント - Web API

HTMLMediaElement: seeked イベント
=============================

`seeked` イベントは、シーク操作が完了したことで、現在の再生位置が変更され、論理属性の `seeking` が `false` に変更されたときに発生します。

このイベントはキャンセル不可で、バブリングしません。

構文
--

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

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

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

イベント型
-----

一般的な `Event` です。

例
-

これらの例では、`HTMLMediaElement` の `seeked` イベントにイベントリスナーを追加し、そのイベントハンドラがイベントの発生に反応したときにメッセージを投稿します。

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

```js
const video = document.querySelector("video");

video.addEventListener("seeked", (event) => {
  console.log("動画が探していた再生位置を見つけました。");
});
```

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

```js
const video = document.querySelector("video");

video.onseeked = (event) => {
  console.log("動画が探していた再生位置を見つけました。");
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-media-seeked |
| HTML Standard # handler-onseeked |

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

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

関連イベント
------

* HTMLMediaElement `playing` イベント
* HTMLMediaElement `waiting` イベント
* HTMLMediaElement `seeking` イベント
* HTMLMediaElement `seeked` イベント
* HTMLMediaElement `ended` イベント
* HTMLMediaElement `loadedmetadata` イベント
* HTMLMediaElement `loadeddata` イベント
* HTMLMediaElement `canplay` イベント
* HTMLMediaElement `canplaythrough` イベント
* HTMLMediaElement `durationchange` イベント
* HTMLMediaElement `timeupdate` イベント
* HTMLMediaElement `play` イベント
* HTMLMediaElement `pause` イベント
* HTMLMediaElement `ratechange` イベント
* HTMLMediaElement `volumechange` イベント
* HTMLMediaElement `suspend` イベント
* HTMLMediaElement `emptied` イベント
* HTMLMediaElement `stalled` イベント
関連情報
----

* `HTMLAudioElement`
* `HTMLVideoElement`
* `<audio>`
* `<video>`


HTMLMediaElement.networkState - Web API

HTMLMediaElement.networkState
=============================

**`HTMLMediaElement.networkState`** プロパティは、ネットワークを介したメディアの現在の取得状況を示します。

値
-

`unsigned short` 型。 可能な値は次のとおりです。

| 定数 | 値 | 説明 |
| --- | --- | --- |
| `NETWORK_EMPTY` | 0 | まだデータがありません。 また、`readyState` は `HAVE_NOTHING` です。 |
| `NETWORK_IDLE` | 1 | `HTMLMediaElement` はアクティブで、リソースを選択しましたが、ネットワークを使用していません。 |
| `NETWORK_LOADING` | 2 | ブラウザーは `HTMLMediaElement` のデータをダウンロードしています。 |
| `NETWORK_NO_SOURCE` | 3 | `HTMLMediaElement` の `src` が見つかりません。 |

例
-

この例では、 audio 要素が再生を開始するのを待機してから、まだデータを読み込んでいるかどうかを確認します。

```html
<audio id="example" preload="auto">
  <source src="sound.ogg" type="audio/ogg" />
</audio>
```

```js
const obj = document.getElementById("example");

obj.addEventListener("playing", () => {
  if (obj.networkState === 2) {
    // 読み込み中...
  }
});
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-media-networkstate-dev |

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

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

関連情報
----

* 定義している `HTMLMediaElement` インターフェイス


HTMLMediaElement.readyState - Web API

HTMLMediaElement.readyState
===========================

**`HTMLMediaElement.readyState`** プロパティは、メディアの準備状態を示します。

値
-

`unsigned short` 型です。 可能な値は次のとおりです。

| 定数 | 値 | 説明 |
| --- | --- | --- |
| `HAVE_NOTHING` | 0 | メディアリソースに関する情報はありません。 |
| `HAVE_METADATA` | 1 | メタデータ属性を初期化するのに十分なメディアリソースが取得されました。 シークならば例外を発生させません。 |
| `HAVE_CURRENT_DATA` | 2 | 現在の再生位置にデータがありますが、実際には複数のフレームを再生するのに十分ではありません。 |
| `HAVE_FUTURE_DATA` | 3 | 現在の再生位置と将来までの少なくともほんの少しの時間のデータが利用可能です（つまり、例えば、少なくとも 2 フレームの動画）。 |
| `HAVE_ENOUGH_DATA` | 4 | 十分なデータが利用可能であり、ダウンロードレートが十分に高いため、メディアを中断することなく最後まで再生できます。 |

例
-

この例では、音声データを読み込むために `example` 要素で待ち受けします。そして、少なくとも現在の再生位置が読み込まれているかどうかをチェックします。読み込まれていれば、音声を再生します。

```html
<audio id="example" preload="auto">
  <source src="sound.ogg" type="audio/ogg" />
</audio>
```

```js
const obj = document.getElementById("example");

obj.addEventListener("loadeddata", () => {
  if (obj.readyState >= 2) {
    obj.play();
  }
});
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-media-readystate-dev |

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

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

関連情報
----

* 定義している `HTMLMediaElement` インターフェイス


HTMLMediaElement.preservesPitch - Web API

HTMLMediaElement.preservesPitch
===============================

**`HTMLMediaElement.preservesPitch`** プロパティは、 `HTMLMediaElement.playbackRate` の設定で行われた再生速度の変更を補償するために、ブラウザーが音声の音程を調整すべきかどうかを決定します。

値
-

論理値で、既定値は `true` です。

例
-

### preservesPitch プロパティの設定

この例には、 `<audio>` 要素、再生速度を制御する範囲コントロール、`preservesPitch`を設定するチェックボックスがあります。

音声を再生し、再生速度を調整し、チェックボックスを有効・無効にしてみてください。

```html
<audio
 controls
 src="https://mdn.github.io/webaudio-examples/audio-basics/outfoxing.mp3"></audio>

<div>
  <label for="rate">Adjust playback rate:</label>
  <input id="rate" type="range" min="0.25" max="3" step="0.05" value="1" />
</div>

<div>
  <label for="pitch">Preserve pitch:</label>
  <input type="checkbox" id="pitch" name="pitch" checked />
</div>
```

```
div {
  margin: 0.5rem 0;
}
```

```js
const audio = document.querySelector("audio");

const rate = document.querySelector("#rate");
rate.addEventListener("input", () => (audio.playbackRate = rate.value));

const pitch = document.querySelector("#pitch");
pitch.addEventListener("change", () => {
  if ("preservesPitch" in audio) {
    audio.preservesPitch = pitch.checked;
  } else if ("mozPreservesPitch" in audio) {
    //deprecated
    audio.mozPreservesPitch = pitch.checked;
  }
});
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-media-preservespitch-dev |

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

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

関連情報
----

* `HTMLMediaElement.playbackRate`
* ウェブオーディオの playbackRate の説明 (en-US)


HTMLMediaElement: abort イベント - Web API

HTMLMediaElement: abort イベント
============================

**`abort`** イベントは、リソースが完全には読み込まれなかったが、それがエラーの結果ではなかった場合に発生します。

このイベントはキャンセル不可で、バブリングしません。

構文
--

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

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

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

イベント型
-----

一般の `Event` です。

例
-

```js
const video = document.querySelector("video");
const videoSrc = "https://example.org/path/to/video.webm";

video.addEventListener("abort", () => {
  console.log(`Abort loading: ${videoSrc}`);
});

const source = document.createElement("source");
source.setAttribute("src", videoSrc);
source.setAttribute("type", "video/webm");

video.appendChild(source);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-media-abort |
| HTML Standard # handler-onabort |

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

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

関連情報
----

* `HTMLAudioElement`
* `HTMLVideoElement`
* `<audio>`
* `<video>`


HTMLMediaElement: canplay イベント - Web API

HTMLMediaElement: canplay イベント
==============================

`canplay` イベントは、ユーザーエージェントがメディアを再生できるようになったものの、追加のバッファリングのために停止することなくメディアの最後まで再生するには充分なデータが読み込まれていないとみられる場合に発生します。

このイベントはキャンセル不可で、バブリングしません。

構文
--

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

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

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

イベント型
-----

一般の `Event` です。

例
-

これらの例では、HTMLMediaElementの `canplay` イベントにイベントリスナーを追加し、そのイベントハンドラーがイベントの発行に反応したときにメッセージを送信しています。

`addEventListener()` を使用した例:

```js
const video = document.querySelector("video");

video.addEventListener("canplay", (event) => {
  console.log(
    "動画は開始できますが、最後まで再生されるかどうかはわかりません。",
  );
});
```

イベントハンドラープロパティ `oncanplay` を使用した例:

```js
const video = document.querySelector("video");

video.oncanplay = (event) => {
  console.log(
    "動画は開始できますが、最後まで再生されるかどうかはわかりません。",
  );
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-media-canplay |
| HTML Standard # handler-oncanplay |

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

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

関連イベント
------

* HTMLMediaElement `playing` イベント
* HTMLMediaElement `waiting` イベント
* HTMLMediaElement `seeking` イベント
* HTMLMediaElement `seeked` イベント
* HTMLMediaElement `ended` イベント
* HTMLMediaElement `loadedmetadata` イベント
* HTMLMediaElement `loadeddata` イベント
* HTMLMediaElement `canplay` イベント
* HTMLMediaElement `canplaythrough` イベント
* HTMLMediaElement `durationchange` イベント
* HTMLMediaElement `timeupdate` イベント
* HTMLMediaElement `play` イベント
* HTMLMediaElement `pause` イベント
* HTMLMediaElement `ratechange` イベント
* HTMLMediaElement `volumechange` イベント
* HTMLMediaElement `suspend` イベント
* HTMLMediaElement `emptied` イベント
* HTMLMediaElement `stalled` イベント
関連情報
----

* `HTMLAudioElement`
* `HTMLVideoElement`
* `<audio>`
* `<video>`


HTMLMediaElement.error - Web API

HTMLMediaElement.error
======================

**`HTMLMediaElement.error`** は最新のエラーの `MediaError` (en-US) オブジェクトです。エラーが発生していない場合は `null` になります。要素が `error` イベントを受け取ったら、このオブジェクトを調べることで、何が起こったのかについての詳細を決定することができます。

値
-

メディア要素で発生した最新のエラーを説明する `MediaError` (en-US) オブジェクト。 エラーが発生していない場合は `null` です。

例
-

この例では video 要素を設けて、それにエラーハンドラーを追加しています。エラーハンドラーは単に詳細をコンソールに記録します。

```js
const videoElement = document.createElement("video");
videoElement.onerror = () => {
  console.error(
    `Error ${videoElement.error.code}; details: ${videoElement.error.message}`,
  );
};
videoElement.src = "https://example.com/bogusvideo.mp4";
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-media-error-dev |

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

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

関連情報
----

* 定義している `HTMLMediaElement` インターフェイス
* `<audio>` および `<video>`


TouchList: item() メソッド - Web API

TouchList: item() メソッド
======================

**`item()`** メソッドは、この `TouchList` の中の指定された位置にある `Touch` オブジェクトを返します。

構文
--

```js
item(index)
```

### 引数

`index`

取得する `Touch` オブジェクトの添字を指定します。添字は、0 から `TouchList` の長さより 1 つ小さい数までの数です。

### 返値

`touchPoint`

 要求された `Touch` オブジェクトを `TouchList` から取得したものです。
 添字がリストの長さ以上の場合は `null` を返します。

例
-

このコード例では、`TouchList` インターフェイスの `item` メソッドと `length` プロパティの使い方を示しています。

```js
const target = document.getElementById("target");

target.addEventListener(
  "touchstart",
  (ev) => {
    // この touchstart イベントが対象要素で始まった場合、touch を
    // targetTouches リストの最初の項目に設定します。そうでない
    // 場合は、touch リストの最初の項目に touch を設定します。
    const touch =
      ev.targetTouches.length >= 1
        ? ev.targetTouches.item(0)
        : ev.touches.item(0);
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| Touch Events # dom-touchlist-item |

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

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


TouchList: length プロパティ - Web API

TouchList: length プロパティ
=======================

**`length`** は読み取り専用のプロパティで、指定された `TouchList` の項目（タッチポイント）の数を示します。

値
-

`touchList` のタッチポイントの数です。

例
-

このコード例では、`TouchList` インターフェイスの `item` メソッドと `length` プロパティの使い方を示しています。

```js
const target = document.getElementById("target");

target.addEventListener(
  "touchstart",
  (ev) => {
    // この touchstart イベントが対象要素で始まった場合、touch を
    // targetTouches リストの最初の項目に設定します。そうでない
    // 場合は、touch リストの最初の項目に touch を設定します。
    const touch =
      ev.targetTouches.length >= 1
        ? ev.targetTouches.item(0)
        : ev.touches.item(0);
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| Touch Events # dom-touchlist-length |

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

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


CustomEvent: initCustomEvent() メソッド - Web API

CustomEvent: initCustomEvent() メソッド
===================================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**`CustomEvent.initCustomEvent()`** メソッドは `CustomEvent` オブジェクトを初期化します。
 イベントが既に配信されている場合は、このメソッドは何もしません。

 この方法で初期化されたイベントは `Document.createEvent()` メソッドで作成されている必要があります。
 このメソッドは、 `EventTarget.dispatchEvent()` を使ってイベントが配信される前に、イベントを設定するために呼び出す必要があります。
 配信された後は、何もしません。

**メモ:** **このメソッドは非推奨なので、使用しないでください。**

 この機能を使用するのではなく、代わりに `CustomEvent()` のような特定のイベントのコンストラクターを使用してください。
 イベントの作成と起動のページに、これらの使用方法についての詳細が記載されています。

構文
--

```js
event.initCustomEvent(type, canBubble, cancelable, detail)
```

### 引数

`type`

文字列で、このイベントの名前が入ります。

`canBubble`

論理値で、このイベントが DOM を介してバブリングするかどうかを示します。

`cancelable`

論理値で、このイベントがキャンセル可能であるかどうかを示します。

`detail`

任意のデータで、ハンドラーが `CustomEvent.detail` プロパティを通じて利用することができます。

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-customevent-initcustomevent |

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

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

関連情報
----

* `CustomEvent`
* この非推奨のメソッドの代わりに使用するコンストラクター: `CustomEvent()`


CustomEvent: detail プロパティ - Web API

CustomEvent: detail プロパティ
=========================

**`detail`** は `CustomEvent` インターフェイスの読み取り専用プロパティで、イベントを初期化する際に渡された何らかのデータを返します。

値
-

イベントの初期化に使用したデータです。

例
-

```js
// カスタムイベントを作成
const catFound = new CustomEvent("animalfound", {
  detail: {
    name: "cat",
  },
});
const dogFound = new CustomEvent("animalfound", {
  detail: {
    name: "dog",
  },
});

// 適切なイベントリスナーを追加
obj.addEventListener("animalfound", (e) => console.log(e.detail.name));

// イベントの配信
obj.dispatchEvent(catFound);
obj.dispatchEvent(dogFound);

// "cat" および "dog" がコンソールの出力される
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-customevent-detail② |

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

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

関連情報
----

* `CustomEvent`


CustomEvent: CustomEvent() コンストラクター - Web API

CustomEvent: CustomEvent() コンストラクター
===================================

**`CustomEvent()`** コンストラクターは新しい `CustomEvent` を作成します。

構文
--

```js
new CustomEvent(type)
new CustomEvent(type, options)
```

### 引数

`type`

イベントの名前を表す文字列です。イベント名は大文字小文字を区別します。

`options` 省略可

オブジェクトで、 `Event()` で定義されるプロパティに加えて、以下のプロパティを指定することができます。

`detail` 省略可

 イベントと関連付けられたイベント依存の値。この値は、ハンドラーが `CustomEvent.detail` プロパティを用いて利用できるようになります。
 既定値は `null` です。

### 返値

新しい `CustomEvent` オブジェクトです。

例
-

```js
// カスタムイベントを作成
const catFound = new CustomEvent("animalfound", {
  detail: {
    name: "cat",
  },
});
const dogFound = new CustomEvent("animalfound", {
  detail: {
    name: "dog",
  },
});

// 適切なイベントリスナーを追加
obj.addEventListener("animalfound", (e) => console.log(e.detail.name));

// イベントの配信
obj.dispatchEvent(catFound);
obj.dispatchEvent(dogFound);

// "cat" および "dog" がコンソールの出力される
```

その他の例がイベントの作成と起動にあります。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-customevent-customevent |

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

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

関連情報
----

* `CustomEvent`
* イベントの作成と起動


ConstantSourceNode() - Web API

ConstantSourceNode()
====================

**`ConstantSourceNode()`** コンストラクターは、常に同じ値のサンプルを出力する音声ソースを表す、新しい `ConstantSourceNode` オブジェクトのインスタンスを作成します。

構文
--

```js
new ConstantSourceNode(context, options)
```

### 引数

`context`

ノードを関連付けたい音声コンテキストを表す `AudioContext` です。

`options`

`ConstantSourceOptions` 辞書オブジェクトで、 `ConstantSourceNode` に持たせたいプロパティを定義します。

`offset`

読み取り専用の `AudioParam` で、ソースが生成する定数値を指定します。既定では 1.0 です。通常は 1.0 ですが、 `Infinity` から `+Infinity` の範囲であればどのような値でも指定できます。

例
-

この例では、音声コンテキストが作成され、次に `offset` が 0.5 に初期化された `ConstantSourceNode` が作成されます。

```js
let audioContext = new AudioContext();

let myConstantSource = new ConstantSourceNode(audioContext, { offset: 0.5 });
```

>
> **Note:** このコンストラクターで作成された新しい `ConstantSourceNode` は `channelCount` が 2 になります。
>
>
>

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-constantsourcenode-constructor-constantsourcenode |

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

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


ConstantSourceNode.offset - Web API

ConstantSourceNode.offset
=========================

`offset` は `ConstantSourceNode` インターフェイスの読み取り専用プロパティで、 `AudioParam` オブジェクトを返し、数値で a-rate 値を示します。これはソースから次のサンプルを取り出す際に常に返されます。

**メモ:** `offset` という名前の `AudioParam` は読み取り専用ですが、その中の `value` プロパティは読み取り専用ではありません。そのため、 `offset` の値は `ConstantSourceNode.offset.value` の値を設定することで変更することができます。

```js
myConstantSourceNode.offset.value = newValue;
```

値
-

このノードがサンプルごとに返す a-rate 値を示す `AudioParam` オブジェクトです。既定値は 1.0 です。

`offset` の現在の値にアクセスするには、上の構文ボックスで示したように、 `value` プロパティにアクセスしてください。

例
-

この例では、 `ConstantSourceNode` を設定して、その `offset` を `GainNode` のペアの入力として使用する方法を示します。この例は ConstantSourceNode による複数の引数の制御 (en-US) にある、完全な例を元にして作成されています。

```js
gainNode2 = context.createGain();
gainNode3 = context.createGain();
gainNode2.gain.value = gainNode3.gain.value = 0.5;

volumeSliderControl.value = gainNode2.gain.value;

constantSource = context.createConstantSource();
constantSource.connect(gainNode2.gain);
constantSource.connect(gainNode3.gain);
```

まず、ゲインノードを作成して設定し、スライダーコントロールの値を 2 つのノードのゲインと一致するように設定します。次に、新しい `ConstantSourceNode` を作成し、それを 2 つのゲインノードの `GainNode.gain` 値のソースとします。それらの値はそれぞれ`AudioParam`でもあります。

例えば、 2 つのゲインノードの値を変更して応答する必要のあるイベントハンドラー（この場合は `click` イベント用）があるとします。上記のリンクがあるところで、この単純なイベントハンドラーを使用して、それを行うことができます。

```js
function handleClickEvent(event) {
  constantSource.offset.value = volumeSliderControl.value;
}
```

この関数がしなければならないことは、ペアノードのゲインを制御するために使用しているスライダーコントロールの現在の値を取得して、その値を `ConstantSourceNode` の `offset` に格納することのみです。これは、その `AudioParam.value` プロパティの中身を変更することで行われます。 2 つのゲインノードはすばやく新しいボリュームレベルを採用します。

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-constantsourcenode-offset |

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

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

関連情報
----

* ウェブオーディオ API の使用
* `ConstantSourceNode`
* `AudioNode`
* `AudioParam`


HTMLMeterElement: labels プロパティ - Web API

HTMLMeterElement: labels プロパティ
==============================

**`HTMLMeterElement.labels`** は読み取り専用プロパティで、この `<meter>` 要素に関連付けられている `<label>` 要素の `NodeList` を返します。

値
-

`<meter>` 要素に結びつけられている `<label>` 要素の入った `NodeList` です。

例
-

### HTML

```html
<label id="label1" for="test">Label 1</label>
<meter id="test" min="0" max="100" value="70">70</meter>
<label id="label2" for="test">Label 2</label>
```

### JavaScript

```js
window.addEventListener("DOMContentLoaded", () => {
  const meter = document.getElementById("test");
  for (const label of meter.labels) {
    console.log(label.textContent); // "Label 1" and "Label 2"
  }
});
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-lfe-labels-dev |

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

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


HTMLTemplateElement: content プロパティ - Web API

HTMLTemplateElement: content プロパティ
==================================

**`HTMLTemplateElement.content`** プロパティは、`<template>` 要素のテンプレートの内容 (`DocumentFragment`) を返します。

値
-

`DocumentFragment` です。

例
-

```js
const templateElement = document.querySelector("#foo");
const documentFragment = templateElement.content.cloneNode(true);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-template-content-dev |

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

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

関連情報
----

* `HTMLTemplateElement`


CacheStorage: has() メソッド - Web API

CacheStorage: has() メソッド
========================

**`has()`** は `CacheStorage` インターフェイスのメソッドで、`Cache` オブジェクトが `cacheName` と一致する場合に `true` に解決される `Promise` を返します。

`CacheStorage` には、グローバルな `caches` プロパティを介してアクセスできます。

構文
--

```js
has(cacheName)
```

### 引数

`cacheName`

文字列で、 `CacheStorage` で探している `Cache` オブジェクトの名前を表します。

### 返値

`Promise` で、キャッシュが存在する場合は `true`、存在しない場合は `false` に解決されます。

例
-

次の例では、最初に 'v1' というキャッシュが存在するかどうかを確認します。 その場合、アセットのリストを追加します。 そうでない場合、何らかのキャッシュセットアップ関数を実行します。

```js
caches
  .has("v1")
  .then((hasCache) => {
    if (!hasCache) {
      someCacheSetupFunction();
    } else {
      caches.open("v1").then((cache) => cache.addAll(myAssets));
    }
  })
  .catch(() => {
    // ここで例外を処理します。
  });
```

仕様書
---

| Specification |
| --- |
| Service Workers # cache-storage-has |

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

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

関連情報
----

* サービスワーカーの使用
* `Cache`
* `caches`


CacheStorage: keys() メソッド - Web API

CacheStorage: keys() メソッド
=========================

**`keys()`** は `CacheStorage` インターフェイスのメソッドで、`CacheStorage` オブジェクトによって追跡されるすべての名前付き `Cache` オブジェクトに対応する文字列をそれが作成された順番で含む配列で解決する `Promise` を返します。
 このメソッドを使用して、すべての `Cache` オブジェクトのリストを反復処理します。

`CacheStorage` には、グローバルな `caches` プロパティを介してアクセスできます。

構文
--

```js
keys()
```

### 引数

なし。

### 返値

`Promise` で、 `CacheStorage` オブジェクト内の `Cache` 名の配列で解決します。

例
-

このコードスニペットでは、`activate` イベントを待機してから、新しいサービスワーカーがアクティブ化される前に、古い未使用のキャッシュをクリアする `waitUntil()` ブロックを実行します。 ここに、保持したいキャッシュの名前を含む許可リスト（`cacheAllowlist`）があります。 `keys()` を使用して `CacheStorage` オブジェクトのキャッシュのキーを返し、各キーをチェックして許可リストにあるかどうかを確認します。 ない場合は、`CacheStorage.delete()` を使用して削除します。

```js
this.addEventListener("activate", (event) => {
  const cacheAllowlist = ["v2"];

  event.waitUntil(
    caches.keys().then((keyList) =>
      Promise.all(
        keyList.map((key) => {
          if (!cacheAllowlist.includes(key)) {
            return caches.delete(key);
          }
        }),
      ),
    ),
  );
});
```

仕様書
---

| Specification |
| --- |
| Service Workers # cache-storage-keys |

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

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

関連情報
----

* サービスワーカーの使用
* `Cache`
* `caches`


CacheStorage: match() メソッド - Web API

CacheStorage: match() メソッド
==========================

**`match()`** は `CacheStorage` インターフェイスのメソッドで、所与の `Request` または URL 文字列が保存された `Response` のキーであるかどうかをチェックします。 このメソッドは、`Response` の `Promise`、または一致するものが見つからない場合に `undefined` に解決される `Promise` を返します。

`CacheStorage` には、グローバルな `caches` プロパティを介してアクセスできます。

`Cache` オブジェクトは作成順に検索されます。

**メモ:** `caches.match()` は便利なメソッドです。
 各キャッシュに対して（`caches.keys()` によって返される順序で）、`Response` が返されるまで `cache.match()` を呼び出すのと同等の機能です。

構文
--

```js
match(request)
match(request, options)
```

### 引数

`request`

照合したい `Request`。 これは、`Request` オブジェクトまたは URL 文字列にすることができます。

`options` 省略可

`match` 操作での照合方法を制御するプロパティを持つオブジェクト。 利用可能なオプションは次のとおりです。

`ignoreSearch`

 論理値で、照合処理が URL のクエリー文字列を無視するかどうかを指定します。例えば、`true` に設定すると、 `http://foo.com/?value=bar` の `?value=bar` 部分は、照合するときに無視されます。
 既定値は `false` です。

`ignoreMethod`

論理値で、 `true` に設定すると、照合処理が `Request` の HTTP メソッドを検証しないようにします（通常は `GET` と `HEAD` のみが許可されます）。 既定値は `false` です。

`ignoreVary`

論理値で、 `true` に設定すると、 `VARY` ヘッダーの照合をしないように照合処理に支持します。 つまり、URL が一致する場合、`Response` オブジェクトに `VARY` ヘッダーがあるかどうかに関係なく一致します。 既定値は `false` です。

`cacheName`

文字列で、検索する特定のキャッシュを表します。

### 返値

`Promise` で、一致する `Response` に解決されます。 指定されたリクエストに対する一致するレスポンスが見つからない場合、このプロミスは `undefined` に解決されます。

例
-

 このコードスニペットは、MDN の単純なサービスワーカーの例からのものです（単純なサービスワーカーがライブで実行するのを見る）。
 ここで、 `FetchEvent` が発行されるのを待ちます。そして次のように独自のレスポンスを構築します。

1. `CacheStorage` で `CacheStorage.match()` を使用して、リクエストに一致するものがあるかどうかを確認します。もしあれば、それを提供します。
2. ない場合は、 `v1` キャッシュを `open()` で開き、 `Cache.put()` を使用して既定のネットワークリクエストをキャッシュに入れ、 `return response.clone()` を使用して既定値のネットワークリクエストのクローンを返します。 `put()` がレスポンスの本体を消費するため、最後に必要です。
3. 失敗した場合（例えば、ネットワークがダウンしているため）、フォールバックレスポンスを返します。

```js
self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      // caches.match() は常に解決します
      // ただし、成功の場合はレスポンスに値があります
      if (response !== undefined) {
        return response;
      } else {
        return fetch(event.request)
          .then((response) => {
            // レスポンスは 1 回のみ使用できます
            // クローンを保存して、 1 番目のコピーをキャッシュに入れ、
            // 2 番目のコピーを提供する必要があります
            let responseClone = response.clone();

            caches.open("v1").then((cache) => {
              cache.put(event.request, responseClone);
            });
            return response;
          })
          .catch(() => caches.match("/gallery/myLittleVader.jpg"));
      }
    }),
  );
});
```

仕様書
---

| Specification |
| --- |
| Service Workers # cache-storage-match |

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

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

関連情報
----

* サービスワーカーの使用
* `Cache`
* `caches`


CacheStorage: open() メソッド - Web API

CacheStorage: open() メソッド
=========================

**`open()`** は `CacheStorage` インターフェイスのメソッドで、 `cacheName` に一致する `Cache` オブジェクトに解決される `Promise` を返します。

`CacheStorage` には、グローバルな `caches` プロパティを介してアクセスできます。

**メモ:** 指定した `Cache` が存在しない場合、その `cacheName` で新しいキャッシュを作成し、この新しい `Cache` オブジェクトに解決される `Promise` を返します。

構文
--

```js
open(cacheName)
```

### 引数

`cacheName`

開きたいキャッシュの名前。

### 返値

要求した `Cache` オブジェクトに解決される `Promise`。

例
-

 このコードスニペットは、MDN の単純なサービスワーカーの例からのものです（単純なサービスワーカーがライブで実行するのを見る）。
 ここでは、 `InstallEvent` が発生するのを待ち 、`waitUntil()` を実行してアプリのインストールプロセスを処理します。 これは、 `CacheStorage.open()` を呼び出して新しいキャッシュを作成し、`Cache.addAll()` を使用して一連のアセットを追加することで構成されます。

```js
self.addEventListener("install", (event) => {
  event.waitUntil(
    caches
      .open("v1")
      .then((cache) =>
        cache.addAll([
          "/",
          "/index.html",
          "/style.css",
          "/app.js",
          "/image-list.js",
          "/star-wars-logo.jpg",
          "/gallery/bountyHunters.jpg",
          "/gallery/myLittleVader.jpg",
          "/gallery/snowTroopers.jpg",
        ]),
      ),
  );
});
```

仕様書
---

| Specification |
| --- |
| Service Workers # cache-storage-open |

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

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

関連情報
----

* サービスワーカーの使用
* `Cache`
* `caches`


CacheStorage: delete() メソッド - Web API

CacheStorage: delete() メソッド
===========================

**`delete()`** は `CacheStorage` インターフェイスのメソッドで、`cacheName` に一致する `Cache` オブジェクトを見つけ、見つかった場合は `Cache` オブジェクトを削除し、 `true` に解決される `Promise` を返します。
 `Cache` オブジェクトが見つからない場合は、`false` に解決されます。

`CacheStorage` には、グローバルな `caches` プロパティを介してアクセスできます。

構文
--

```js
delete(cacheName)
```

### 引数

`cacheName`

削除するキャッシュの名前。

### 返値

`Promise` で、 `Cache` オブジェクトが見つかって削除された場合は `true`、そうでない場合は `false` に解決されます。

例
-

このコードスニペットでは、`activate` イベントを待機してから、新しいサービスワーカーがアクティブになる前に、古い未使用のキャッシュをクリアする `waitUntil()` ブロックを実行します。 ここに、保持したいキャッシュ名の配列 (`cachesToKeep`) があります。 `CacheStorage` オブジェクトのキャッシュのキーを `CacheStorage.keys` を使用して返し、各キーをチェックしてその配列内にあるかどうかを確認します。 ない場合は、 `delete()` を使用して削除します。

```js
this.addEventListener("activate", (event) => {
  const cachesToKeep = ["v2"];

  event.waitUntil(
    caches.keys().then((keyList) =>
      Promise.all(
        keyList.map((key) => {
          if (!cachesToKeep.includes(key)) {
            return caches.delete(key);
          }
        }),
      ),
    ),
  );
});
```

仕様書
---

| Specification |
| --- |
| Service Workers # cache-storage-delete |

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

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

関連情報
----

* サービスワーカーの使用
* `Cache`
* `caches`


CSSNamespaceRule.namespaceURI - Web API

CSSNamespaceRule.namespaceURI
=============================

**`namespaceURI`** は `CSSNamespaceRule` の読み取り専用プロパティで、この名前空間の URI のテキストを文字列で返します。

値
-

文字列で、 URI を持ちます。

例
-

このスタイルシートは、唯一のルールとして名前空間を含んでいます。したがって、最初に返される `CSSRule` は `CSSNamespaceRule` となります。 `namespaceURI` プロパティの値は `http://www.w3.org/1999/xhtml` となります。

```css
@namespace url(http://www.w3.org/1999/xhtml);
```

```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].namespaceURI); //http://www.w3.org/1999/xhtml
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssnamespacerule-namespaceuri |

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

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


CSSNamespaceRule.prefix - Web API

CSSNamespaceRule.prefix
=======================

**`prefix`** は `CSSNamespaceRule` の読み取り専用プロパティで、この名前空間に関連付けられた名前を文字列で返します。そのような接頭辞がない場合は、空文字列を返します。

値
-

この名前空間に関連付けられている接頭辞が入った文字列。接頭辞がない場合は空文字列となります。

例
-

このスタイルシートには、名前空間ルールが 2 つ含まれています。最初のものは接頭辞がなく、 2 つ目は接頭辞 `svg` があります。 2 つの `CSSNamespaceRule` オブジェクトが返されます。最初の `prefix` プロパティの値は空文字列になり、 2 つ目は `svg` になります。

```css
@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);
```

```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].namespaceURI); // 空文字列 ""
console.log(myRules[1].namespaceURI); // "svg"
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssnamespacerule-prefix |

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

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


HTMLDetailsElement: toggle イベント - Web API

HTMLDetailsElement: toggle イベント
===============================

**`toggle`** イベントは、 `<details>` 要素の `open`/`closed` の状態がトグル切り替えされたときに発生します。

このイベントはキャンセル不可で、バブリングしません。

**メモ:** `toggle` イベントは `HTMLElement` においても別な形で利用できます。こちらは、ポップオーバー要素が表示または非表示にされた直後に発行されます。詳しくは、`HTMLElement` の `toggle` イベントのページをご覧ください。

構文
--

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

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

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

イベント型
-----

一般的な `Event` です。

例
-

この例は開かれた節をログ出力します。節が閉じられるとログから削除されます。

### HTML

```html
<aside id="log">
  <p>Open chapters:</p>
  <div data-id="ch1" hidden>I</div>
  <div data-id="ch2" hidden>II</div>
  <div data-id="ch3" hidden>III</div>
</aside>
<section id="summaries">
  <p>Chapter summaries:</p>
  <details id="ch1">
    <summary>Chapter I</summary>
    Philosophy reproves Boethius for the foolishness of his complaints against
    Fortune. Her very nature is caprice.
  </details>
  <details id="ch2">
    <summary>Chapter II</summary>
    Philosophy in Fortune's name replies to Boethius' reproaches, and proves
    that the gifts of Fortune are hers to give and to take away.
  </details>
  <details id="ch3">
    <summary>Chapter III</summary>
    Boethius falls back upon his present sense of misery. Philosophy reminds him
    of the brilliancy of his former fortunes.
  </details>
</section>
```

### CSS

```css
body {
  display: flex;
  flex-direction: row-reverse;
}

#log {
  flex-shrink: 0;
  padding-left: 3em;
}

#summaries {
  flex-grow: 1;
}
```

### JavaScript

```js
function logItem(e) {
  const item = document.querySelector(`[data-id=${e.target.id}]`);
  item.toggleAttribute("hidden");
}

const chapters = document.querySelectorAll("details");
chapters.forEach((chapter) => {
  chapter.addEventListener("toggle", logItem);
});
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # event-toggle |

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

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


HTMLDetailsElement: open プロパティ - Web API

HTMLDetailsElement: open プロパティ
==============================

**`open`** は `HTMLDetailsElement` インターフェイスのプロパティで、HTML の `open` 属性を反映するもので、`<details>` の中身（`<summary>` を除く）がユーザーに表示されているかを示す論理値です。

値
-

論理値です。

この論理値は HTML の `open` 属性の状態を表します。`true` の値は、概要と追加情報の両方がユーザーに示されている状態で設定されていることを意味します。`false` の値は設定されていないことを意味し、概要のみが表示されます。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-details-open |

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

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

関連情報
----

* `<details>` および `<summary>` 要素


Bluetooth: getDevices() メソッド - Web API

Bluetooth: getDevices() メソッド
============================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

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

Web Bluetooth API の `Bluetooth` インターフェイスの **`getDevices()`** メソッドは、オリジンがアクセスを許可されている Bluetooth デバイスを公開します。このメソッドは許可を要求するプロンプトを表示しません。

**メモ:** このメソッドは、圏外だったり電源が切られていたりするものを含め、オリジンが現在アクセスを許可されている各デバイスに対応する `BluetoothDevice` を返します。

構文
--

```js
getDevices()
```

### 引数

なし

### 返値

`BluetoothDevice` の配列で解決する `Promise` を返します。

例外
--

このメソッドは例外を投げません。

仕様書
---

| Specification |
| --- |
| Web Bluetooth # dom-bluetooth-getdevices |

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

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


Bluetooth: requestDevice() メソッド - Web API

Bluetooth: requestDevice() メソッド
===============================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

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

`Bluetooth` インターフェイスの **`Bluetooth.requestDevice()`** メソッドは、指定のオプションに合致する `BluetoothDevice` オブジェクトで解決する `Promise` を返します。選択用の UI が無い場合は、このメソッドは基準に合致する最初のデバイスを返します。

構文
--

```js
requestDevice()
requestDevice(options)
```

### 引数

`options` 省略可

デバイスの要求に関するオプションを設定するオブジェクトです。以下のオプションが利用可能です。

* `filters[]`
    + `BluetoothScanFilters` の配列です。このフィルタは、`BluetoothServiceUUID` の配列、`name` パラメーター、`namePrefix` パラメーターからなります。
* `optionalServices[]`
    + : `BluetoothServiceUUID` の配列です。
* `acceptAllDevices`
    + : 要求を出しているスクリプトがすべての Bluetooth デバイスを受け入れるかを表す `boolean` 値です。デフォルトは `false` です。

### 返値

`BluetoothDevice` オブジェクトで解決する `Promise` を返します。

### 例外

`TypeError`

 指定された `options` が意味をなさないとき投げられます。
 たとえば、`options.filters` が存在して、かつ `options.acceptAllDevices` が `true` に設定されている場合や、`options.filters` が存在せず、かつ `options.acceptAllDevices` が `false` に設定されている場合に投げられます。
 `options.filters` が `[]` に設定されている場合も投げられます。

`NotFoundError` `DOMException`

指定のオプションに合致する Bluetooth デバイスが存在しないとき投げられます。

`SecurityError` `DOMException`

安全でないオリジンで呼び出されたときなど、現在のコンテキストでセキュリティの懸念によりこの操作が許可されないとき投げられます。

例
-

```js
// 以下のアドバタイズをしているデバイスにマッチする検索オプションを使用します。
// ・標準の心拍数サービス
// ・16 ビットのサービス ID が 0x1802 と 0x1803
// ・プロプライエタリーの 128 ビット UUID c48e6067-5295-48d3-8d5c-0395f61792b1 を持つサービス
// ・名前 "ExampleName" を持つデバイス
// ・名前が "Prefix" で始まるデバイス
//
// そして、デバイスが該当のサービスをアドバタイズしていない場合でも、
// デバイスに存在すれば、バッテリーサービスへのアクセスを有効化します。
let options = {
  filters: [
    { services: ["heart\_rate"] },
    { services: [0x1802, 0x1803] },
    { services: ["c48e6067-5295-48d3-8d5c-0395f61792b1"] },
    { name: "ExampleName" },
    { namePrefix: "Prefix" },
  ],
  optionalServices: ["battery\_service"],
};

navigator.bluetooth
  .requestDevice(options)
  .then((device) => {
    console.log(`名前: ${device.name}`);
    // デバイスに何かをする
  })
  .catch((error) => console.error(`何かがうまくいきませんでした。 ${error}`));
```

詳細な例が仕様書にあります。

仕様書
---

| Specification |
| --- |
| Web Bluetooth # dom-bluetooth-requestdevice |

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

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


Bluetooth: getAvailability() メソッド - Web API

Bluetooth: getAvailability() メソッド
=================================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

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

`Bluetooth` インターフェイスの **`getAvailability()`** メソッドは、デバイスに Bluetooth アダプターがある場合は `true` を返し、そうでない場合は `false` を返します。(ユーザーがブラウザーを本当の値を公開しないよう設定した場合は除きます)

**メモ:** `getAvailability()` が `true` を返す場合でも、ユーザーが Web Bluetooth API の使用を許可しないかもしれません。
 (`navigator.bluetooth.requestDevice()` が `BluetoothDevice` で解決しないかもしれません)
 また、ユーザーはブラウザーを本当の値ではなく固定の値を返すよう設定する可能性があります。

構文
--

```js
getAvailability()
```

### 引数

なし

### 返値

`Boolean` で解決する `Promise` を返します。

例外
--

このメソッドは例外を投げません。

例
-

この断片は、Bluetooth に対応しているかを表すメッセージをコンソールに出力します。

```js
navigator.bluetooth.getAvailability().then((available) => {
  if (available) {
    console.log("このデバイスは Bluetooth に対応しています！");
  } else {
    console.log("残念！Bluetooth に対応していません");
  }
});
```

仕様書
---

| Specification |
| --- |
| Web Bluetooth # dom-bluetooth-getavailability |

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

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


VideoTrackList: addtrack イベント - Web API

VideoTrackList: addtrack イベント
=============================

`addtrack` イベントは、トラックが `VideoTrackList` に追加されたときに発生します。

構文
--

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

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

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

イベント型
-----

`TrackEvent` です。 `Event` から継承しています。

Event

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

*下記に挙げたプロパティに加えて、親インターフェイスである `Event` のプロパティも利用できます。*

`track` 読取専用

イベントが参照している新しく追加された `VideoTrack`。

例
-

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

```js
const videoElement = document.querySelector("video");

videoElement.videoTracks.addEventListener("addtrack", (event) => {
  console.log(`Video track: ${event.track.label} added`);
});
```

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

```js
const videoElement = document.querySelector("video");

videoElement.videoTracks.onaddtrack = (event) => {
  console.log(`Video track: ${event.track.label} added`);
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-media-addtrack |
| HTML Standard # handler-tracklist-onaddtrack |

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

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

関連情報
----

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


VideoTrackList.selectedIndex - Web API

VideoTrackList.selectedIndex
============================

読み取り専用の **`VideoTrackList`** の **`selectedIndex`** プロパティは、現在選択されているトラックがある場合はその位置を返し、それ以外の場合は `-1` を返します。

値
-

現在選択されているトラックがある場合はその位置を示す数値、それ以外の場合は `-1`。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-videotracklist-selectedindex-dev |

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

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


VideoTrackList.getTrackById() - Web API

VideoTrackList.getTrackById()
=============================

**`VideoTrackList`** の **`getTrackById()`** メソッドは、指定された文字列と `id` が一致するトラックリストから最初の `VideoTrack` オブジェクトを返します。

ID 文字列がわかっていれば、これで特定のトラックを見つけることができます。

構文
--

```js
getTrackById(id)
```

### 引数

`id`

文字列で、トラックリスト内で検索するトラックの ID を指定します。

### 戻り値

指定された文字列に一致する `id` を持つ `VideoTrackList` 内で見つかった最初のトラックを示す `VideoTrack` オブジェクト。 一致するものが見つからない場合、このメソッドは `null` を返します。

トラックは自然な順序で検索されます。 つまり、メディアリソース自体によって定義された順序で、またはリソースが順序を定義していない場合は、メディアリソースによってトラックが宣言される相対的な順序です。

仕様
--

| Specification |
| --- |
| HTML Standard # dom-videotracklist-gettrackbyid-dev |

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

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


VideoTrackList: removetrack イベント - Web API

VideoTrackList: removetrack イベント
================================

`removetrack` イベントは、トラックが `VideoTrackList` から取り除かれたときに発生します。

構文
--

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

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

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

イベント型
-----

`TrackEvent` です。 `Event` から継承しています。

Event

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

*下記に挙げたプロパティに加えて、親インターフェイスである `Event` のプロパティも利用できます。*

`track` 読取専用

イベントが参照している新しく追加された `VideoTrack`。

例
-

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

```js
const videoElement = document.querySelector("video");

videoElement.videoTracks.addEventListener("removetrack", (event) => {
  console.log(`Video track: ${event.track.label} removed`);
});
```

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

```js
const videoElement = document.querySelector("video");

videoElement.videoTracks.onremovetrack = (event) => {
  console.log(`Video track: ${event.track.label} removed`);
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-media-removetrack |
| HTML Standard # handler-tracklist-onremovetrack |

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

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

関連情報
----

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


VideoTrackList.length - Web API

VideoTrackList.length
=====================

読み取り専用の **`VideoTrackList`** の **`length`** プロパティは、`VideoTrackList` 内の項目数を返します。 各項目は、メディア要素内の 1 つの映像トラックを表す `VideoTrack` です。

値 0 は、メディアに映像トラックがないことを示します。

値
-

`VideoTrackList` に含まれる映像トラック数を示す数値。 `VideoTrackList` を `VideoTrack` 型のオブジェクトの配列として扱うことで、各トラックにアクセスできます。

例
-

このスニペットは、 DOM 内で見つかった最初の `<video>` 要素内の映像トラックの数を `querySelector()` によって取得します。

```js
const videoElem = document.querySelector("video");
let numVideoTracks = 0;

if (videoElem.videoTracks) {
  numVideoTracks = videoElem.videoTracks.length;
}
```

この例は、`VideoTrack` に対応していないブラウザーで落ちるのを避けるために、`HTMLMediaElement.videoTracks` が定義されていることを確認していることに注意してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-videotracklist-length-dev |

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

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


VideoTrackList: change イベント - Web API

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() メソッド - Web API

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: getUserMedia() メソッド - Web API

MediaDevices: getUserMedia() メソッド
=================================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

`MediaDevices`**`.getUserMedia()`** メソッドは、要求された種類のメディアを含むトラックを持つ `MediaStream` を生成するメディア入力を使用する許可をユーザーに求めます。

このストリームには、例えば、動画トラック（カメラ、ビデオ録画機器、画面共有サービスなどのような、ハードウェアまたは仮想ビデオソースによって生み出されるもの）、音声トラック（同様に、マイク、A/D 変換器などの物理的または仮想オーディオソースによって生み出されるもの）、その他の可能な種別を含めることができます。

これは `MediaStream` オブジェクトに解決する `Promise` を返します。ユーザーが拒否した場合や、一致するメディアが利用できない場合、プロミスはそれぞれ `NotAllowedError` または `NotFoundError` の `DOMException` で拒否されます。

**メモ:** ユーザーが選択する必要が全くなく、リクエストを単純に無視できる場合、返却された Promise が解決または拒否の*どちらにもならない*可能性があります。

一般的に、 `MediaDevices` のシングルトンオブジェクトは以下のように、 `navigator.mediaDevices` を使用してアクセスします。

```js
async function getMedia(constraints) {
  let stream = null;

  try {
    stream = await navigator.mediaDevices.getUserMedia(constraints);
    /\* ストリームを使用 \*/
  } catch (err) {
    /\* エラーを処理 \*/
  }
}
```

同様に、生のプロミスを直接使用すると、コードは次のようになります。

```js
navigator.mediaDevices
  .getUserMedia(constraints)
  .then((stream) => {
    /\* ストリームを使用 \*/
  })
  .catch((err) => {
    /\* エラーを処理 \*/
  });
```

**メモ:** 現在の文書が安全に読み込まれなかった場合は、 `navigator.mediaDevices` は `undefined` になり、 `getUserMedia()` を使用することはできません。セキュリティの節に、この件やその他の `getUserMedia()` の使用に関するセキュリティ問題の詳細があります。

構文
--

```js
getUserMedia(constraints)
```

### 引数

`constraints`

オブジェクトで、それぞれの種類のために何らかの要件に沿って要求するメディアの種類を指定します。

`constraints` 引数は 2 つのメンバー `video` および `audio` を持ち、要求されたメディアの種類を記述します。どちらか、または両方を指定する必要があります。ブラウザーが指定された条件に合う指定された種類を持つすべてのメディアトラックを発見できない場合、返却されたプロミスは `NotFoundError` の `DOMException` で拒否されます。

次の例は特定の要件なしに音声と動画の両方を要求します。

```js
getUserMedia({
  audio: true,
  video: true,
});
```

メディアの種類に `true` が指定された場合、結果のストリームはそのタイプのトラックが中にある*必要*があります。何らかの理由で含めることができない場合、 `getUserMedia()` の呼び出しはエラーが返ります。

ユーザーのカメラやマイクについての情報は、プライバシー上の理由からアクセスできませんが、アプリケーションは追加の制約を使用することで、カメラやマイクの能力を必要に応じて要求することができます。次の例は、 1280x720 のカメラ解像度の設定を表しています。

```js
getUserMedia({
  audio: true,
  video: { width: 1280, height: 720 },
});
```

ブラウザーはこれに忠実であろうとしますが、正確に一致するものが使用できない場合や、ユーザーがこれをオーバーライドした場合は、異なる解像度を返すことがあります。

機能を*必要*とするには、 `min`, `max`, `exact`（つまり `min === max`）の各キーワードが使用してください。次の例は 1280x720 の最小解像度を要求します。

```js
getUserMedia({
  audio: true,
  video: {
    width: { min: 1280 },
    height: { min: 720 },
  },
});
```

この解像度以上のカメラがない場合、返却されたプロミスは `OverconstrainedError` として拒否され、ユーザーには通知されません。

動作に違いが発生する理由は、 `min`, `max`, `exact` の各キーワードが本質的に必須であるためです。それに対して `ideal` と呼ばれるプレーンな値とキーワードはそうではありません。より充実したサンプルを示します。

```js
getUserMedia({
  audio: true,
  video: {
    width: { min: 1024, ideal: 1280, max: 1920 },
    height: { min: 576, ideal: 720, max: 1080 },
  },
});
```

`ideal` の値は、使用された場合は重みをもち、つまりブラウザーは ideal の値からみた最適距離が最小になるような設定 (および、複数ある場合はカメラ) を見つけようとすることを意味します。

プレインの値は本質的に ideal ですので、これは上記の解像度の例を以下のように書くこともできることを意味します。

```js
getUserMedia({
  audio: true,
  video: {
    width: { ideal: 1280 },
    height: { ideal: 720 },
  },
});
```

すべての定数が数字とは限りません。例えば、次の例は（利用できるなら）リアカメラよりもフロントカメラをを選好します。

```js
getUserMedia({
  audio: true,
  video: { facingMode: "user" },
});
```

リアカメラが*必要*であれば、次のようにします。

```js
getUserMedia({
  audio: true,
  video: {
    facingMode: { exact: "environment" },
  },
});
```

他の数値以外の制約として、 `deviceId` の制約があります。 `deviceId` が `mediaDevices.enumerateDevices()` から分かっているのであれば、これを使用して特定の機器を要求することができます。

```js
getUserMedia({
  video: {
    deviceId: myPreferredCameraDeviceId,
  },
});
```

上記のものは要求されたカメラを返しますが、特定したカメラが利用できない場合は別なカメラを返します。また、特定のカメラが*必要*なのであれば、以下のようにすることができます。

```js
getUserMedia({
  video: {
    deviceId: {
      exact: myExactCameraOrBustDeviceId,
    },
  },
});
```

### 返値

要求されたメディアが正しく取得できたときに `MediaStream` を受け取るハンドラーを示す `Promise` を返します。

### 例外

`AbortError` `DOMException`

ユーザーとオペレーティングシステムの両方がハードウェア機器へのアクセスを許可し、`NotReadableError` `DOMException` を引き起こすようなハードウェアの問題は発生していませんが、機器を使用できない何らかの問題が発生した場合に発生します。

`NotAllowedError` `DOMException`

要求されたソース機器の 1 つ以上が現時点で使用できない場合に発生します。これは、閲覧コンテキストが安全でない場合（つまり、ページが HTTPS ではなく HTTP を使って読み込まれた場合）に発生します。また、ユーザーが現在の閲覧インスタンスに機器へのアクセスを許可しないように指定している場合、ユーザーが現在のセッションへのアクセスを拒否している場合、またはユーザーがユーザーメディア機器へのすべてのアクセスをグローバルに拒否している場合にも発生します。権限ポリシーによるメディア権限の管理に対応しているブラウザーでは、権限ポリシーが入力ソースへのアクセスを許可するように設定されていない場合、このエラーが返されます。

**メモ:** 古いバージョンの仕様では、この代わりに `SecurityError` を使っていました。 `SecurityError` は新しい意味を持つようになりました。

`NotFoundError` `DOMException`

constraint で指定された機能を満たすメディアトラックの種類が見つからない場合に発生します。

`NotReadableError` `DOMException`

ユーザーが一致する機器の使用を許可したにもかかわらず、オペレーティングシステム、ブラウザー、またウェブページレベルでハードウェアエラーが発生し、機器にアクセスできない場合に発生します。

`OverconstrainedError` `DOMException`

指定された制約の結果、要求された条件を満たす機器の候補がない場合に発生します。このエラーは `OverconstrainedError` 型のオブジェクトで、満たすことが不可能だった制約の名前を文字列値として持つ `constraint` プロパティと、問題を説明する人間が読める文字列を含む `message` プロパティを持っています。

**メモ:** このエラーは、ユーザーが下位機器の使用許可をまだ与えていない場合でも発生するため、フィンガープリントの表面として使用される可能性があります。

`SecurityError` `DOMException`

`getUserMedia()`が呼び出された `Document` において、ユーザーメディアの対応が無効な場合に発生します。ユーザーメディアの対応が有効になったり無効になったりする仕組みは、個々のユーザーエージェントに任されています。

`TypeError`

指定された制約のリストが空であるか、すべての制約が `false` に設定されている場合に発生します。これは、安全でないコンテキストで `getUserMedia()` を呼び出そうとした場合にも発生します。これは、`navigator.mediaDevices` は安全でないコンテキストでは `undefined` であるからです。

プライバシーとセキュリティ
-------------

プライバシーに関わる重要な API として、 `getUserMedia()` の仕様は、ブラウザーが満たすべきプライバシーとセキュリティに関する広範な要件を規定しています。

`getUserMedia()` は強力な機能ですが、安全なコンテキストでのみ使用できます。安全でないコンテキストでは `navigator.mediaDevices` は `undefined` で、 `getUserMedia()` にアクセスすることができなくなります。安全なコンテキストとは、簡単に言うと、 HTTPS や `file:///` URL スキームを使って読み込まれたページ、あるいは `localhost` から読み込まれたページのことです。

さらに、ユーザーの音声と動画の入力にアクセスするためには、常にユーザーの許可が必要です。有効なオリジンにおけるウィンドウの最上位の文書コンテキストのみが、 `getUserMedia()` を用いて権限をリクエストすることができます。ただし、最上位のコンテキストが該当する `<iframe>` に権限ポリシーを用いてその権限を明示的に許可した場合は例外です。そうでなければ、ユーザーは入力機器を使用する許可を求められることすらありません。

これらの要件や規則、コードが実行されているコンテキストにそれらがどのように反映されるか、そしてブラウザーがユーザーのプライバシーとセキュリティ問題をどのように管理するかについての詳細は、続きをお読みください。

### ユーザーのプライバシー

プライバシーに関わる API として、`getUserMedia()` はユーザーへの通知と許可管理に関するとても具体的な要件に仕様で拘束されています。まず、`getUserMedia()`は、ウェブカメラやマイクのような入力を集めるメディアを開く前に、常にユーザーの許可を得なければなりません。ブラウザーはドメインごとに一度だけ許可機能を提供するかもしれませんが、少なくとも最初の一回は許可を求めなければなりませんし、ユーザが継続的な権限を選択する場合は、具体的に許可しなければなりません。

同様に重要なのは、通知に関する規則です。ブラウザーは、カメラやマイクが使用されていることを示すインジケーターを、ハードウェアのインジケーター以上に表示することが義務付けられています。また、入力用機器の使用が許可されていることを示すインジケーターを、たとえその機器が現在アクティブに記録していない場合でも表示しなければなりません。

例えば Firefox では、 URL バーに点滅する赤いアイコンが表示され、録画が進行中であることを示しています。権限が設定されているが、現在録画が行われていない場合は、アイコンがグレーになります。機器の物理的なライトは、現在録画がアクティブになっているかどうかを示すために使用されます。カメラをミュートしている場合（いわゆる「フェイスミュート」）、カメラのアクティビティライトが消灯し、ミュート終了後にカメラの使用を再開する許可を破棄せずに、カメラがアクティブに録画していないことを示します。

### セキュリティ

ユーザーエージェントのセキュリティ管理と制御が原因で、 `getUserMedia()` がセキュリティ関連のエラーを返す可能性はいくつかあります。

#### 権限ポリシー

権限ポリシー ディレクティブのうち `getUserMedia()` に適用される権限は `camera` と `microphone` の 2 つです。

例えば、この HTTP ヘッダーにより、文書と同じオリジンから読み込まれる埋め込み `<iframe>` 要素がカメラを使用できるようになります。

```http
Permissions-Policy: camera=(self)
```

これは、現在のオリジンと特定のオリジン `https://developer.mozilla.org` のマイクへのアクセスを要求します。

```http
Permissions-Policy: microphone=(self "https://developer.mozilla.org")
```

もし `getUserMedia()` を `<iframe>` 内で使っているなら、そのフレームだけの許可を求めることができ、これはより一般的な許可を求めるよりも明らかに安全です。ここでは、カメラとマイクの両方を使用する機能が必要であることを示しています。

```html
<iframe src="https://mycode.example.net/etc" allow="camera; microphone">
</iframe>
```

#### 暗号化ベースのセキュリティ

`getUserMedia()` メソッドは安全なコンテキストにおいてのみ利用可能です。安全なコンテキストとは、ブラウザーが HTTPS/TLS を使って安全に読み込まれた文書を含んでいると合理的に確信できるもので、安全でないコンテキストにさらされることは限定されています。文書が安全なコンテキストで読み込まれなかった場合、 `navigator.mediaDevices` プロパティは `undefined` となり、 `getUserMedia()` へのアクセスが不可能になります。

この状態で `getUserMedia()` にアクセスしようとすると `TypeError` が発生します。

#### 文書ソースセキュリティ

`getUserMedia()` は、予期せず使用された場合やセキュリティが慎重に管理されていない場合には、明らかにセキュリティ上の問題があるため、安全なコンテキストでのみ使用することができます。次に `getUserMedia()` を呼び出そうとするような、安全でない方法で文書を読み込む方法はいくつもあります。以下は `getUserMedia()` を呼び出すことが許されない状況の例です。

* サンドボックス化された `<iframe>` 要素に読み込まれた文書は、 `<iframe>` の `sandbox` 属性が `allow-same-origin` に設定されていなければ `getUserMedia()` を呼び出すことができません。
* オリジンを持たない `data://` や `blob://` の URL を使って読み込まれた文書（例えば、これらの URL のいずれかがユーザーによってアドレスバー入力された場合）は、 `getUserMedia()` を呼び出すことができません。 JavaScript のコードから読み込まれたこれらの種類の URL は、スクリプトの権限を継承します。
* その他、 `srcdoc` 属性でフレームの内容を指定している場合など、オリジンが存在しない場合。
例
-

### 幅と高さ

この例ではカメラの解像度の設定を与えて、結果の `MediaStream` オブジェクトを video 要素に割り当てます。

```js
// カメラに 1280x720 に最も近い解像度を希望する
const constraints = {
  audio: true,
  video: { width: 1280, height: 720 },
};

navigator.mediaDevices
  .getUserMedia(constraints)
  .then((mediaStream) => {
    const video = document.querySelector("video");
    video.srcObject = mediaStream;
    video.onloadedmetadata = () => {
      video.play();
    };
  })
  .catch((err) => {
    // 最後に常にエラーをチェックする
    console.error(`${err.name}: ${err.message}`);
  });
```

### フレームレート

帯域幅に制限のある WebRTC 通信のようなケースでは、低フレームレートが望ましいかもしれません。

```js
const constraints = {
  video: { frameRate: { ideal: 10, max: 15 } },
};
```

### フロントカメラとバックカメラ

携帯電話での例です。

```js
let front = false;
document.getElementById("flip-button").onclick = () => {
  front = !front;
};

const constraints = {
  video: { facingMode: front ? "user" : "environment" },
};
```

仕様書
---

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

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

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

関連情報
----

* より古い `navigator.getUserMedia()` API
* `mediaDevices.enumerateDevices()`:利用可能なメディア機器を列挙
* WebRTC API
* メディアキャプチャとストリーム API （メディアストリーム）
* 画面キャプチャ API: 画面の内容を `MediaStream` としてキャプチャ
* `mediaDevices.getDisplayMedia()`: 画面の内容を含むストリームの取得
* ウェブカメラでの写真撮影: 動画ではなく静止画を撮るために `getUserMedia()` を使用するチュートリアル


MediaDevices: devicechange イベント - Web API

MediaDevices: devicechange イベント
===============================

`devicechange` はイベントで、カメラ、マイク、スピーカーなどのメディア機器がシステムに接続・切断されるたびに `MediaDevices` へ送られます。

このイベントはキャンセル不可で、バブリングしません。

構文
--

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

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

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

イベント型
-----

一般的な `Event` です。

例
-

この例では、 `updateDeviceList()` という関数を作成します。この関数は `MediaDevices.getUserMedia()` がストリームの取得に成功したときに一度呼び出され、その後で機器一覧が変更されるたびに呼び出されます。ブラウザーのウィンドウに、オーディオ機器と映像機器の 2 つの一覧が表示され、機器のラベル（名前）と入力機器か出力機器かが表示されます。この例では `devicechange` イベントに対するハンドラーを提供しているので、メディア機器がサンプルを実行している機器に接続されたり取り外されたりするたびに、一覧が更新されます。
```

<p>Click the start button below to begin the demonstration.</p>
<div id="startButton" class="button">Start</div>
<video id="video" width="160" height="120" autoplay></video><br />

<div class="left">
  <h2>Audio devices:</h2>
  <ul class="deviceList" id="audioList"></ul>
</div>
<div class="right">
  <h2>Video devices:</h2>
  <ul class="deviceList" id="videoList"></ul>
</div>

<output></output>
```

```
body {
  font:
    14px "Open Sans",
    "Arial",
    sans-serif;
}

video {
  margin-top: 20px;
  border: 1px solid black;
}

.button {
  cursor: pointer;
  width: 160px;
  border: 1px solid black;
  font-size: 16px;
  text-align: center;
  padding-top: 2px;
  padding-bottom: 4px;
  color: white;
  background-color: darkgreen;
}

h2 {
  margin-bottom: 4px;
}

.left {
  float: left;
  width: 48%;
  margin-right: 2%;
}

.right {
  float: right;
  width: 48%;
  margin-left: 2%;
}

.deviceList {
  border: 1px solid black;
  list-style-type: none;
  margin-top: 2px;
  padding: 6px;
}
```

```
// UI 要素
const videoElement = document.querySelector("#video");
const logElement = document.querySelector("output");
const startButton = document.querySelector("#startButton");

function log(msg) {
  logElement.innerHTML += `${msg}<br>`;
}

startButton.addEventListener(
  "click",
  () => {
    const constraints = {
      video: {
        width: 160,
        height: 120,
        frameRate: 30,
      },
      audio: {
        sampleRate: 44100,
        sampleSize: 16,
        volume: 0.25,
      },
    };

    navigator.mediaDevices
      .getUserMedia(constraints)
      .then((stream) => {
        videoElement.srcObject = stream;
        updateDeviceList();
      })
      .catch((err) => {
        log(`${err.name}: ${err.message}`);
      });
  },
  false,
);
```

オーディオ機器と映像機器の一覧に使用される `<ul>` 要素への参照を保持するためのグローバル変数を用意します。

```js
const audioList = document.getElementById("audioList");
const videoList = document.getElementById("videoList");
```

### 機器一覧の取得と描画

`updateDeviceList()` メソッドでは、現在のメディア機器の一覧を取得した後、先ほど用意したグローバル変数を用いて、表示されているオーディオ機器と映像機器の一覧を更新します。

```js
function updateDeviceList() {
  navigator.mediaDevices.enumerateDevices().then((devices) => {
    audioList.innerHTML = "";
    videoList.innerHTML = "";

    devices.forEach((device) => {
      const elem = document.createElement("li");
      const [kind, type, direction] = device.kind.match(/(\w+)(input|output)/i);

      elem.innerHTML = `<strong>${device.label}</strong> (${direction})`;
      if (type === "audio") {
        audioList.appendChild(elem);
      } else if (type === "video") {
        videoList.appendChild(elem);
      }
    });
  });
}
```

`updateDeviceList()` は `navigator.mediaDevices` プロパティで参照している `MediaDevices` オブジェクトの `enumerateDevices()` の関数呼び出しが全体を占め、 `enumerateDevices()` から返されるプロミス (`promise`) が履行されたときに実行されるコードもあります。
 履行ハンドラーは、機器一覧の準備ができたときに呼び出されます。
 この一覧は履行ハンドラーへ `MediaDeviceInfo` オブジェクトの配列として渡され、それぞれがメディアの入力機器や出力機器を表しています。

すべての機器の情報を出力するために、 `forEach()` ループを使用しています。それぞれの機器で、ユーザーへこの機器情報を見せるために新しい `<li>` オブジェクトを作成します。

`let [kind, type, direction] = device.kind.match(/(\w+)(input|output)/i);` の行について詳しく説明します。ここでは分割代入を使用しており、 `String.match()` によって返された配列の値を `kind`、`type`、`direction` の変数へ代入しています。なぜこのようなことをするのかというと、 `MediaDeviceInfo.kind` の文字列は、 "audioinput" や "videooutput" のように、メディア種別とメディアフローの向きの 2 つの情報を含んでいるためです。この行で、種別（"audio" または "video"）と方向（"input" と "output"）を取り出すことで、一覧に表示する文字列を作成することができます。

太字のデバイス名と括弧で囲まれた方向を含む文字列が作成されると、デバイス種別に基づいて`audioList`または`videoList`対応する一覧へ`appendChild()`の呼び出しによって追加されます。

### 機器一覧の変更の扱い

`updateDeviceList()` は 2 か所呼び出されます。 1 か所目は `getUserMedia()` のプロミスの履行ハンドラーであり、ストリームが開かれた時に最初に一覧を埋めます。 2 か所目は `devicechange` のイベントハンドラーからです。

```js
navigator.mediaDevices.ondevicechange = (event) => {
  updateDeviceList();
};
```

このコードでは、ユーザがカメラ、マイク、他のメディア機器を接続したり、電源を入れたり、電源を切ったりする度に、 `updateDeviceList()` を呼び出し接続された機器一覧を再描画します。

### 結果

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # event-mediadevices-devicechange |
| Media Capture and Streams # dom-mediadevices-ondevicechange |

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

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


MediaDevices: enumerateDevices() メソッド - Web 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() メソッド - Web API

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.


MediaDevices: getDisplayMedia() メソッド - Web API

MediaDevices: getDisplayMedia() メソッド
====================================

`MediaDevices` インターフェイスの **`getDisplayMedia()`** メソッドは、ディスプレイまたはその一部（ウィンドウなど）の内容を `MediaStream` としてキャプチャする許可を選択し、許可するようユーザーに促します。

生成されたストリームは、 MediaStream 収録 API を使って記録したり、 WebRTC セッションとして送信することが可能です。

詳細および使用例については、画面キャプチャ API の使用を参照してください。

構文
--

```js
getDisplayMedia()
getDisplayMedia(options)
```

### 引数

`options` 省略可

オプションのオブジェクトで、返される `MediaStream` の要件を指定します。 `getDisplayMedia()` のオプションは `MediaDevices.getUserMedia()` メソッドの constraints と同じように動作しますが、ただし `audio` および `video` が指定された場合のみです。`getDisplayMedia()` の利用可能なオプションプロパティの一覧は次の通りです。

`video` 省略可

論理値または `MediaTrackConstraints` (en-US) インスタンスで、既定値は `true` です。このオプションを省略するか、`true` に設定すると、ストリームに映像トラックが格納されます。`true` の値は、返す `MediaStream` に映像トラックが格納されることを示します。`getDisplayMedia()` は映像トラックを必要とするので、このオプションを `false` に設定すると、プロミスは `TypeError` で拒否されます。

`audio` 省略可

論理値または `MediaTrackConstraints` (en-US) インスタンスで、既定値は `false` です。返される `MediaStream` の値が `true` の場合、ユーザーが選択した表示画面が音声が対応していて利用可能な場合、音声トラックが格納されることを示します。

`controller` 省略可

含まれている場合、キャプチャセッションをさらに操作するために使用できるメソッドを持つ `CaptureController` (en-US) オブジェクトのインスタンスです。

`preferCurrentTab`
Non-standard
 省略可

論理値です。`true` とすると、ブラウザーが現在のタブを最も推奨するキャプチャソースとして提供するように指示します。つまり、ユーザーに表示される「共有するものを選んでください」オプションの中に、別個の「このタブ」オプションとして表示されます。これは、一般的に多くの種類のアプリが現在のタブを共有したいだけなので有益なことです。例えば、スライドデッキアプリは、ユーザーが仮想会議にプレゼンテーションを格納する現在のタブをストリーミングできるようにすることができます。既定値は仕様書では定められていません。ブラウザー別の既定値については、ブラウザーの互換性の節を参照してください。

`selfBrowserSurface` 省略可

ブラウザーが、キャプチャのためにユーザーが現在のタブを選択することを許可するかどうかを指定する列挙型値です。これは、動画会議アプリが誤って自分自身でディスプレイを共有してしまったときに経験する「無限の鏡のホール」効果を避けるために役立ちます。使用可能な値は、ブラウザーがキャプチャーの選択肢に現在のタブを含めることを指示する `include` と、除外することを指示する `exclude` です。既定値は仕様書では定められていません。ブラウザー別の既定値については、ブラウザーの互換性の節を参照してください。

`surfaceSwitching` 省略可

ブラウザーが、画面共有中にユーザーが共有タブを動的に切り替えるためのコントロールを表示するかどうかを指定する列挙型の値です。これは、ユーザーが共有タブを切り替えたいときに毎回共有プロセス全体を読み直すよりもずっと便利です。使用可能な値は、ブラウザーがコントロールを含めることを指示する `include` と、コントロールを表示しないことを指示する `exclude` です。既定値は仕様書では定められていません。ブラウザー別の既定値については、ブラウザーの互換性の節を参照してください。

`systemAudio` 省略可

ブラウザーがユーザーに提供する使用可能な音声ソースの中にシステム音声を含めるべきかどうかを指定する列挙型の値です。使用可能な値は、ブラウザーがシステム音声を選択肢のリストに含めることを指示する `include` と、除外することを指示する `exclude` です。既定値は仕様書では定められていません。ブラウザー別の既定値については、ブラウザーの互換性の節を参照してください。

**メモ:** 能力と制約と設定の記事を見ると、これらのオプションがどのように動作するかのもっと詳細があります。

### 返値

`Promise` で、ユーザーが選択した画面領域から来る映像トラックと、オプションの音声トラックを含む `MediaStream` に解決します。

**メモ:** 音声トラックに対するブラウザーの対応は、メディアレコーダーが全く対応していないかどうかという点でも、対応している音声ソースという点でも、さまざまです。各ブラウザーの詳細については、互換性一覧表を確認してください。

### 例外

`AbortError` `DOMException`

エラーまたは失敗がここに挙げた他の例外のいずれにも該当しない場合に返される。

`InvalidStateError` `DOMException`

`getDisplayMedia()` の呼び出しが、イベントハンドラーのようなユーザーアクションによって実行されているコードから行われなかった場合に返されます。このイベントのもう一つの原因として考えられるのは、 `getDisplayMedia()` が呼び出されたコンテキストの `document` が完全にアクティブでないことです。

`NotAllowedError` `DOMException`

画面領域へのアクセス許可がユーザーによって（例えば権限ポリシーで）拒否された場合、または現在の閲覧インスタンスが画面共有へのアクセスを許可されていない場合に返されます。

`NotFoundError` `DOMException`

キャプチャ可能な画面映像のソースが存在しない場合に返却されます。

`NotReadableError` `DOMException`

ユーザーが画面、ウィンドウ、タブ、またはその他の画面データのソースを選択したが、ハードウェアまたはオペレーティングシステムレベルのエラーまたはロックアウトが発生し、選択したソースの共有ができない場合に返されます。

`OverconstrainedError` `DOMException`

ストリームを作成した後、互換性のあるストリームが生成できなかったため、指定された制約の適用に失敗した場合に返されます。

`TypeError`

指定した `options` に許可されていない値が含まれた状態で `getDisplayMedia()` を呼び出した場合、例えば `video` プロパティを false に設定した場合、あるいは指定した `MediaTrackConstraints` (en-US) が許可されていない場合などに返されます。`min` と `exact` 値は、`MediaDevices.getDisplayMedia()` の呼び出しの中で使用される制約では許可されません。

セキュリティ
------

`getDisplayMedia()` は悪用される可能性があるため、プライバシーとセキュリティに関する重大な懸念の源となり得ます。そのため、仕様書では `getDisplayMedia()` を完全に対応するためにブラウザーに要求される基準を詳述しています。

* 指定されたオプションは、ユーザーが利用できるオプションを制限するために使用することはできません。代わりに、ユーザーがソースを選択した後、オプションに一致する出力を生成するために適用する必要があります。
* `getDisplayMedia()` を使用するための go-ahead 権限は、再利用のために永続化することはできません。ユーザーは毎回、許可を求めるプロンプトを表示しなければなりません。
* 単発のユーザーにようる有効化が必要です。この機能を動作させるためには、ユーザーがページや UI 要素を操作する必要があります。
* `getDisplayMedia()`の呼び出しは、イベントハンドラーのようなユーザーのアクションに反応して実行されるコードから行われなければなりません。
* ブラウザーは、ブラウザーを含むディスプレイやウィンドウを共有することについての警告をユーザーに提供し、他のコンテンツがキャプチャされて他のユーザーに表示される可能性があることに注意することが推奨されます。
例
-

以下の例では、 `displayMediaOptions` 引数で指定された一連のオプションを指定して画面のキャプチャを開始する `startCapture()` メソッドが作成されています。このオプションは、優先するストリーム構成と、ビデオをキャプチャする表示面を指定したオブジェクトで指定されます。

```js
async function startCapture(displayMediaOptions) {
  let captureStream;

  try {
    captureStream =
      await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
  } catch (err) {
    console.error(`Error: ${err}`);
  }
  return captureStream;
}
```

これは `await` を使用して、 `getDisplayMedia()` が `MediaStream` で解決するのを非同期に待ち、指定したオプションで要求された表示コンテンツを含むストリームを生成します。ストリームは、ストリームからビデオトラックを追加するために `RTCPeerConnection.addTrack()` (en-US) を使用して WebRTC 呼び出しに追加するために使用する呼び出し側に返されます。

仕様書
---

| Specification |
| --- |
| Screen Capture # dom-mediadevices-getdisplaymedia |

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

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

関連情報
----

* 画面キャプチャ API
* 画面キャプチャ API の使用
* メディアキャプチャとストリーム API
* WebRTC API
* `getUserMedia()`: カメラやマイクからメディアをキャプチャ


SpeechRecognition: nomatch イベント - Web API

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