recursal/MDN huggingface dataset:
DataTransferItemList.remove()
=============================

**`DataTransferItemList.remove()`** メソッドは指定された位置の `DataTransferItem` をリストから削除します。位置が 0 より小さいか、リストの長さより 1 だけ小さい値より大きい場合、リストは変更されません。

構文
--


```js
remove(index)
```

### 引数

`index`

削除するドラッグデータリストの項目の、0 から始まる位置です。 `index` がリスト内の既存の項目と一致しない場合は、リストが変更されずに残ります。

### 返値

なし (`undefined`)。

### 例外

`InvalidStateError` `DOMException`

ドラッグデータストアが読み取り/書き込みモードでないため、アイテムを削除できない場合に発生します。

例
-

### 要素のドラッグ & ドロップ

この例では、`remove()` メソッドを使用しています。

#### HTML


```html
<div>
  <p id="source" draggable="true">
    Select this element, drag it to the Drop Zone and then release the selection
    to move the element.
  </p>
</div>
<div id="target">Drop Zone</div>
```


#### CSS


```css
div {
  margin: 0em;
  padding: 2em;
}

#source {
  color: blue;
  border: 1px solid black;
}

#target {
  border: 1px solid black;
}
```


#### JavaScript


```js
function dragstart\_handler(ev) {
  console.log("dragStart");
  // Add this element's id to the drag payload so the drop handler will
  // know which element to add to its tree
  const dataList = ev.dataTransfer.items;
  dataList.add(ev.target.id, "text/plain");
  // Add some other items to the drag payload
  dataList.add("<p>Paragraph…</p>", "text/html");
  dataList.add("http://www.example.org", "text/uri-list");
}

function drop\_handler(ev) {
  console.log("Drop");
  ev.preventDefault();
  const data = event.dataTransfer.items;
  // Loop through the dropped items and log their data
  for (const item of data) {
    if (item.kind === "string" && item.type.match("^text/plain")) {
      // This item is the target node
      item.getAsString((s) => {
        ev.target.appendChild(document.getElementById(s));
      });
    } else if (item.kind === "string" && item.type.match("^text/html")) {
      // Drag data item is HTML
      item.getAsString((s) => {
        console.log(`… Drop: HTML = ${s}`);
      });
    } else if (item.kind === "string" && item.type.match("^text/uri-list")) {
      // Drag data item is URI
      item.getAsString((s) => {
        console.log(`… Drop: URI = ${s}`);
      });
    }
  }
}

function dragover\_handler(ev) {
  console.log("dragOver");
  ev.preventDefault();
  // Set the dropEffect to move
  ev.dataTransfer.dropEffect = "move";
}

function dragend\_handler(ev) {
  console.log("dragEnd");
  const dataList = ev.dataTransfer.items;
  // Clear all the files. Iterate in reverse order to safely remove.
  for (let i = dataList.length - 1; i >= 0; i--) {
    if (dataList[i].kind === "file") {
      dataList.remove(i);
    }
  }
  // Clear any remaining drag data
  dataList.clear();
}

const source = document.querySelector("#source");
source.addEventListener("dragstart", dragstart_handler);
source.addEventListener("dragend", dragend_handler);

const target = document.querySelector("#target");
target.addEventListener("drop", drop_handler);
target.addEventListener("dragover", dragover_handler);
```


#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-datatransferitemlist-remove-dev |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
DataTransferItemList.clear()
============================

`DataTransferItemList` の **`clear()`** メソッドは、ドラッグデータアイテムリストからすべての `DataTransferItem` オブジェクトを削除し、リストを空にします。

このリストが保持されるドラッグデータストアは、 `dragstart` イベントの処理中にのみ書き込み可能になります。 `drop` を処理する間、ドラッグデータストアは読み取り専用モードであり、このメソッドは何もしません。例外も投げません。

構文
--


```js
clear()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

この例は `clear()` メソッドの使い方を示します。

### HTML


```html
<div>
  <p
 id="source"
 ondragstart="dragstartHandler(event);"
 ondragend="dragendHandler(event);"
 draggable="true">
    Select this element, drag it to the Drop Zone and then release the selection
    to move the element.
  </p>
