recursal/MDN huggingface dataset:
AudioWorkletNode: parameters プロパティ
==================================

`AudioWorkletNode` インターフェイスの読み取り専用プロパティ **`parameters`** は、関連付けられた `AudioParamMap` を返します。これは `AudioParam` オブジェクトが入った `Map` のようなコレクションです。中身のオブジェクトは、用いる `AudioWorkletProcessor` の生成時に `parameterDescriptors` 静的ゲッターに沿って生成されます。

値
-

`AudioParam` のインスタンスを持つ `AudioParamMap` オブジェクトです。
 これらはデフォルトの `AudioNode` で行うのと同じ方法で自動化でき、計算された値は自分の `AudioWorkletProcessor` の `process` メソッドで使用できます。

例
-

独自の `AudioParam` の作成と使用のデモを行うため、`AudioWorkletNode` ページにある例を拡張します。このページでは、ホワイトノイズを出力する単純なノードを作成しました。ここでは、独自のゲインパラメーターを追加し、出力の音量を直接変えることができるようにします。(これは `GainNode` を用いてもできますが)

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

処理器を拡張し、静的な `parameterDescriptors` ゲッターを追加します。これは `AudioWorkletNode` のコンストラクター内部で `parameters` に生成した `AudioParam` オブジェクトを入れるのに用いられます。


```js
// white-noise-processor.js
class WhiteNoiseProcessor extends AudioWorkletProcessor {
  static get parameterDescriptors() {
    return [
      {
        name: "customGain",
        defaultValue: 1,
        minValue: 0,
        maxValue: 1,
        automationRate: "a-rate",
      },
    ];
  }

  process(inputs, outputs, parameters) {
    const output = outputs[0];
    output.forEach((channel) => {
      for (let i = 0; i < channel.length; i++) {
        channel[i] =
          (Math.random() \* 2 - 1) \*
          (parameters["customGain"].length > 1
            ? parameters["customGain"][i]
            : parameters["customGain"][0]);
        // メモ: パラメーターは 128 個の値の配列です。(128 サンプルのそれぞれについて 1 個ずつ)
        // ただし、現在自動処理がスケジュールされていない場合、
        // 128 サンプル全てで用いる値が 1 個だけ入っていることがあります。
      }
    });
    return true;
  }
}

registerProcessor("white-noise-processor", WhiteNoiseProcessor);
```


次に、メインスクリプトで処理器を読み込み、処理器の名前を渡して `AudioWorkletNode` のインスタンスを作成し、このノードを音声グラフに接続します。


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


すると、ノードのゲインをこのようにして変えることができます。


```js
const gainParam = whiteNoiseNode.parameters.get("customGain");
gainParam.setValueAtTime(0, audioContext.currentTime);
gainParam.linearRampToValueAtTime(0.5, audioContext.currentTime + 0.5);
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audioworkletnode-parameters |

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

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

関連情報
----

* ウェブオーディオ API
* Web Audio API の使用
MediaSource.duration
====================

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

`MediaSource` インターフェイスの **`duration`** プロパティは、現在表示されているメディアの期間（長さ）を取得および設定します。

構文
--
```

mediaSource.duration = 5.5; // 5.5 seconds

var myDuration = mediaSource.duration;
```

### 値

double 型。 秒単位の値が必要です。

### 例外

このプロパティに新しい値を設定すると、次の例外がスローされる場合があります。

| 例外 | 説明 |
| --- | --- |
| `InvalidAccessError` | 負、または `NaN` の期間値を設定しようとした。 |
| `InvalidStateError` | `MediaSource.readyState` が `open` と等しくないか、`MediaSource.sourceBuffers` の `SourceBuffer` オブジェクトの 1 つ以上が更新されています（つまり、`SourceBuffer.updating` プロパティが `true` です）。 |

例
-

次のスニペットは、Nick Desaulniers によって書かれた簡単な例に基づいています（ライブで完全なデモを見るか、ソースをダウンロードしてさらに調査してください）。


```js
function sourceOpen (\_) {
  //console.log(this.readyState); // open
  var mediaSource = this;
  var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
  fetchAB(assetURL, function (buf) {
    sourceBuffer.addEventListener('updateend', function (\_) {
      mediaSource.endOfStream();
      mediaSource.duration = 120;
      video.play();
      //console.log(mediaSource.readyState); // ended
    });
    sourceBuffer.appendBuffer(buf);
  });
};

