recursal/MDN huggingface dataset:
ネットワーク情報 API
============

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

 ネットワーク情報 API はシステムのネットワーク接続に関する情報を、一般的な接続の種類 ('wifi' や 'cellular' など) の観点から提供します。
 これは、ユーザーの接続に基づき、高解像度コンテンツや低解像度コンテンツを選択するために使用することができます。

API は単一の `NetworkInformation` オブジェクトで構成されます。これは `Navigator.connection` プロパティから返されるインスタンスです。

**注:** この機能は Web Worker 内で利用可能です

インターフェイス
--------

`NetworkInformation`

端末がネットワーク通信に使用している接続方法の情報を提供します。また、接続の種類が変更された場合に、スクリプトへ通知する手段も提供します。 `NetworkInformation` インターフェイスはインスタンス化できません。代わりに、 `Navigator` インターフェイスを通してアクセスします。

例
-

### 接続の変化の検出

以下の例では、ユーザーの接続の変化を監視します。


```js
let type = navigator.connection.effectiveType;

function updateConnectionStatus() {
  console.log(
    `接続の種類が ${type} から ${navigator.connection.effectiveType} に変化`,
  );
  type = navigator.connection.effectiveType;
}

navigator.connection.addEventListener("change", updateConnectionStatus);
```

### 大きなリソースを事前読み込み

接続オブジェクトは、大きな帯域幅やメモリが使われるリソースを事前読み込みするかどうか決める場合に便利です。以下の例は、ページの読み込み直後に呼び出され、動画の事前読み込みが望ましくない場合の接続の種類を確かめます。携帯電話回線接続が見つかると、 `preloadVideo` フラグは `false` に設定されます。コードをわかりやすくするために、この例ではひとつの接続の種類だけをテストしました。実際に使う場合には、 switch 文その他のやり方で、 `NetworkInformation.type` の可能な値すべてを確かめることになるでしょう。 `type` の値にかかわらず、 `NetworkInformation.effectiveType` プロパティを用いて接続速度を見積もることができます。


```js
let preloadVideo = true;
const connection = navigator.connection;
if (connection) {
  if (connection.effectiveType === "slow-2g") {
    preloadVideo = false;
  }
}
```

仕様書
---

| Specification |
| --- |
| Network Information API # networkinformation-interface |
| Network Information API # connection-attribute |

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

### api.NetworkInformation

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

### api.Navigator.connection

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

関連情報
----

* オンライン／オフラインイベント
VideoTrack
==========

`VideoTrack` インターフェイスは、`<video>` 要素からの単一の映像トラックを表します。

`VideoTrack` オブジェクトにアクセスするための最も一般的な用途は、その `<video>` 要素のアクティブ映像トラックにするために、その `selected` プロパティを切り替えることです。

プロパティ
-----

`selected`

映像トラックがアクティブかどうかを制御する論理値です。同時にアクティブにできる映像トラックは 1 つだけなので、別のトラックがアクティブなときに、あるトラックでこのプロパティを `true` に設定すると、アクティブであったトラックは非アクティブになります。

`id` 読取専用 

メディア内のトラックを一意に識別する文字列です。この ID を使用して、`VideoTrackList.getTrackById()` を呼び出して、映像トラックリスト内の特定のトラックを見つけることができます。 メディアが Media Fragments URI 仕様（その日本語訳）に従ってメディアフラグメントによるシークをサポートしている場合は、ID を URL のフラグメント部分として使用することもできます。

`kind` 読取専用 

トラックが属するカテゴリーを指定する文字列です。 例えば、メイン映像トラックには `"main"` という `kind` があります。

`label` 読取専用 

トラックに人間が読めるラベルを提供する文字列です。 例えば、`kind` が `"sign"` のトラックには `"手話通訳"` という `label` が付いている場合があります。 ラベルが指定されていない場合、この文字列は空です。

`language` 読取専用 

映像トラックの主要言語を指定する文字列、または不明の場合は空文字列です。 言語は、`"en-US"` または `"pt-BR"` などの BCP 47 (RFC 5646) 言語コードとして指定されます。

`sourceBuffer` 読取専用 