</div>
<div
 id="target"
 ondrop="dropHandler(event);"
 ondragover="dragoverHandler(event);">
  Drop Zone
</div>
```

### CSS


```css
div {
  margin: 0em;
  padding: 2em;
}
#source {
  color: blue;
  border: 1px solid black;
}
#target {
  border: 1px solid black;
}
```

### JavaScript


```js
function dragstartHandler(ev) {
  console.log("dragStart");

  // Add this element's id to the drag payload so the drop handler will
  // know which element to add to its tree
  const dataList = ev.dataTransfer.items;
  dataList.add(ev.target.id, "text/plain");
}

function dropHandler(ev) {
  console.log("Drop");
  ev.preventDefault();

  // Loop through the dropped items and log their data
  for (const item of ev.dataTransfer.items) {
    if (item.kind === "string" && item.type.match(/^text\/plain/)) {
      // This item is the target node
      item.getAsString((s) => {
        ev.target.appendChild(document.getElementById(s));
      });
    } else if (item.kind === "string" && item.type.match(/^text\/html/)) {
      // Drag data item is HTML
      item.getAsString((s) => {
        console.log(`… Drop: HTML = ${s}`);
      });
    } else if (item.kind === "string" && item.type.match(/^text\/uri-list/)) {
      // Drag data item is URI
      item.getAsString((s) => {
        console.log(`… Drop: URI = ${s}`);
      });
    }
  }
}

function dragoverHandler(ev) {
  console.log("dragOver");
  ev.preventDefault();

  // Set the dropEffect to move
  ev.dataTransfer.dropEffect = "move";
}

function dragendHandler(ev) {
  console.log("dragEnd");
  const dataList = ev.dataTransfer.items;

  // Clear any remaining drag data
  dataList.clear();
}
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-datatransferitemlist-clear-dev |

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

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

**`length`** は `DataTransferItemList` インターフェイスの読み取り専用プロパティで、ドラッグアイテムリストの中に現在入っているアイテムの数を返します。

値
-

リスト中のドラッグデータアイテムの数で、もしリストが空か無効であれば 0 です。アイテムリストの `DataTransfer` オブジェクトがドラッグデータストアに関連付けられていない場合は、ドラッグアイテムリストは無効とみなされます。

例
-

この例は `length` プロパティの使い方を示しています。

### JavaScript


```js
function dragstart\_handler(ev) {
  console.log("dragStart");
  // Add this element's id to the drag payload so the drop handler will
  // know which element to add to its tree
  const dataList = ev.dataTransfer.items;
  dataList.add(ev.target.id, "text/plain");
  // Add some other items to the drag payload
  dataList.add("<p>Paragraph…</p>", "text/html");
  dataList.add("http://www.example.org", "text/uri-list");
}

function drop\_handler(ev) {
  console.log("Drop");
  ev.preventDefault();
  const data = ev.dataTransfer.items;
  // Loop through the dropped items and log their data
  for (let i = 0; i < data.length; i++) {
    if (data[i].kind === "string" && data[i].type.match("^text/plain")) {
      // This item is the target node
      data[i].getAsString((s) => {
        ev.target.appendChild(document.getElementById(s));
      });
    } else if (data[i].kind === "string" && data[i].type.match("^text/html")) {
      // Drag data item is HTML
      data[i].getAsString((s) => {
        console.log(`… Drop: HTML = ${s}`);
      });
    } else if (
      data[i].kind === "string" &&
      data[i].type.match("^text/uri-list")
    ) {
      // Drag data item is URI
      data[i].getAsString((s) => {
        console.log(`… Drop: URI = ${s}`);
      });
    }
  }
}

function dragover\_handler(ev) {
  console.log("dragOver");
  ev.preventDefault();
  // Set the dropEffect to move
  ev.dataTransfer.dropEffect = "move";
}

function dragend\_handler(ev) {
  console.log("dragEnd");
  const dataList = ev.dataTransfer.items;
  // Clear any remaining drag data
  dataList.clear();
}
```

### HTML


```html
<div>
  <p
 id="source"
 ondragstart="dragstart\_handler(event);"
 ondragend="dragend\_handler(event);"
 draggable="true">
    Select this element, drag it to the Drop Zone and then release the selection
    to move the element.
  </p>
</div>
<div
 id="target"
 ondrop="drop\_handler(event);"
 ondragover="dragover\_handler(event);">
  Drop Zone
</div>
```