...
```

仕様
--

| Specification |
| --- |
| Media Source Extensions™ # dom-mediasource-duration |

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

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

関連情報
----

* `SourceBuffer`
* `SourceBufferList`
MediaSource.activeSourceBuffers
===============================

`MediaSource` インターフェイスの **`activeSourceBuffers`** 読み取り専用プロパティは、`sourceBuffers` に含まれる `SourceBuffer` オブジェクトのサブセットを含む `SourceBufferList` オブジェクトを返します。 これは、選択した動画トラック、有効な音声トラック、および表示/非表示のテキストトラックを提供するオブジェクトのリストです。

構文
--
```

var myActiveSourceBuffers = mediaSource.activeSourceBuffers;
```

### 値

アクティブな各トラックの `SourceBuffer` オブジェクトを含む `SourceBufferList`。

例
-

次のスニペットは、Nick Desaulniers によって書かれた簡単な例に基づいています（ライブで完全なデモを見るか、ソースをダウンロードしてさらに調査してください）。


```js
function sourceOpen (\_) {
  //console.log(this.readyState); // open
  var mediaSource = this;
  var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
  fetchAB(assetURL, function (buf) {
    sourceBuffer.addEventListener('updateend', function (\_) {
      mediaSource.endOfStream();
      console.log(mediaSource.activeSourceBuffers);
      // 動画プレーヤーでの再生用に選択されているため、
      // 上記で追加されたソースバッファーが含まれます。
      video.play();
      //console.log(mediaSource.readyState); // ended
    });
    sourceBuffer.appendBuffer(buf);
  });
};

...
```

仕様
--

| Specification |
| --- |
| Media Source Extensions™ # dom-mediasource-activesourcebuffers |

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

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

関連情報
----

* `SourceBuffer`
* `SourceBufferList`
MediaSource.endOfStream()
=========================

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

`MediaSource` インターフェイスの **`endOfStream()`** メソッドは、ストリームの終わりを通知します。

構文
--
```

mediaSource.endOfStream(endOfStreamError);
```

### パラメーター

endOfStreamError 省略可

ストリームの終わりに達したときにスローするエラーを表す `DOMString`。 可能な値は次のとおりです。

* `network`: 再生を終了し、ネットワークエラーが発生したことを通知します。 これを使用して、メディアストリームに関連するカスタムエラーハンドラを作成できます。 例えば、他のネットワーク要求とは別に、メディアチャンク要求を処理する関数があるとします。 メディアチャンクに対して XMLHttpRequest 呼び出しを行い、`onabort` または `onerror` がトリガーされた場合、`endOfStream('network')` を呼び出し、UI に説明的なメッセージを表示し、ネットワーク要求をすぐに再試行するか、ネットワークが（何らかのポーリングを介して）復旧するまで待機できます。
* `decode`: 再生を終了し、デコードエラーが発生したことを通知します。 これは、メディアデータの取得中に解析エラーが発生したことを示すために使用できます。 データが破損しているか、ブラウザーがデコード方法を知らないコーデックを使用してエンコードされている可能性があります。

### 戻り値

`undefined`### 例外

| 例外 | 説明 |
| --- | --- |
| `InvalidStateError` | `MediaSource.readyState` が `open` と等しくないか、`MediaSource.sourceBuffers` の `SourceBuffer` オブジェクトの 1 つ以上が更新されています（つまり、`SourceBuffer.updating` プロパティが `true` です） |

例
-

次のスニペットは、Nick Desaulniers によって書かれた簡単な例からのものです（ライブで完全なデモを見るか、ソースをダウンロードしてさらに調査してください）。


```js
var assetURL = "frag\_bunny.mp4";
// Blink はコーデックに関して特定する必要がある
// ./mp4info frag\_bunny.mp4 | grep Codec
var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