トラックを作成した `SourceBuffer`。トラックが `SourceBuffer` によって作成されなかった場合、または `SourceBuffer` がその親メディアソースの `MediaSource.sourceBuffers` 属性から取り除かれた場合は、null を返します。

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

特定のメディア要素の `VideoTrack` を取得するには、その要素の `videoTracks` プロパティを使用します。 このプロパティは、メディアに含まれる個々のトラックを取得できる `VideoTrackList` オブジェクトを返します。


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


その後、配列の構文または `forEach()` などの関数を使用して、メディアの個々のトラックにアクセスできます。

この最初の例は、メディア上の最初の映像トラックを取得します。


```js
const firstTrack = tracks[0];
```


次の例では、メディアのすべての映像トラックをスキャンして、（変数 `userLanguage` から取得した）ユーザーの優先言語の最初の映像トラックをアクティブにします。


```js
for (const track of tracks) {
  if (track.language === userLanguage) {
    track.selected = true;
    break;
  }
}
```


`language` は標準 (RFC 5646) 形式です。 例えば、アメリカ英語の場合、これは `"en-US"` になります。

仕様書
---

| Specification |
| --- |
| HTML Standard # videotrack |

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

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

Limited availability
--------------------

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

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

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

WebUSB API の `USBInterface` インターフェイスは、USB デバイスが提供するインターフェイスの情報を提供します。インターフェイスは、デバイスの機能を表し、特定のプロトコルを実装し、双方向通信用のエンドポイントを含むことができます。

コンストラクター
--------

`USBInterface()` 
Experimental

渡された `USBConfiguration` の指定のインターフェイス番号のインターフェイスの情報が格納される新しい `USBInterface` オブジェクトを生成します。

インスタンスプロパティ
-----------

`USBInterface.interfaceNumber` 読取専用  
Experimental

このインターフェイスのインターフェイス番号を返します。これはこのインターフェイスを定義しているインターフェイスディスクリプターの `bInterfaceNumber` フィールドと一致します。

`USBInterface.alternate` 読取専用  
Experimental

このインターフェイスで現在選択されているオルタナティブコンフィギュレーションを返します。デフォルトでは、これは `alternates` に入っている `USBAlternateInterface` の中で、`alternateSetting` が `0` のものです。`USBDevice.selectAlternateInterface()` を `alternates` に入っている他の値を渡して呼ぶことで、変えることができます。

`USBInterface.alternates` 読取専用  
Experimental

このインターフェイスで可能なオルタナティブコンフィギュレーションそれぞれを表す `USBAlternateInterface` インターフェイスのインスタンスが格納された配列を返します。

`USBInterface.claimed` 読取専用  
Experimental

このインターフェイスが現在のページで `USBDevice.claimInterface()` を呼ぶことで要求されたかどうかを返します。

仕様書
---

| Specification |
| --- |
| WebUSB API # usbinterface |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
reportError() グローバル関数
=====================

**注:** この機能は Web Worker 内で利用可能です

**`reportError()`** グローバルメソッドは、 JavaScript の捕捉されない例外をエミュレートして、コンソールやグローバルイベントハンドラにエラーを報告するために使用することができます。

 この機能は、主にカスタムイベント配信ライブラリーや コールバック操作ライブラリーを対象としています。
 ライブラリはこの機能を使用して、コールバックコードのエラーを捕捉し、最上位のハンドラーに投げ直すことができます。
 これにより、 1 つのコールバックで例外が発生しても、他のコールバックが処理されなくなることがなくなると同時に、スタックトレース情報が最上位レベルのデバッグに利用できるようになります。

構文
--


```js
reportError(throwable)
```

### 引数

`throwable`

エラーオブジェクト、例えば `TypeError` です。

### 返値

なし (`undefined`)。

### 例外

`TypeError`

エラー引数なしでこのメソッドが呼び出された場合。

例
-

このメソッドが使用できるかどうかの機能検出です。


```js
if (typeof self.reportError === "function") {
  // この関数が定義されている
}
```


 以下のコードでは、どのようにエラーを作成して報告する方法、グローバルな `onerror` ハンドラーを使用するか、 `error` イベントのリスナーを追加してエラーを捕捉する方法を示しています。
 `onerror` に割り当てられたハンドラーは、 `true` を返さなければ、イベントがそれ以上伝播しないことに注意してください。