### CSS


```css
div {
  margin: 0em;
  padding: 2em;
}

#source {
  color: blue;
  border: 1px solid black;
}

#target {
  border: 1px solid black;
}
```

### 結果

仕様書
---

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Magnetometer: z プロパティ
=====================

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

`Magnetometer` インターフェイスの読み取り専用プロパティ **`z`** は、デバイスの z 軸方向の磁場を表す数値を返します。

値
-

`Number` です。

例
-

磁場は通常 `reading` イベントコールバックで取得します。以下の例では、これを 1 秒に 60 回行います。


```js
let magSensor = new Magnetometer({ frequency: 60 });

magSensor.addEventListener("reading", (e) => {
  console.log(`X 軸方向の磁場 ${magSensor.x}`);
  console.log(`Y 軸方向の磁場 ${magSensor.y}`);
  console.log(`Z 軸方向の磁場 ${magSensor.z}`);
});
magSensor.start();
```

仕様書
---

| Specification |
| --- |
| Magnetometer # magnetometer-z |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Magnetometer: x プロパティ
=====================

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

`Magnetometer` インターフェイスの読み取り専用プロパティ **`x`** は、デバイスの x 軸方向の磁場を表す数値を返します。

値
-

`Number` です。

例
-

磁場は通常 `reading` イベントコールバックで取得します。以下の例では、これを 1 秒に 60 回行います。


```js
let magSensor = new Magnetometer({ frequency: 60 });

magSensor.addEventListener("reading", (e) => {
  console.log(`X 軸方向の磁場 ${magSensor.x}`);
  console.log(`Y 軸方向の磁場 ${magSensor.y}`);
  console.log(`Z 軸方向の磁場 ${magSensor.z}`);
});
magSensor.start();
```

仕様書
---

| Specification |
| --- |
| Magnetometer # magnetometer-x |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Magnetometer: Magnetometer() コンストラクター
=====================================

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

**`Magnetometer()`** コンストラクターは、デバイスのプライマリー磁気センサーで検出される磁場の情報を返す新しい `Magnetometer` オブジェクトを生成します。

構文
--


```js
new Magnetometer()
new Magnetometer(options)
```

### 引数

`options` 省略可

以下のオプションがあります。

`frequency`

1 秒間にサンプルを何回取得したいかであり、`reading` イベントが呼ばれる 1 秒あたりの回数になります。整数または小数が使用でき、小数は 1 秒に 1 回未満の頻度を設定するのに用います。実際の取得頻度はデバイスハードウェアに依存するので、要求値より少なくなる可能性があります。

`referenceFrame`

`'device'` または `'screen'` です。デフォルトは `'device'` です。


### 例外

`SecurityError` `DOMException`

この機能の使用が Permissions Policy によりブロックされました。

仕様書
---

| Specification |
| --- |
| Magnetometer # dom-magnetometer-magnetometer |

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

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

関連情報
----

* `reading` イベント
Magnetometer: y プロパティ
=====================

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

`Magnetometer` インターフェイスの読み取り専用プロパティ **`y`** は、デバイスの y 軸方向の磁場を表す数値を返します。

値
-

`Number` です。

例
-

磁場は通常 `reading` イベントコールバックで取得します。以下の例では、これを 1 秒に 60 回行います。


```js
let magSensor = new Magnetometer({ frequency: 60 });

magSensor.addEventListener("reading", (e) => {
  console.log(`X 軸方向の磁場 ${magSensor.x}`);
  console.log(`Y 軸方向の磁場 ${magSensor.y}`);
  console.log(`Z 軸方向の磁場 ${magSensor.z}`);
});
magSensor.start();
```

仕様書
---

| Specification |
| --- |
| Magnetometer # magnetometer-y |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
AudioWorkletGlobalScope: currentTime プロパティ
==========================================

`AudioWorkletGlobalScope` インターフェイスの読み取り専用プロパティ **`currentTime`** は、処理中の音声ブロックのコンテキスト時刻を表す単調増加の `double` 値を返します。これはワークレットが属している `BaseAudioContext` の `currentTime` プロパティと同じ値です。