if ("MediaSource" in window && MediaSource.isTypeSupported(mimeCodec)) {
  var mediaSource = new MediaSource();
  //console.log(mediaSource.readyState); // closed
  video.src = URL.createObjectURL(mediaSource);
  mediaSource.addEventListener("sourceopen", sourceOpen);
} else {
  console.error(
    "サポートされていない MIME タイプまたはコーデック: ",
    mimeCodec,
  );
}

function sourceOpen(\_) {
  //console.log(this.readyState); // open
  var mediaSource = this;
  var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
  fetchAB(assetURL, function (buf) {
    sourceBuffer.addEventListener("updateend", function (\_) {
      mediaSource.endOfStream();
      video.play();
      //console.log(mediaSource.readyState); // ended
    });
    sourceBuffer.appendBuffer(buf);
  });
}
```

仕様
--

| Specification |
| --- |
| Media Source Extensions™ # dom-mediasource-endofstream |

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

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

関連情報
----

* `SourceBuffer`
* `SourceBufferList`
MediaSource.readyState
======================

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

`MediaSource` インターフェイスの **`readyState`** 読み取り専用プロパティは、現在の `MediaSource` の状態を表す列挙を返します。 3 つの可能な値は次のとおりです。

* `closed`: ソースは現在メディア要素にアタッチされていません。
* `open`: ソースはメディア要素にアタッチされ、`SourceBuffer` オブジェクトを受信する準備ができています。
* `ended`: ソースはメディア要素にアタッチされていますが、`MediaSource.endOfStream()` の呼び出しを介してストリームが終了しています。
構文
--
```

var myReadyState = mediaSource.readyState;
```

### 値

`DOMString`。

例
-

次のスニペットは、Nick Desaulniers によって書かれた簡単な例からのものです（ライブで完全なデモを見るか、ソースをダウンロードしてさらに調査してください）。


```js
if ("MediaSource" in window && MediaSource.isTypeSupported(mimeCodec)) {
  var mediaSource = new MediaSource();
  //console.log(mediaSource.readyState); // closed
  video.src = URL.createObjectURL(mediaSource);
  mediaSource.addEventListener("sourceopen", sourceOpen);
} else {
  console.error(
    "サポートされていない MIME タイプまたはコーデック: ",
    mimeCodec,
  );
}

function sourceOpen(\_) {
  //console.log(this.readyState); // open
  var mediaSource = this;
  var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
  fetchAB(assetURL, function (buf) {
    sourceBuffer.addEventListener("updateend", function (\_) {
      mediaSource.endOfStream();
      video.play();
      //console.log(mediaSource.readyState); // ended
    });
    sourceBuffer.appendBuffer(buf);
  });
}
```

仕様
--

| Specification |
| --- |
| Media Source Extensions™ # dom-mediasource-readystate |

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

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

関連情報
----

* `SourceBuffer`
* `SourceBufferList`
MediaSource.MediaSource()
=========================

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

`MediaSource` インターフェイスの **`MediaSource()`** コンストラクタは、ソースバッファが関連付けられていない新しい `MediaSource` オブジェクトを構築して返します。

構文
--
```

var mediaSource = new MediaSource();
```

### パラメーター

なし。

例
-

次のスニペットは、Nick Desaulniers によって書かれた簡単な例から抜粋したものです（ライブで完全なデモを見るか、ソースをダウンロードしてさらに調査してください）。


```js
var video = document.querySelector('video');