```js
const newError = new Error("エラーメッセージ", "someFile.js", 11);
self.reportError(newError);

window.onerror = (message, source, lineno, colno, error) => {
  console.error(`メッセージ: ${error.message}、行番号: ${lineno}`);
  return true;
};

self.addEventListener("error", (error) => {
  console.error(error.filename);
});

// 出力
// > "メッセージ: エラーメッセージ、行番号: 11"
// > "someFile.js"
```

仕様書
---

| Specification |
| --- |
| HTML Standard # runtime-script-errors |

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

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

関連情報
----

* `Window`
* `WorkerGlobalScope`
* error イベント
PerformanceObserverEntryList
============================

**`PerformanceObserverEntryList`** インターフェイスは、`observe()` メソッドを介して明示的に*監視された* パフォーマンスイベント のリストです。

**メモ:** このインターフェイスは `Window` と `Worker` に公開されています。

メソッド
----

`PerformanceObserverEntryList.getEntries()` (en-US)

与えられた*フィルタ*に基づいて明示的に*観測された* `PerformanceEntry` オブジェクトのリストを返します。

`PerformanceObserverEntryList.getEntriesByType()` (en-US)

与えられた*エントリタイプ*の明示的に*観測された*`PerformanceEntry` オブジェクトのリストを返します。

`PerformanceObserverEntryList.getEntriesByName()` (en-US)

指定された*名前*と*エントリタイプ*に基づいて、明示的に*監視されている* `PerformanceEntry` オブジェクトのリストを返します。

例
-


```js
// Create observer for all performance event types
// list is of type PerformanceObserveEntryList
var observe_all = new PerformanceObserver(function(list, obs) {
   var perfEntries = list.getEntries();
   for (var i = 0; i < perfEntries.length; i++) {
      print\_perf\_entry(perfEntries[i]);
      // do something with it
   }
}
```

仕様書
---

| Specification |
| --- |
| Performance Timeline # performanceobserverentrylist-interface |

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

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

**`HTMLHtmlElement`** インターフェイスは、HTML 文書のルートノードとして機能します。このオブジェクトは `HTMLElement` インターフェイスで記述されたプロパティやメソッドを継承しています。

`HTMLHtmlElement` オブジェクトを文書から受け取るには、 `document.documentElement` プロパティの値を読み取ります。

EventTarget

Node

Element

HTMLElement

HTMLHtmlElementプロパティ
-----

*親である `HTMLElement` から継承したプロパティもあります。*

`HTMLHtmlElement.version` 
非推奨

この文書に適用される HTML 文書型定義 (DTD) のバージョンを表す文字列。このプロパティは不適合であるため、もう使用するべきではありません。省略してください。

メソッド
----

*独自のメソッドはありません。親である `HTMLElement` から継承したメソッドがあります。*

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlhtmlelement |

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

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

関連情報
----

* このインターフェイスを実装している HTML 要素: `<html>`
AudioSinkInfo
=============

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

Web Audio API の **`AudioSinkInfo`** インターフェイスは、`AudioContext` の sink ID (`AudioContext.sinkId` により取得できる) を表現する情報を表します。

インスタンスプロパティ
-----------

`type` 読取専用  
Experimental

この音声出力デバイスの種類を返します。

例
-

`sinkId` の値を `{ type: 'none' }` にして新しい `AudioContext` を生成し、後に `AudioContext.sinkId` を参照すると、`type: 'none'` が入った `AudioSinkInfo` オブジェクトが返ります。これは現在利用可能な唯一の値です。


```js
audioCtx = new window.AudioContext({
  sinkId: { type: "none" },
});

// ...

audioCtx.sinkId;
```

仕様書
---

| Specification |
| --- |
| Web Audio API # AudioSinkInfo |

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

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

関連情報
----

* SetSinkId test example
* `AudioContext.setSinkId()`
* `AudioContext.sinkId`
* `sinkchange`
FileReader
==========

**`FileReader`** オブジェクトを使用すると、ウェブアプリケーションは、ユーザーのコンピューターに保存されているファイル（または生のデータバッファー）の内容を非同期に読み取ることができます。`File` または `Blob` オブジェクトを使用して、読み込むファイルまたはデータを指定します。