値
-

時刻を表す浮動小数点数です。

例
-

この `AudioWorkletProcessor` は `AudioWorkletGlobalScope` の特定のプロパティにアクセスできます。


```js
// test-processor.js で定義された AudioWorkletProcessor
class TestProcessor extends AudioWorkletProcessor {
  constructor() {
    super();

    // 生成時のサンプルフレームと時刻を記録する。
    // これらの値には AudioWorkletGlobalScope からアクセスできる。
    console.log(currentFrame);
    console.log(currentTime);
  }

  // process メソッドは必須である。
  // (最初から入っている) 無音を出力する。
  process(inputs, outputs, parameters) {
    return true;
  }
}

// サンプルレートを記録する。
// これは BaseAudioContext の読み取り専用プロパティであり、
// 生成時にのみ設定されるので、変化しない。
console.log(sampleRate);

// 任意の変数を宣言し、処理器で利用できる。
// たとえば、波形テーブルが入った ArrayBuffer を宣言できる。
const usefulVariable = 42;
console.log(usefulVariable);

registerProcessor("test-processor", TestProcessor);
```


メインスクリプトでは処理器をロードし、処理器の名前を渡して `AudioWorkletNode` のインスタンスを生成し、そのノードを音声グラフに接続します。`console.log()` の呼び出しによる出力がコンソールに出るはずです。


```js
const audioContext = new AudioContext();
await audioContext.audioWorklet.addModule("test-processor.js");
const testNode = new AudioWorkletNode(audioContext, "test-processor");
testNode.connect(audioContext.destination);
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audioworkletglobalscope-currenttime |

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

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

関連情報
----

* ウェブオーディオ API
* Web Audio API の使用
AudioWorkletGlobalScope: sampleRate プロパティ
=========================================

`AudioWorkletGlobalScope` インターフェイスの読み取り専用プロパティ **`sampleRate`** は、ワークレットが属する `BaseAudioContext` のサンプルレートを表す `float` 値を返します。

値
-

関連付けられたサンプルレートを表す浮動小数点数です。

例
-

この `AudioWorkletProcessor` は `AudioWorkletGlobalScope` の特定のプロパティにアクセスできます。


```js
// test-processor.js で定義された AudioWorkletProcessor
class TestProcessor extends AudioWorkletProcessor {
  constructor() {
    super();

    // 生成時のサンプルフレームと時刻を記録する。
    // これらの値には AudioWorkletGlobalScope からアクセスできる。
    console.log(currentFrame);
    console.log(currentTime);
  }

  // process メソッドは必須である。
  // (最初から入っている) 無音を出力する。
  process(inputs, outputs, parameters) {
    return true;
  }
}

// サンプルレートを記録する。
// これは BaseAudioContext の読み取り専用プロパティであり、
// 生成時にのみ設定されるので、変化しない。
console.log(sampleRate);

// 任意の変数を宣言し、処理器で利用できる。
// たとえば、波形テーブルが入った ArrayBuffer を宣言できる。
const usefulVariable = 42;
console.log(usefulVariable);

registerProcessor("test-processor", TestProcessor);
```


メインスクリプトでは処理器をロードし、処理器の名前を渡して `AudioWorkletNode` のインスタンスを生成し、そのノードを音声グラフに接続します。`console.log()` の呼び出しによる出力がコンソールに出るはずです。


```js
const audioContext = new AudioContext();
await audioContext.audioWorklet.addModule("test-processor.js");
const testNode = new AudioWorkletNode(audioContext, "test-processor");
testNode.connect(audioContext.destination);
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audioworkletglobalscope-samplerate |

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

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

関連情報
----

* ウェブオーディオ API
* Web Audio API の使用
AudioWorkletGlobalScope: currentFrame プロパティ
===========================================

`AudioWorkletGlobalScope` インターフェイスの読み取り専用プロパティ **`currentFrame`** は、処理中の音声ブロックのサンプルフレームを表す単調増加の整数を返します。この値は各音声ブロックを処理するごとに 128 (render quantum のサイズ) 増えます。

値
-

整数値です。

例
-

この `AudioWorkletProcessor` は `AudioWorkletGlobalScope` の特定のプロパティにアクセスできます。