var assetURL = 'frag\_bunny.mp4';
// Blink はコーデックに関して特定する必要がある
// ./mp4info frag\_bunny.mp4 | grep Codec
var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
  var mediaSource = new MediaSource;
  //console.log(mediaSource.readyState); // closed
  video.src = URL.createObjectURL(mediaSource);
  mediaSource.addEventListener('sourceopen', sourceOpen);
} else {
  console.error('サポートされていない MIME タイプまたはコーデック: ', mimeCodec);
}

...
```

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

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

関連情報
----

* `SourceBuffer`
* `SourceBufferList`
MediaSource.setLiveSeekableRange()
==================================

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

`MediaSource` インターフェイスの **`setLiveSeekableRange()`** メソッドは、ユーザーがメディア要素でシークできる範囲を設定します。

構文
--
```

mediaSource.setLiveSeekableRange(start, end)
```

### パラメーター

start

ソースの最初から測定された秒単位で設定するシーク可能な範囲の始まり。 メディアソースの期間が正の無限大である場合、`HTMLMediaElement.seekable` プロパティによって返される `TimeRanges` オブジェクトは、この値以下の開始タイムスタンプを持ちます。

end

ソースの最初から測定された秒単位で設定するシーク可能な範囲の終わり。 メディアソースの期間が正の無限大である場合、`HTMLMediaElement.seekable` プロパティによって返される `TimeRanges` オブジェクトは、この値以上の終了タイムスタンプを持ちます。

### 戻り値

`undefined`例
-


```js
// 未定
```

仕様
--

| Specification |
| --- |
| Media Source Extensions™ # dom-mediasource-setliveseekablerange |

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

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

**`MediaSource.isTypeSupported()`** 静的メソッドは、指定された MIME タイプが現在のユーザーエージェントによってサポートされる*可能性が高い*場合に `true` となる `Boolean` 値を返します。 つまり、その MIME タイプの `SourceBuffer` オブジェクトを正常に作成できる場合です。 返された値が `false` の場合、ユーザーエージェントは、指定された形式のメディアにアクセス*できない*と確信しています。

構文
--
```

var isItSupported = mediaSource.isTypeSupported(mimeType);
```

### パラメーター

`mimeType`

現在のブラウザーでのサポートをテストする MIME メディアタイプ。 これには、ファイル内で使用されるコーデックに関する追加の詳細を提供する `codecs` パラメーターが含まれる場合があります。

### 戻り値

指定されたタイプのメディアを*おそらく*再生できるとブラウザーが感じる場合に `true` になる `Boolean`。 ただし、これは保証*ではなく*、メディアが正しく再生されない可能性に備えてコードを準備する必要があります。 ただし、値 `false` は、指定されたタイプのメディアが再生*されない*ことを保証します。

メディアファイルで動作するすべての Web API は、メディアタイプを使用できるかどうかを判断するときに、「いいえ/多分/おそらく」アプローチ（または、この場合は「いいえまたはおそらく」）を使用します。 これは、メディアファイルが複雑で難解な構造であるため、実際にメディアのコンテンツを使用するまでは、微妙なバリエーションが多すぎて絶対に確実ではないためです。

例
-

次のスニペットは、Nick Desaulniers によって書かれた例からのものです（ライブで完全なデモを見るか、ソースをダウンロードしてさらに調査してください）。


```js
var assetURL = "frag\_bunny.mp4";
// Blink はコーデックに関して特定する必要がある
// ./mp4info frag\_bunny.mp4 | grep Codec
var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

if ("MediaSource" in window && MediaSource.isTypeSupported(mimeCodec)) {
  var mediaSource = new MediaSource();
  //console.log(mediaSource.readyState); // closed
  video.src = URL.createObjectURL(mediaSource);
  mediaSource.addEventListener("sourceopen", sourceOpen);
} else {
  console.error(
    "サポートされていない MIME タイプまたはコーデック: ",
    mimeCodec,
  );
}