File オブジェクトは、`<input>` 要素を使用してファイルを選択した結果として返される `FileList` オブジェクト、またはドラッグ & ドロップ操作の `DataTransfer` オブジェクトから取得することができます。

`FileReader` は、ユーザーが HTML の `<input type="file">` 要素を使って、あるいはドラッグ & ドロップで明示的に選択したファイルの内容にのみアクセスすることができます。ユーザーのファイルシステムからパス名でファイルを読み込むために使用することはできません。クライアントのファイルシステム上のファイルをパス名で読み込むには、ファイルシステムアクセス API を使用してください。サーバー側のファイルを読み込むには、標準的な Ajax ソリューションを使用し、ドメインをまたがって読み込む場合は CORS 許可を取得してください。

**注:** この機能は Web Worker 内で利用可能です

EventTarget

FileReaderコンストラクター
--------

`FileReader()`

新しく作成された `FileReader` を返します。

詳細や例についてはウェブアプリケーションからのファイルの使用を参照してください。

インスタンスプロパティ
-----------

`FileReader.error` 読取専用 

ファイルの読み込み中に発生したエラーを表す `DOMException` です。

`FileReader.readyState` 読取専用 

`FileReader` の状態を示す数値。以下のいずれかになります。

| 名前 | 値 | 説明 |
| --- | --- | --- |
| `EMPTY` | `0` | まだデータは読み込まれていません。 |
| `LOADING` | `1` | データは現在読み込み中です。 |
| `DONE` | `2` | 読み込みリクエストがすべて終了しました。 |

`FileReader.result` 読取専用 

ファイルの内容。このプロパティは読み込み操作が完了した後にのみ有効であり、データの形式は、どのメソッドが読み込み操作を開始するのに使用されたかに依存します。

インスタンスメソッド
----------

`FileReader.abort()`

読み込み処理を中断します。結果として `readyState` は `DONE` に変わります。

`FileReader.readAsArrayBuffer()`

指定された `Blob` の内容の読み込みを開始し、終了すると、`result` 属性にファイルのデータを表す `ArrayBuffer` が格納されます。

`FileReader.readAsBinaryString()`

指定された `Blob` の内容の読み込みを開始し、終了すると、`result` 属性にはファイルからの生のバイナリーデータが文字列として格納されます。

`FileReader.readAsDataURL()`

指定された `Blob` の内容の読み込みを開始し、終了すると、`result` 属性にはファイルのデータを表す `data:` の URL が格納されます。

`FileReader.readAsText()`

指定された `Blob` の内容の読み込みを開始し、終了すると `result` 属性にファイルの内容がテキスト文字列として格納されます。オプションでエンコーディング名を指定することができます。

イベント
----

これらのイベントを待ち受けるには、 `addEventListener()` を使用するか、このインターフェイスの `onイベント名` プロパティにイベントリスナーを代入するかしてください。 `FileReader` が使用されなくなったら、メモリーリークを防ぐために `removeEventListener()` でイベントリスナーを取り外してください。

`abort`

プログラムが `FileReader.abort()` を呼び出したなどの原因で、読み取り操作が中断されたときに発生します。

`error`

エラーのために読み取りが失敗したときに発生します。

`load`

読み取りが正常に完了したときに発生します。

`loadend`

正常かどうかにかかわらず、読み取りが完了したときに発生します。

`loadstart`

読み取りが開始されたときに発生します。

`progress`

データの読み取り時に定期的に発生します。

仕様書
---

| Specification |
| --- |
| File API # APIASynch |

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

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

関連情報
----

* ウェブアプリケーションからのファイルの使用
* `File`
* `Blob`
* `FileReaderSync`
AudioListener
=============

`AudioListener` インターフェースは、特定の人物が聞いている音場の位置と方向を表し、それが音声空間処理 (en-US)に使用されます。すべての `PannerNode` は、 `BaseAudioContext.listener` 属性に格納されている `AudioListener` に関連して空間化されます。

注意点としては、リスナーは 1 つのコンテキストにつき 1 つしかなく、 `AudioNode` ではないことです。