```js
// test-processor.js で定義された AudioWorkletProcessor
class TestProcessor extends AudioWorkletProcessor {
  constructor() {
    super();

    // 生成時のサンプルフレームと時刻を記録する。
    // これらの値には AudioWorkletGlobalScope からアクセスできる。
    console.log(currentFrame);
    console.log(currentTime);
  }

  // process メソッドは必須である。
  // (最初から入っている) 無音を出力する。
  process(inputs, outputs, parameters) {
    return true;
  }
}

// サンプルレートを記録する。
// これは BaseAudioContext の読み取り専用プロパティであり、
// 生成時にのみ設定されるので、変化しない。
console.log(sampleRate);

// 任意の変数を宣言し、処理器で利用できる。
// たとえば、波形テーブルが入った ArrayBuffer を宣言できる。
const usefulVariable = 42;
console.log(usefulVariable);

registerProcessor("test-processor", TestProcessor);
```


メインスクリプトでは処理器をロードし、処理器の名前を渡して `AudioWorkletNode` のインスタンスを生成し、そのノードを音声グラフに接続します。`console.log()` の呼び出しによる出力がコンソールに出るはずです。


```js
const audioContext = new AudioContext();
await audioContext.audioWorklet.addModule("test-processor.js");
const testNode = new AudioWorkletNode(audioContext, "test-processor");
testNode.connect(audioContext.destination);
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audioworkletglobalscope-currentframe |

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

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

関連情報
----

* ウェブオーディオ API
* Web Audio API の使用
AudioWorkletGlobalScope: registerProcessor() メソッド
=================================================

`AudioWorkletGlobalScope` インターフェイスの **`registerProcessor`** メソッドは、`AudioWorkletProcessor` インターフェイスから派生したクラスのコンストラクターを指定の `name` で登録します。

構文
--


```js
registerProcessor(name, processorCtor)
```

### 引数

`name`

処理器を登録する名前を表す文字列です。

`processorCtor`

`AudioWorkletProcessor` から派生したクラスのコンストラクターです。


**メモ:** 処理器を登録すると、キーと値のペア `{ name: constructor }` が内部で `AudioWorkletGlobalScope` に保存されます。登録した処理器をもとに `AudioWorkletNode` を生成するとき、`name` が参照されます。指定の名前によって新しい処理器が内部で生成され、新しいノードと関連付けられます。

### 返値

なし (`undefined`)

### 例外

`NotSupportedError` `DOMException`

以下のとき投げられます。

* `name` が空文字列のとき。
* 指定の `name` でコンストラクターが既に登録されているとき。
 同じ名前を 2 回登録することは許されません。

`TypeError`

以下のとき投げられます。

* `processorCtor` が呼び出し可能なコンストラクターではないとき。
* コンストラクターに `parameterDescriptors` プロパティが存在し、`AudioParamDescriptor` (en-US) ベースのオブジェクトの配列を返さなかったとき。

例
-

この例では、無音を出力する独自の `AudioWorkletNode` を作成します。

まず、独自の `AudioWorkletProcessor` を定義して登録する必要があります。これは別のファイルで行うことに注意してください。


```js
// test-processor.js
class TestProcessor extends AudioWorkletProcessor {
  process(inputs, outputs, parameters) {
    return true;
  }
}

registerProcessor("test-processor", TestProcessor);
```


次に、メインスクリプトファイルで処理器をロードし、`registerProcessor` を呼ぶときに用いた処理器の名前を渡して `AudioWorkletNode` のインスタンスを生成し、それを音声グラフに接続します。


```js
const audioContext = new AudioContext();
await audioContext.audioWorklet.addModule("test-processor.js");
const node = new AudioWorkletNode(audioContext, "test-processor");
node.connect(audioContext.destination);
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audioworkletglobalscope-registerprocessor |

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

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

関連情報
----

* Web Audio API の使用
AudioTrackList: removetrack イベント
================================

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

構文
--

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


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

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

イベント型
-----

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

Event

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

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

`track` 読取専用 

このイベントが参照している DOM track オブジェクト。 `null` でなければ、これは常にいずれかのメディアトラック型のオブジェクトになります。`AudioTrack`、`VideoTrack`、`TextTrack`) のいずれかです。