function sourceOpen(\_) {
  //console.log(this.readyState); // open
  var mediaSource = this;
  var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
  fetchAB(assetURL, function (buf) {
    sourceBuffer.addEventListener("updateend", function (\_) {
      mediaSource.endOfStream();
      video.play();
      //console.log(mediaSource.readyState); // ended
    });
    sourceBuffer.appendBuffer(buf);
  });
}
```

仕様
--

| Specification |
| --- |
| Media Source Extensions™ # dom-mediasource-istypesupported |

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

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

関連情報
----

* Media Source Extensions API
* ウェブ上のメディアタイプとフォーマットのガイド
* 一般的なメディアタイプにおける "codecs" パラメーター (en-US)
* `SourceBuffer`
* `SourceBufferList`
MediaSource.clearLiveSeekableRange()
====================================

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

`MediaSource` インターフェイスの **`clearLiveSeekableRange()`** メソッドは、`setLiveSeekableRange()` の呼び出しで以前に設定されたシーク可能な範囲をクリアします。

構文
--
```

mediaSource.clearLiveSeekableRange()
```

### パラメーター

なし。

### 戻り値

`undefined`仕様
--

| Specification |
| --- |
| Media Source Extensions™ # dom-mediasource-clearliveseekablerange |

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

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

`MediaSource` インターフェイスの **`addSourceBuffer()`** メソッドは、指定された MIME タイプの新しい `SourceBuffer` を作成し、`MediaSource` の `sourceBuffers` リストに追加します。 新しい `SourceBuffer` も返されます。

構文
--
```

var sourceBuffer = mediaSource.addSourceBuffer(mimeType);
```

### パラメーター

`mimeType`

`MediaSource` に作成して追加する `SourceBuffer` の MIME タイプを指定する `DOMString`。

### 戻り値

作成され、メディアソースに追加された新しいソースバッファを表す `SourceBuffer` オブジェクト。

### 例外

`InvalidAccessError`

`mimeType` に指定された値は、有効な MIME タイプではなく空の文字列です。

`InvalidStateError`

`MediaSource` の `readyState` は `"open"` でありません。

`NotSupportedError`

指定された `mimeType` はユーザーエージェントでサポートされていないか、メディアソースの `sourceBuffers` リストに既に含まれている他の `SourceBuffer` オブジェクトの MIME タイプと互換性がありません。

`QuotaExceededError`

ユーザーエージェントはこれ以上 `SourceBuffer` オブジェクトを処理できないか、指定された `mimeType` を使用して新しい `SourceBuffer` を作成すると、SourceBuffer の構成がサポートされなくなります。

例
-

次のスニペットは、Nick Desaulniers によって書かれた簡単な例からのものです（ライブで完全なデモを見るか、ソースをダウンロードしてさらに調査してください）。


```js
var assetURL = "frag\_bunny.mp4";
// Blink はコーデックに関して特定する必要がある
// ./mp4info frag\_bunny.mp4 | grep Codec
var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

if ("MediaSource" in window && MediaSource.isTypeSupported(mimeCodec)) {
  var mediaSource = new MediaSource();
  //console.log(mediaSource.readyState); // closed
  video.src = URL.createObjectURL(mediaSource);
  mediaSource.addEventListener("sourceopen", sourceOpen);
} else {
  console.error(
    "サポートされていない MIME タイプまたはコーデック: ",
    mimeCodec,
  );
}

function sourceOpen(\_) {
  //console.log(this.readyState); // open
  var mediaSource = this;
  var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
  fetchAB(assetURL, function (buf) {
    sourceBuffer.addEventListener("updateend", function (\_) {
      mediaSource.endOfStream();
      video.play();
      //console.log(mediaSource.readyState); // ended
    });
    sourceBuffer.appendBuffer(buf);
  });
}
```

仕様
--

| Specification |
| --- |
| Media Source Extensions™ # dom-mediasource-addsourcebuffer |

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

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

関連情報
----

* `SourceBuffer`
* `SourceBufferList`
MediaSource.sourceBuffers
=========================

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

`MediaSource` インターフェイス の **`sourceBuffers`** 読み取り専用プロパティは、この `MediaSource` に関連付けられた `SourceBuffer` オブジェクトのリストを含む `SourceBufferList` オブジェクトを返します。

構文
--
```