![AudioListener の位置、上方向、前方向のベクトルを、上方向と前方向のベクトルが互いに90°になるように表示したものです。](/ja/docs/Web/API/AudioListener/webaudiolistenerreduced.png)

プロパティ
-----

**メモ:** position、forward、up の値の設定と取得は異なる構文で行われます。取得は例えば `AudioListener.positionX` にアクセスすることで行われ、同じプロパティを設定するには `AudioListener.positionX.value` を使用することで行われます。仕様書の IDL でこれらの値は読み取り専用とマークされていないのはこのためです。

`AudioListener.positionX` (en-US)

右直交座標系におけるリスナーの水平位置を表します。既定値は 0 です。

`AudioListener.positionY` (en-US)

右直交座標系におけるリスナーの垂直位置を表します。既定値は 0 です。

`AudioListener.positionZ` (en-US)

右直交座標系におけるリスナーの縦方向（前後）の位置を表します。既定値は 0 です。

`AudioListener.forwardX` (en-US)

位置（`positionX`, `positionY`, `positionZ`）の値と同じ直交座標系におけるリスナーの前方向の水平位置を表します。 順方向と上方向の値は互いに線形的に独立しています。既定値は 0 です。

`AudioListener.forwardY` (en-US)

位置（`positionX`, `positionY`, `positionZ`）の値と同じ直交座標系におけるリスナーの前方方向の垂直位置を表します。 順方向と上方向の値は互いに線形的に独立しています。既定値は 0 です。

`AudioListener.forwardZ` (en-US)

位置（`positionX`, `positionY`, `positionZ`）の値と同じ直交座標系でのリスナーの前方向の前後（前後）の位置を表します。 順方向と上方向の値は互いに線形的に独立しています。既定値は -1 です。

`AudioListener.upX` (en-US)

位置（`positionX`, `positionY`, `positionZ`）と同じ直交座標系でのリスナーの前方向の前後（前後）の位置を表します。 順方向と上方向の値は互いに線形的に独立しています。既定値は -1 です。

`AudioListener.upY` (en-US)

位置（`positionX`, `positionY`, `positionZ`）の値と同じ直交座標系における、リスナーの頭のてっぺんの垂直位置を表します。 順方向と上方向の値は互いに線形的に独立しています。 デフォルトは1です。

`AudioListener.upZ` (en-US)

位置（`positionX`, `positionY`, `positionZ`）の値と同じ直交座標系における、リスナーの頭の上端の縦方向（前後）の位置を表します。 順方向と上方向の値は互いに線形的に独立しています。既定値は 0 です。

メソッド
----

`AudioListener.setOrientation()` (en-US) 
非推奨

リスナーの向きを設定します。

`AudioListener.setPosition()` (en-US) 
非推奨

リスナーの位置を設定します。


**メモ:** これらのメソッドは非推奨ですが、現在、 Firefox、Internet Explorer、Safari で方向と位置を設定するための唯一の方法となっています。

非推奨の機能
------

`AudioListener.dopplerFactor` 
非推奨

double 値で、ドップラー効果をレンダリングするときに使用するピッチシフトの量を表します。

`AudioListener.speedOfSound` 
非推奨

double 値で、音の速度をメートル毎秒で表します。

この仕様の以前のバージョンでは、 `dopplerFactor` および `speedOfSound` プロパティと `setPosition()` メソッドを使用して、ダウンストリームに接続された `AudioBufferSourceNode` に適用されるドップラー効果を制御できました — これらは `PannerNode` と `AudioListener` の相対速度に応じて上下にピッチが変わります。 これらの機能には多くの問題がありました。

* `AudioBufferSourceNode` のみがピッチを上下させることができ、他のソースノードはできませんでした。
* `AudioBufferSourceNode` が複数の `PannerNode` に接続されている場合に採用する動作が不明確でした。
* パンナーとリスナーのベロシティは `AudioParam` ではなかったため、ピッチの変更はスムーズに適用できず、オーディオグリッチが発生しました。

これらの問題のため、これらのプロパティとメソッドは削除されました。

`setOrientation()` および `setPosition()` メソッドは、それらのプロパティ値を同等に設定することで置き換えられました。 例えば、 `setPosition(x, y, z)` は、それぞれ `positionX.value`, `positionY.value` および `positionZ.value` を設定することによって実現できます。