解説
--

### トリガー

`removetrack` イベントは、 `AudioTrackList` オブジェクトで表される音声トラックを持つメディア要素からトラックが取り外されるたびに呼び出されます。

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

### 用途

このイベントを使用して、新しい音声トラックが利用できるようになったことに反応することができます。例えば、新しい音声トラックをユーザーが選択できるように、 UI 要素を更新することができます。

例
-

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


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

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


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


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

videoElement.audioTracks.onremovetrack = (event) => {
  console.log(`Audio 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`
* `VideoTrackList` を対象としたこのイベント: `removetrack`
* `MediaStream` を対象としたこのイベント: `removetrack`
* メディアキャプチャおよびストリーム API
* WebRTC API
AudioTrackList: addtrack イベント
=============================

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

構文
--

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


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

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

イベント型
-----

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

Event

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

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

`track` 読取専用 

このイベントが参照している DOM track オブジェクト。 `null` でなければ、これは常にいずれかのメディアトラック型のオブジェクトになります。`AudioTrack`、`VideoTrack`、`TextTrack`) のいずれかです。

解説
--

### トリガー

 この `addtrack` イベントは、 `AudioTrackList` オブジェクトで表される音声トラックを持つメディア要素に新しいトラックが追加されるたびに呼び出されます。
 これは、メディアが最初に要素に装着されたとき、トラックが追加されたときに起こります。メディアリソース内のそれぞれの音声トラックに対して、 1 つの `addtrack` イベントが発生します。

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

### 用途

このイベントを使用して、新しい音声トラックが利用できるようになったことに反応することができます。例えば、新しい音声トラックをユーザーが選択できるように、 UI 要素を更新することができます。

例
-

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


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

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


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


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

videoElement.audioTracks.onaddtrack = (event) => {
  console.log(`Audio 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`
* `VideoTrackList` を対象としたこのイベント: `addtrack`
* `MediaStream` を対象としたこのイベント: `addtrack`
* メディアキャプチャおよびストリーム API
* WebRTC API
AudioTrackList.getTrackById()
=============================

**`AudioTrackList`** の **`getTrackById()`** メソッドは、指定された文字列と `id` が一致するトラックリストから最初の `AudioTrack` オブジェクトを返します。 ID 文字列がわかっていれば、これで特定のトラックを見つけることができます。

構文
--


```js
getTrackById(id)
```

### 引数

`id`

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

### 返値

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

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

例
-

この例は、映画をゲーム内のカットシーンまたは他の重要なセットのピースとして使用する架空のゲームを示唆しています。 各映画には、各キャラクターに 1 つの音声トラックがあり、音楽、効果音などにも 1 つの音声トラックがあります。 この関数により、ゲーム内の出来事に基づいて映画の演技を調整するために、ゲームは特定のキャラクターの音声を無効にすることができます。 キャラクターの対話が適切でない場合は、省略されます。 明らかにそれは作品を作るためにいくつかの巧妙なグラフィックデザインを必要とするでしょう、しかし...これは架空のゲームです。


```js
function disableCharacter(videoElem, characterName) {
  videoElem.audioTracks.getTrackById(characterName).enabled = false;
}
```


この短い関数は、`HTMLMediaElement.audioTracks` を使用して動画の音声トラックを含む `AudioTrackList` を取得し、それから `getTrackById()` を呼び出してキャラクターの名前を指定します。 結果としてトラックの音声は、その `enabled` フラグを `false` に設定することで無効になります。

仕様書
---

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

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

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

読み取り専用の **`AudioTrackList`** の **`length`** プロパティは、`AudioTrackList` 内の項目数を返します。 各項目は、メディア要素内の 1 つの音声トラックを表す `AudioTrack` です。 値 0 は、メディアに音声トラックがないことを示します。

値
-

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

例
-

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


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

if (videoElem.audioTracks) {
  numAudioTracks = videoElem.audioTracks.length;
}
```


このサンプルは、`AudioTrack` に対応していないブラウザーで失敗するのを避けるために、 `HTMLMediaElement.audioTracks` が定義されていることを確認していることに注意してください。

仕様書
---

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

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

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