var mySourceBuffers = mediaSource.sourceBuffers;
```

### 値

`SourceBufferList`。

例
-

次のスニペットは、Nick Desaulniers によって書かれた簡単な例に基づいています（ライブで完全なデモを見るか、ソースをダウンロードしてさらに調査してください）。


```js
function sourceOpen (\_) {
  //console.log(this.readyState); // open
  var mediaSource = this;
  var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
  fetchAB(assetURL, function (buf) {
    sourceBuffer.addEventListener('updateend', function (\_) {
      mediaSource.endOfStream();
      console.log(mediaSource.sourceBuffers); // 上で追加されたソースバッファが含まれます
      video.play();
      //console.log(mediaSource.readyState); // ended
    });
    sourceBuffer.appendBuffer(buf);
  });
};

...
```

仕様
--

| Specification |
| --- |
| Media Source Extensions™ # dom-mediasource-sourcebuffers |

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

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

関連情報
----

* `SourceBuffer`
* `SourceBufferList`
MediaSource.removeSourceBuffer()
================================

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

`MediaSource` インターフェイスの **`removeSourceBuffer()`** メソッドは、この `MediaSource` オブジェクトに関連付けられた `SourceBuffers` リストから指定された `SourceBuffer` を削除します。

構文
--
```

mediaSource.removeSourceBuffer(sourceBuffer);
```

### パラメーター

sourceBuffer

削除する `SourceBuffer` オブジェクト。

### 戻り値

`undefined`### 例外

| 例外 | 説明 |
| --- | --- |
| `NotFoundError` | 指定された sourceBuffer は `MediaSource.sourceBuffers` に存在しません。 |

例
-


```js
for (i = 0; i < 10; i++) {
  var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
}

mediaSource.removeSourceBuffer(mediaSource.sourceBuffers[0]);
```

仕様
--

| Specification |
| --- |
| Media Source Extensions™ # dom-mediasource-removesourcebuffer |

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

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

関連情報
----

* `SourceBuffer`
* `SourceBufferList`
NetworkInformation.type
=======================

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

**`NetworkInformation.type`** は読み取り専用プロパティで、端末がネットワーク通信に使用している接続の種類を返します。

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

### 値

次の値のいずれかである列挙値です。

* `"bluetooth"`
* `"cellular"`
* `"ethernet"`
* `"none`"
* `"wifi"`
* `"wimax"`
* `"other"`
* `"unknown"`
仕様書
---

| Specification |
| --- |
| Network Information API # dom-networkinformation-type |

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

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

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

**`NetworkInformation.rtt`** は読み取り専用のプロパティで、現在の接続の推定有効ラウンドトリップ時間を、25 ミリ秒の倍数に丸めた値で返します。この値は、最近アクティブになった接続のアプリケーション層の RTT 測定値に基づいています。プライベートアドレス空間への接続は除外されます。最近の測定データが利用できない場合、この値は基盤となる接続技術のプロパティに基づきます。

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

値
-

数値です。

仕様書
---

| Specification |
| --- |
| Network Information API # dom-networkinformation-rtt |

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

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

関連情報
----

* `RTT` (en-US)
NetworkInformation.downlinkMax
==============================

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

**`NetworkInformation.downlinkMax`** は読み取り専用プロパティで、メガビット毎秒 (Mbps) 単位で、基盤となる接続技術の最大下り速度を返します。

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

### 値

基盤となる接続技術の最大下り速度をメガビット毎秒 (Mb/s) で表した `unrestricted double` です。

例
-

次の例は、`change` イベントで接続をモニターして、発生した変更をロギングしています。