例
-

サンプルコードは `BaseAudioContext.createPanner()` を参照してください。

仕様書
---

| Specification |
| --- |
| Web Audio API # AudioListener |

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

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

関連情報
----

* ウェブオーディオ API の使用
TrackEvent
==========

**`TrackEvent`** インターフェイスは HTML DOM 仕様の一部であり、 HTML のメディア要素で使用可能なトラックのセットに対する変更を表すイベントに使用されます。 これらのイベントは `addtrack` と `removetrack` です。

`TrackEvent` を `RTCTrackEvent` (en-US) インターフェイスと混同しないでください。そちらは `RTCPeerConnection` の一部であるトラックに使用されます。

`TrackEvent` に基づくイベントは、常に次のメディアトラックリストの種類のいずれかに送信されます。

* 映像トラックに関連するイベントは、常に `HTMLMediaElement.videoTracks` にある `VideoTrackList` に送信されます。
* 音声トラックに関連するイベントは、常に `HTMLMediaElement.audioTracks` で指定された `AudioTrackList` に送信されます。
* テキストトラックに影響を与えるイベントは、`HTMLMediaElement.textTracks` によって示される `TextTrackList` (en-US) オブジェクトに送信されます。

Event

TrackEventコンストラクター
--------

`TrackEvent()`

指定されたイベント種別とオプションの追加プロパティで、新しい `TrackEvent` オブジェクトを作成して初期化します。

インスタンスプロパティ
-----------

*`TrackEvent` は `Event` に基づいているため、`Event` のプロパティは `TrackEvent` オブジェクトでも利用できます。*

`track` 読取専用 

イベントが参照している DOM のトラックオブジェクト。 `null` でない場合、これは常にメディアトラックの種類のうちの 1 つのオブジェクト（`AudioTrack`、`VideoTrack`、 `TextTrack`）です。

インスタンスメソッド
----------

*`TrackEvent` には独自のメソッドはありません。 しかし、それは `Event` に基づいているので、`Event` オブジェクトで利用可能なメソッドを提供します。*

例
-

この例では、 `handleTrackEvent()` 関数を設定します。 この関数は、文書内で見つかった最初の `<video>` 要素の `addtrack` イベントまたは `removetrack` イベントに対して呼び出されます。


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

videoElem.videoTracks.addEventListener("addtrack", handleTrackEvent, false);
videoElem.videoTracks.addEventListener("removetrack", handleTrackEvent, false);
videoElem.audioTracks.addEventListener("addtrack", handleTrackEvent, false);
videoElem.audioTracks.addEventListener("removetrack", handleTrackEvent, false);
videoElem.textTracks.addEventListener("addtrack", handleTrackEvent, false);
videoElem.textTracks.addEventListener("removetrack", handleTrackEvent, false);