```js
function logConnectionType() {
  let connectionType = "not supported";
  let downlinkMax = "not supported";

  if ("connection" in navigator) {
    connectionType = navigator.connection.effectiveType;

    if ("downlinkMax" in navigator.connection) {
      downlinkMax = navigator.connection.downlinkMax;
    }
  }

  console.log(
    `Current connection type: ${connectionType} (downlink max: ${downlinkMax})`,
  );
}

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

仕様書
---

| Specification |
| --- |
| Network Information API # dom-networkinformation-downlinkmax |

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

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

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

**`downlink`** は `NetworkInformation` インターフェイスの読み取り専用プロパティで、実効帯域幅の推定値をメガビット毎秒で返し、25キロビット毎秒の最も近い倍数に丸めます。この値は、プライベートアドレス空間への接続を除き、最近アクティブになった接続で最近観測されたアプリケーション層のスループットに基づきます。最近の帯域幅測定データがない場合、属性の値は、基礎となる接続技術のプロパティによって決定されます。

値
-

数値です。

仕様書
---

| Specification |
| --- |
| Network Information API # dom-networkinformation-downlink |

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

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

関連情報
----

* `Downlink` (en-US)
NetworkInformation.effectiveType
================================

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

**`effectiveType`** は `NetworkInformation` インターフェイスの読み取り専用プロパティで、
 このプロパティは、 'slow-2g', '2g', '3g', '4g' のいずれかを意味する接続の有効な種類を返します。この値は、最近観測された、ラウンドトリップ時間とダウンリンク値の組合せを使用して決定されます。

値
-

'slow-2g', '2g', '3g', '4g' の何れかの文字列です。

仕様書
---

| Specification |
| --- |
| Network Information API # dom-networkinformation-effectivetype |

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

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

関連情報
----

* 有効接続種別
* `ECT` (en-US)
NetworkInformation.saveData
===========================

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

**`NetworkInformation.saveData`** は `NetworkInformation` の読み取り専用プロパティで、ユーザーがユーザーエージェントにデータ使用量削減オプションを設定している場合、 `true` を返します。

値
-

論理値です。

仕様書
---

| Specification |
| --- |
| Save Data API # dfn-savedata |

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

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

関連情報
----

* `Save-Data` (en-US)
NetworkInformation: change イベント
===============================

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

**`change`** イベントは、接続情報が変更されたときに発行され、 `NetworkInformation` オブジェクトで受信されます。

構文
--

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


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

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

イベント型
-----

一般的な `Event` です。

例
-


```js
// 接続型の取得
const type = navigator.connection.type;

function changeHandler(e) {
  // ここで接続型の変更を操作する
}

// change イベントの登録
navigator.connection.onchange = changeHandler;

// 他の方法: navigator.connection.addEventListener('change', changeHandler);
```

仕様書
---

| Specification |
| --- |
| Network Information API # dom-networkinformation-onchange |

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

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

**`keyText`** は `CSSKeyframeRule` インターフェイスのプロパティで、キーフレーム セレクターをパーセント値のカンマ区切りリストで表します。from と to キーワードは、それぞれ 0% と 100% に割り当てられます。

値
-

文字列です。

### 例外

`SyntaxError`

`keyText` が無効なキーフレームセレクターに更新された場合に発生します。

例
-

 この CSS には keyframes アットルールが記載されています。これは最初の `CSSRule` であり、 `document.styleSheets[0].cssRules` で返されます。
 `myRules[0]` は `CSSKeyframesRule` オブジェクトを返し、その中に各キーフレームに対応する個々の `CSSKeyFrame` オブジェクトが格納されます。


```css
@keyframes slidein {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}
```



```js
let myRules = document.styleSheets[0].cssRules;
let keyframes = myRules[0]; // a CSSKeyframesRule
console.log(keyframes[0].keyText); // a string containing 0%
```

仕様書
---

| Specification |
| --- |
| CSS Animations Level 1 # dom-csskeyframerule-keytext |

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

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