function handleTrackEvent(event) {
  let trackKind;

  if (event.target instanceof VideoTrackList) {
    trackKind = "映像";
  } else if (event.target instanceof AudioTrackList) {
    trackKind = "音声";
  } else if (event.target instanceof TextTrackList) {
    trackKind = "テキスト";
  } else {
    trackKind = "不明な";
  }

  switch (event.type) {
    case "addtrack":
      console.log(trackKind + "トラックが追加されました。");
      break;
    case "removetrack":
      console.log(trackKind + "トラックが取り除かれました。");
      break;
  }
}
```


イベントハンドラーは、 JavaScript の `instanceof` 演算子を使用してイベントが発生したトラックの種類を判断し、それがどの種類のトラックであるか、および要素に追加されているのか、要素から取り除かれているのかを示すメッセージをコンソールに出力します。

仕様書
---

| Specification |
| --- |
| HTML Standard # the-trackevent-interface |

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

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

**`AudioBuffer`** インターフェイスはメモリー上の短い音声を表すもので、 `AudioContext.decodeAudioData()` メソッドで音声ファイルから生成されたり、 `AudioContext.createBuffer()` を使って生のデータから生成されたりします。 AudioBuffer に入れた後、その音声は `AudioBufferSourceNode` に渡せば再生できます。

これらのオブジェクトは短い、一般的には 45 秒未満の、断片的な音声を保持するために設計されています。それよりも長い音声は、 `MediaElementAudioSourceNode` のオブジェクトが適しています。バッファーには、ノンインターリーブ IEEE754 32bit リニア PCM で、 `-1` から `+1` の範囲に正規化された形式で格納されます。つまり、 32 ビット浮動小数点バッファーで、それぞれのサンプルは -1.0 から 1.0 の間です。 AudioBuffer に複数のチャンネルがある場合は、それぞれ分かれたバッファーに格納されます。

コンストラクター
--------

`AudioBuffer()`

新しい `AudioBuffer` オブジェクトのインスタンスを生成して返します。

プロパティ
-----

`AudioBuffer.sampleRate` 読取専用 

バッファーに格納された PCM データの 1 秒あたりのサンプル数であるサンプリングレートを表す float を返します。

`AudioBuffer.length` 読取専用 

バッファーに格納された PCM データの秒数で長さを表す整数を返します。

`AudioBuffer.duration` 読取専用 

バッファーに格納された PCM データの時間を秒単位で表す double 値を返します。

`AudioBuffer.numberOfChannels` 読取専用 

バッファーに格納された PCM データによって記述されるディスクリート音声チャンネルの数を表す整数を返します。

メソッド
----

`AudioBuffer.getChannelData()`

引数 `channel` で定義されたチャンネルに関連付けられた PCM データを含む `Float32Array` を返します（`0` は最初のチャンネルを表します）。

`AudioBuffer.copyFromChannel()`

`AudioBuffer` の指定されたチャンネルから、サンプルを配列 `destination` にコピーします。

`AudioBuffer.copyToChannel()`

音声バッファー `AudioBuffer` の指定されたチャンネルに、配列 `source` からサンプルをコピーします。

例
-

次の簡単な例では、 `AudioBuffer` の生成し、バッファーにランダムなホワイトノイズを書き込む方法を示しています。 webaudio-examples リポジトリーには完全なソースコードと、ライブ実行版があります。


```js
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();

// AudioContextのサンプルレートで 3 秒間の空のステレオバッファーを生成する
var myArrayBuffer = audioCtx.createBuffer(
  2,
  audioCtx.sampleRate \* 3,
  audioCtx.sampleRate,
);

// バッファにホワイトノイズを書き込む
// -1.0 から 1.0 の間の乱数の値で埋めるだけ
for (var channel = 0; channel < myArrayBuffer.numberOfChannels; channel++) {
  // 実際のデータの配列を得る
  var nowBuffering = myArrayBuffer.getChannelData(channel);
  for (var i = 0; i < myArrayBuffer.length; i++) {
    // Math.random() は [0; 1.0] である
    // 音声は [-1.0; 1.0] である必要がある
    nowBuffering[i] = Math.random() \* 2 - 1;
  }
}

// AudioBufferSourceNode を得る
// これは AudioBuffer を再生するときに使う AudioNode である
var source = audioCtx.createBufferSource();

// AudioBufferSourceNode にバッファーを設定する
source.buffer = myArrayBuffer;

// AudioBufferSourceNode を出力先に接続すると音声が聞こえるようになる
source.connect(audioCtx.destination);

// 音源の再生を始める
source.start();
```

仕様書
---

| Specification |
| --- |
| Web Audio API # AudioBuffer |

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

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

関連情報
----

* ウェブオーディオ API の使用
PerformanceElementTiming
========================

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

**`PerformanceElementTiming`** インターフェイスは、開発者が `elementtiming` 属性で記述した画像やテキストのノード要素の描画タイミング情報を保持します。

解説
--

要素タイミング API の目的は、ウェブ開発者や分析ツールにページ上の重要な要素のレンダリングタイムスタンプを測定する機能を提供することです。

API は以下の要素のタイミング情報に対応しています。

* `<img>` 要素
* `<image>` 要素（`<svg>` 内）
* ポスター画像（`<video>` 要素）
* `background-image` がある要素
* テキストノードのグループ、 `<p>` など

作者は要素に `elementtiming` 属性を追加することで、監視のためのフラグを立てます。

`PerformanceElementTiming` は `PerformanceEntry` を継承しています。

PerformanceEntry

PerformanceElementTimingインスタンスプロパティ
-----------

このインターフェイスは、以下のイベントタイミングパフォーマンス項目型である `PerformanceEntry` プロパティを以下のように修飾して拡張しています。

`PerformanceEntry.duration` 読取専用  
Experimental

常に `0` を返します。 `duration` はこのインターフェイスでは利用できません。

`PerformanceEntry.entryType` 読取専用  
Experimental

常に `"element"` を返します。

`PerformanceEntry.name` 読取専用  
Experimental

画像には `"image-paint"` を返し、テキストには `"text-paint"` を返します。

`PerformanceEntry.startTime` 読取専用  
Experimental

この項目の `renderTime` の値が `0` でない場合はその値を返し、そうでない場合はこの項目の `loadTime` の値を返します。

このインターフェイスは以下のプロパティにも対応しています。

`PerformanceElementTiming.element` 読取専用  
Experimental

情報を返す要素を表す `Element` です。

`PerformanceElementTiming.id` 読取専用  
Experimental

要素の `id` である文字列です。

`PerformanceElementTiming.identifier` 読取専用  
Experimental

要素の `elementtiming` 属性の値である文字列です。

`PerformanceElementTiming.intersectionRect` 読取専用  
Experimental

ビューポート内の要素の矩形である `DOMRectReadOnly` です。

`PerformanceElementTiming.loadTime` 読取専用  
Experimental

要素の読み込み時間を持つ `DOMHighResTimeStamp` です。

`PerformanceElementTiming.naturalHeight` 読取専用  
Experimental

符号なし 32 ビット整数 (unsigned long) で、これが画像に適用されているときは画像の内在的な高さを表し、テキストのときは 0 です。

`PerformanceElementTiming.naturalWidth` 読取専用  
Experimental

符号なし 32 ビット整数 (unsigned long) で、これが画像に適用されているときは画像の内在的な幅を表し、テキストのときは 0 です。

`PerformanceElementTiming.renderTime` 読取専用  
Experimental

要素の描画時間を持つ `DOMHighResTimeStamp` です。

`PerformanceElementTiming.url` 読取専用  
Experimental

画像の場合はリソースをリクエストする初期 URL となる文字列です。テキストの場合は 0 です。

インスタンスメソッド
----------

`PerformanceElementTiming.toJSON()` 
Experimental

`PerformanceElementTiming` オブジェクトを JSON で返します。

例
-

### 固有の要素のレンダリング時間の監視

この例では、 `elementtiming` 属性を追加することで、 2 つの要素を監視しています。 `PerformanceObserver` は `"element"` 型のパフォーマンス項目をすべて取得するために登録され、 `buffered` フラグを使用してオブザーバー作成前のデータにアクセスしています。


```html
<img src="image.jpg" elementtiming="big-image" />
<p elementtiming="text" id="text-id">text here</p>
```



```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(entry);
  });
});
observer.observe({ type: "element", buffered: true });
```


2 つの項目がコンソールに出力されます。最初の項目は画像の詳細を格納し、 2 つ目はテキストノードの詳細を格納します。

仕様書
---

| Specification |
| --- |
| Element Timing API # sec-performance-element-timing |

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

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

関連情報
----

* `elementtiming` HTML 属性
StylePropertyMap
================

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

**`StylePropertyMap`** は CSS 型付きオブジェクトモデル API のインターフェイスで、`CSSStyleDeclaration` に代わる CSS 宣言ブロックの表現を提供するものです。

StylePropertyMapReadOnly

StylePropertyMapインスタンスプロパティ
-----------

*親である `StylePropertyMapReadOnly` からプロパティを継承しています。*

インスタンスメソッド
----------

*親である `StylePropertyMapReadOnly` からメソッドを継承しています。*

`StylePropertyMap.append()` 
Experimental

指定されたプロパティと値を持つ新しい CSS 宣言を `StylePropertyMap` に追加します。

`StylePropertyMap.clear()` 
Experimental

`StylePropertyMap` 内のすべての宣言を削除します。

`StylePropertyMap.delete()` 
Experimental

指定されたプロパティを持つ CSS 宣言を削除します。

`StylePropertyMap.set()` 
Experimental

指定されたプロパティを持つ CSS 宣言を変更します。

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # the-stylepropertymap |

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

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