BaseAudioContext.createChannelSplitter() - Web API

BaseAudioContext.createChannelSplitter()
========================================

`createChannelSplitter()` は `BaseAudioContext` インターフェイスのメソッドで、 `ChannelSplitterNode` を作成します。これは音声ストリームの個々のチャンネルにアクセスし、それらを個別に処理するために使用されます。

**メモ:** `ChannelSplitterNode()` コンストラクターは `ChannelSplitterNode` を作成するための推奨される方法です。 AudioNode の作成を参照してください。

構文
--

```js
createChannelSplitter(numberOfOutputs);
```

### 引数

numberOfOutputs

入力オーディオストリームのうち、個別に出力したいチャンネル数です。この引数が指定されていない場合の既定値は 6 です。

### 返値

`ChannelSplitterNode` です。

例
-

次の単純な例では、ステレオトラック（例えば音楽）を分離し、左チャンネルと右チャンネルを別々に処理する方法を示しています。これを使うには、 `AudioNode.connect(AudioNode)` メソッドの第 2、第 3 引数を使って、接続元のチャンネルのインデックスと接続先のチャンネルのインデックスを指定することが必要です。

```js
var ac = new AudioContext();
ac.decodeAudioData(someStereoBuffer, function (data) {
  var source = ac.createBufferSource();
  source.buffer = data;
  var splitter = ac.createChannelSplitter(2);
  source.connect(splitter);
  var merger = ac.createChannelMerger(2);

  // 左チャンネルのボリュームのみ小さくする
  var gainNode = ac.createGain();
  gainNode.gain.setValueAtTime(0.5, ac.currentTime);
  splitter.connect(gainNode, 0);

  // スプリッターをマージャーの 2 番目の入力に接続すると、チャンネルが効果的に交換され、
  // ステレオイメージが反転します。
  gainNode.connect(merger, 0, 1);
  splitter.connect(merger, 1, 0);

  var dest = ac.createMediaStreamDestination();

  // ChannelMergerNode を使っているので、ステレオの MediaStream が
  // できました。これでウェブオーディオグラフを WebRTC や MediaRecorder などに
  // パイプするのに使えます。
  merger.connect(dest);
});
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-baseaudiocontext-createchannelsplitter |

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

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

関連情報
----

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


BaseAudioContext.createConstantSource() - Web API

BaseAudioContext.createConstantSource()
=======================================

**`createConstantSource()`** は `BaseAudioContext` インターフェイスのプロパティで、 `ConstantSourceNode` オブジェクトを作成します。これはサンプル数がすべて同じ値のモノラル（1 チャンネル）音声信号を連続的に出力する音声ソースです。

**メモ:** `ConstantSourceNode()` コンストラクターは `ConstantSourceNode` を作成するための推奨される方法です。 AudioNode の作成を参照してください。

構文
--

```js
createConstantSource();
```

### 引数

なし。

### 返値

`ConstantSourceNode` のインスタンスです。

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-baseaudiocontext-createconstantsource |

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

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


BaseAudioContext: statechange イベント - Web API

BaseAudioContext: statechange イベント
==================================

`statechange` イベントは、 `BaseAudioContext` オブジェクトに対して `state` メンバーが変化したときに発生します。

構文
--

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

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

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

イベント型
-----

一般的な `Event` です。

例
-

次のスニペットは AudioContext states のデモ（ライブ実行を確認）の一部です。 `onstatechange` ハンドラーは現在の `state` を、変化するたびにコンソールへログ出力します。

```js
audioCtx.onstatechange = function () {
  console.log(audioCtx.state);
};
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-baseaudiocontext-onstatechange |

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

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

関連情報
----

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


BaseAudioContext.createBuffer() - Web API

BaseAudioContext.createBuffer()
===============================

`createBuffer()` は `BaseAudioContext` インターフェイスのメソッドで、新しい空の `AudioBuffer` オブジェクトを生成するために使用されます。このオブジェクトにデータを代入し、`AudioBufferSourceNode` を介して再生することができます。

音声バッファーの詳細については、 `AudioBuffer` のリファレンスページを参照してください。

**メモ:** 以前は `createBuffer()` が圧縮されたデータを受け取り、デコードされたサンプルを返すことができましたが、デコードがすべてメインスレッドで行われるため `createBuffer()` が他のコードの実行をブロックするので、この機能は仕様書から削除されました。非同期メソッド `decodeAudioData()` は同じことをします。 MP3 ファイルのような圧縮された音声を受け取り、`AudioBuffer` を直接返します。そして `AudioBufferSourceNode` で再生することができるのです。 MP3 を再生するような単純な用途では、 `decodeAudioData()` を使用する必要があります。

構文
--

```js
createBuffer(numOfChannels, length, sampleRate);
```

### 引数

**メモ:** 音声バッファーの仕組みと、これらの引数の意味についての詳しい説明は、基本概念ガイドの音声バッファー：フレーム、サンプル、チャンネルに書かれています。

`numOfChannels`

整数で、このバッファーが持つべきチャンネル数を表します。既定値は 1 で、すべてのユーザエージェントは少なくとも 32 チャンネルに対応しなければなりません。

`length`

整数で、バッファーのサイズをサンプルフレーム単位で表します（各サンプルフレームは、バイト単位のサンプルのサイズに `numOfChannels` を掛けたものとなります）。特定の秒数の音声に使用する `length` を決定するには、 `numSeconds * sampleRate` を使用します。

`sampleRate`

線形音声データのサンプリングレート（1 秒あたりのサンプルフレーム数）です。すべてのブラウザーは、少なくとも 8,000Hz から 96,000Hz の範囲のサンプリングレートに対応する必要があります。

### 返値

指定されたオプションに基づいて構成された `AudioBuffer` です。

### 例外

`NotSupportedError` `DOMException`

1 つ以上のオプションが負の値であるか、あるいは無効な値である場合に発生します（例えば `numberOfChannels` が対応しているよりも大きいか、 `sampleRate` が公称範囲外である場合など）。

`RangeError`

バッファーを割り当てるのに十分なメモリーがない場合に発生します。

例
-

まず、引数の使い方を説明するために、簡単な例をいくつか挙げます。

```js
var audioCtx = new AudioContext();
var buffer = audioCtx.createBuffer(2, 22050, 44100);
```

この呼び出しを使用すると、ステレオバッファー（2 チャンネル）が得られ、 AudioContext が 44100Hz （とても一般的で、ほとんどの通常のサウンドカードはこのレートで動作します）で動作しているいる状態で再生すると、 0.5 秒間（22050 フレーム / 44100Hz = 0.5 秒）になります。

```js
var audioCtx = new AudioContext();
var buffer = audioCtx.createBuffer(1, 22050, 22050);
```

この呼び出しを使用した場合、モノラルバッファー（1 チャネル）が得られ、 AudioContext が 44100Hz で動作している状態で再生すると、自動的に\*リサンプル\*されて 44100Hz となり（すなわち 44100 フレームになる）、 1.0 秒間（44100 フレーム / 44100Hz = 1 秒）になります。

**メモ:** 音声のリサンプリングは、画像のリサイズにとても似ています。 16 x 16 の画像を持っていて、それを 32 x 32 の領域いっぱいにしたい場合、それをリサイズ（リサンプリング）します。結果は、（リサイズのアルゴリズムによっては、ぼやけたりエッジが立ったりして）品質が落ちますが、うまくいき、リサイズした画像はよりスペースが小さくなります。リサンプルされた音声も全く同じで、スペースは節約できますが、実際には高い周波数のコンテンツ（高音）を適切に再生することはできません。

次は少し複雑な `createBuffer()` の例を見てみましょう。 3 秒間のバッファーを生成し、ホワイトノイズを書き込み、 `AudioBufferSourceNode` で再生します。コメントでは、何が起こっているのかを明確に説明しています。 コードをライブで実行したり、ソースを表示したりすることができます。

```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++) {
  // データを格納した実際の ArrayBuffer が得られる．
  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 # dom-baseaudiocontext-createbuffer |

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

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

関連情報
----

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


BaseAudioContext.createDynamicsCompressor() - Web API

BaseAudioContext.createDynamicsCompressor()
===========================================

`createDynamicsCompressor()` は `BaseAudioContext` インターフェイスのメソッドで、 `DynamicsCompressorNode` (en-US) を生成します。これで、音声信号に圧縮をかけることができます。

圧縮は、信号の最も大きな部分の音量を下げ、最も小さな部分の音量を上げます。全体として、より大きく、より豊かで、充実したサウンドを実現することができます。特に、ゲームや音楽など、多数の音を同時に再生するアプリケーションでは、全体の信号レベルを制御し、音声出力のクリッピング（歪み）を回避するのに役立つので、重要です。

**メモ:** `DynamicsCompressorNode()` (en-US) コンストラクターは `DynamicsCompressorNode` (en-US) を作成するための推奨される方法です。 AudioNode の作成を参照してください。

構文
--

```js
createDynamicsCompressor();
```

### 引数

なし。

### 返値

`DynamicsCompressorNode` (en-US) です。

例
-

以下のコードは、音声トラックに圧縮を加えるための `createDynamicsCompressor()` の簡単な使用法を示しています。より完全な例としては、基本的なコンプレッサーの例（ソースコードを閲覧）をご覧ください。

```js
// MediaElementAudioSourceNode を生成する
// そこに HTMLMediaElement を入れる
var source = audioCtx.createMediaElementSource(myAudio);

// コンプレッサーノードを生成する
var compressor = audioCtx.createDynamicsCompressor();
compressor.threshold.setValueAtTime(-50, audioCtx.currentTime);
compressor.knee.setValueAtTime(40, audioCtx.currentTime);
compressor.ratio.setValueAtTime(12, audioCtx.currentTime);
compressor.attack.setValueAtTime(0, audioCtx.currentTime);
compressor.release.setValueAtTime(0.25, audioCtx.currentTime);

// AudioBufferSourceNode を出力先につなげる
source.connect(audioCtx.destination);

button.onclick = function () {
  var active = button.getAttribute("data-active");
  if (active == "false") {
    button.setAttribute("data-active", "true");
    button.textContent = "Remove compression";

    source.disconnect(audioCtx.destination);
    source.connect(compressor);
    compressor.connect(audioCtx.destination);
  } else if (active == "true") {
    button.setAttribute("data-active", "false");
    button.textContent = "Add compression";

    source.disconnect(compressor);
    compressor.disconnect(audioCtx.destination);
    source.connect(audioCtx.destination);
  }
};
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-baseaudiocontext-createdynamicscompressor |

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

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

関連情報
----

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


BaseAudioContext.createIIRFilter() - Web API

BaseAudioContext.createIIRFilter()
==================================

**`createIIRFilter()`** は `BaseAudioContext` インターフェイスのメソッドで、 `IIRFilterNode` を生成します。
 これは一般的な\*\*無限インパルス応答\*\* (IIR) フィルターを生成し、これはよって様々な種類のフィルターとして提供できるように構成することができます。
 of filter.

**メモ:** `IIRFilterNode()` コンストラクターは `IIRFilterNode` を作成するための推奨される方法です。 AudioNode の作成を参照してください。

構文
--

```js
createIIRFilter(feedforward, feedback);
```

### 引数

`feedforward`

浮動小数点値の配列で、 IIR フィルターの伝達関数のフィードフォワード（分子）係数を指定します。この配列の最大長は 20 で、少なくとも 1 つの値はゼロ以外でなければなりません。

`feedback`

浮動小数点値の配列で、 IIR フィルターの伝達関数のフィードバック（分母）係数を指定します。この配列は最大 20 個のメンバーを持つことができ、そのうちの最初のメンバーは 0 以外でなければなりません。

### 返値

指定されたフィードバックとフィードフォワードの係数配列を持つフィルターを実装した `IIRFilterNode` です。

### 例外

`InvalidStateError` `DOMException`

すべての `feedforward` 係数が 0 の場合、あるいは最初の `feedback` 係数が 0 の場合に発生します。

`NotSupportedError` `DOMException`

入力配列の一方または両方が20個を超えた場合に発生します。

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-baseaudiocontext-createiirfilter |

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

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

関連情報
----

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


BaseAudioContext.createOscillator() - Web API

BaseAudioContext.createOscillator()
===================================

`createOscillator()` は `BaseAudioContext` インターフェイスのメソッドで、周期的な波形を表現するソースである `OscillatorNode` を生成します。基本的には一定の音程を発生させます。

**メモ:** `OscillatorNode()` コンストラクターは `OscillatorNode` を作成するための推奨される方法です。 AudioNode の作成を参照してください。

構文
--

```js
createOscillator();
```

### 引数

なし。

### 返値

`OscillatorNode` です。

例
-

次の例は、 AudioContext を使用してオシレーターノードを作成する基本的な使用方法です。応用例や情報については、 Violent Theremin のデモを（関連するコードの app.jsも）参照してください。また、より詳しい情報は `OscillatorNode` ページをご覧ください。

```js
// ウェブオーディオ API コンテキストを生成する
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();

// オシレーターノードを生成する
var oscillator = audioCtx.createOscillator();

oscillator.type = "square";
oscillator.frequency.setValueAtTime(3000, audioCtx.currentTime); // 値をヘルツで指定
oscillator.connect(audioCtx.destination);
oscillator.start();
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-baseaudiocontext-createoscillator |

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

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

関連情報
----

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


BaseAudioContext.createBiquadFilter() - Web API

BaseAudioContext.createBiquadFilter()
=====================================

`createBiquadFilter()` は `BaseAudioContext` インターフェイスのメソッドで、 `BiquadFilterNode` (en-US) を生成し、いくつかの異なる共通フィルター型として設定可能な 2 次フィルターを表現します。

**メモ:** `BiquadFilterNode()` (en-US) コンストラクターが `BiquadFilterNode` (en-US) を作成するのに推奨される方法です。 AudioNode の作成を参照してください。

構文
--

```js
createBiquadFilter();
```

### 引数

なし。

### 返値

`BiquadFilterNode` (en-US) です。

例
-

次の例は AudioContext で Biquad フィルターノードを作成する基本的な使い方を示しています。完全に動作する例は、 voice-change-o-matic を参照してください（ソースコードも参照してください）。

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

// このアプリで使う2つのノードを設定する
var analyser = audioCtx.createAnalyser();
var distortion = audioCtx.createWaveShaper();
var gainNode = audioCtx.createGain();
var biquadFilter = audioCtx.createBiquadFilter();
var convolver = audioCtx.createConvolver();

// ノードを接続する

source = audioCtx.createMediaStreamSource(stream);
source.connect(analyser);
analyser.connect(distortion);
distortion.connect(biquadFilter);
biquadFilter.connect(convolver);
convolver.connect(gainNode);
gainNode.connect(audioCtx.destination);

// 二次フィルターで操作する

biquadFilter.type = "lowshelf";
biquadFilter.frequency.setValueAtTime(1000, audioCtx.currentTime);
biquadFilter.gain.setValueAtTime(25, audioCtx.currentTime);
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-baseaudiocontext-createbiquadfilter |

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

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

関連情報
----

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


BaseAudioContext.audioWorklet - Web API

BaseAudioContext.audioWorklet
=============================

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

`audioWorklet` は `BaseAudioContext` インターフェイスの読み取り専用プロパティで、 `AudioWorklet` のインスタンスを返します。これは、独自の音声処理を実装する `AudioWorkletProcessor` の派生クラスを追加するために使用します。

値
-

`AudioWorklet` のインスタンスです。

例
-

*ユーザー定義のオーディオ処理を実演する完全な例については、 `AudioWorkletNode` のページを参照してください。*

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-baseaudiocontext-audioworklet |

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

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

関連情報
----

* ウェブオーディオ API の使用
* `AudioWorkletNode`


BaseAudioContext.currentTime - Web API

BaseAudioContext.currentTime
============================

`currentTime` は `BaseAudioContext` インターフェイスの読み取り専用プロパティで、再生、タイムラインの可視化などのスケジューリングで使用できる単純増加するハードウェア時間の秒数を倍精度浮動小数点型で返します。 0 から始まります。

値
-

浮動小数点数です。

例
-

```js
var AudioContext = window.AudioContext || window.webkitAudioContext;
var audioCtx = new AudioContext();
// 古い webkit/blink ブラウザーでは接頭辞が必要です

...

console.log(audioCtx.currentTime);
```

時刻の精度の縮小
--------

 タイミング攻撃やフィンガープリントに対する保護を提供するために、ブラウザーの設定によっては `audioCtx.currentTime` の値が丸められることがあります。
 Firefox では、環境設定の `privacy.reduceTimerPrecision` が既定で有効になっており、 Firefox 59 では 20us、60 では 2ms になっています。

```js
// reduced time precision (2ms) in Firefox 60
audioCtx.currentTime;
// 23.404
// 24.192
// 25.514
// ...

// reduced time precision with `privacy.resistFingerprinting` enabled
audioCtx.currentTime;
// 49.8
// 50.6
// 51.7
// ...
```

Firefox では、 `privacy.resistFingerprinting` を有効にすると、精度は 100ms または `privacy.resistFingerprinting.reduceTimerPrecision.microseconds` の値のどちらか大きいほうになります。

仕様書
---

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

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

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

関連情報
----

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


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

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

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

**`FederatedCredential()`** コンストラクターは、新しい `FederatedCredential` オブジェクトを作成します。対応しているブラウザーでは、このクラスのインスタンスにグローバル `fetch()` の `init` オブジェクトから受け取った `credential` を渡すことができます。

構文
--

```js
new FederatedCredential(init)
```

### 引数

`init`

オプションは次の通りです。

`provider`

文字列で、資格情報プロバイダーを識別します。

仕様書
---

| Specification |
| --- |
| Credential Management Level 1 # dom-federatedcredential-federatedcredential |

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

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


FederatedCredential: provider プロパティ - Web API

FederatedCredential: provider プロパティ
===================================

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

**`provider`** は `FederatedCredential` インターフェイスのプロパティで、資格情報の連合アイデンティティプロバイダーの入った文字列を返します。

値
-

資格情報の連合アイデンティティプロバイダーの入った文字列です。

例
-

```js
// TBD
```

仕様書
---

| Specification |
| --- |
| Credential Management Level 1 # dom-federatedcredential-provider |

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

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


FederatedCredential: protocol プロパティ - Web API

FederatedCredential: protocol プロパティ
===================================

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

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

**`protocol`** は `FederatedCredential` インターフェイスのプロパティで、資格情報の連合アイデンティティプロトコルが入った読み取り専用の文字列を返します。このプロパティが `null` の場合、プロトコルは `FederatedCredential.provider` プロパティから推測される可能性があります。

### 値

資格情報の連合アイデンティティプロトコル（例えば `openidconnect`）が入った文字列です。

例
-

```js
// TBD
```

仕様書
---

| Specification |
| --- |
| Credential Management Level 1 # dom-federatedcredential-protocol |

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

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


PerformanceEntry: name プロパティ - Web API

PerformanceEntry: name プロパティ
============================

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

**`name`** は `PerformanceEntry` インターフェイスの読み取り専用プロパティで、パフォーマンス項目の名前を表す文字列です。これは識別子の役割を果たしますが、一意である必要はありません。値はサブクラスに依存します。

値
-

文字列です。以下の表に示すように、値は下記の表にある通り、 `PerformanceEntry` オブジェクトのサブクラスによって異なります。

| サブクラス | 値 |
| --- | --- |
| `LargestContentfulPaint` (en-US) | 常に空文字列を返します。 |
| `LayoutShift` (en-US) | 常に `"layout-shift"` を返します。 |
| `PerformanceElementTiming` | 次の文字列のいずれかです。
 * `"image-paint"`
* `"text-paint"`
 |
| `PerformanceEventTiming` (en-US) | 関連するイベントの型です。 |
| `PerformanceLongTaskTiming` | 次の文字列のいずれかです。
 * `"cross-origin-ancestor"`
* `"cross-origin-descendant"`
* `"cross-origin-unreachable"`
* `"multiple-contexts"`
* `"same-origin-ancestor"`
* `"same-origin-descendant"`
* `"same-origin"`
* `"self"`
* `"unknown"`
 |
| `PerformanceMark` | `performance.mark()` を呼び出したことでマークが作成されたときに使用された名前です。 |
| `PerformanceMeasure` | `performance.measure()` を呼び出してたことで指標が作成されたときに使用された名前です。 |
| `PerformanceNavigationTiming` | リクエストされたリソースの解決された URL です。リクエストがリダイレクトされてもこの値は変わりません。 |
| `PerformancePaintTiming` | 次の文字列のいずれかです。
 * `"first-paint"`
* `"first-contentful-paint"`
 |
| `PerformanceResourceTiming` | リクエストされたリソースの解決された URL です。リクエストがリダイレクトされてもこの値は変わりません。 |
| `TaskAttributionTiming` | 常に `"unknown"` を返します。 |
| `VisibilityStateEntry` (en-US) | 次の文字列のいずれかです。
 * `"visible"`
* `"hidden"`
 |

例
-

### パフォーマンス項目を名前で絞り込み

`PerformanceEntry` が `PerformanceResourceTiming` オブジェクトである場合、`name` プロパティはリクエストされたリソースの解決した URL を参照します。
 この例では、`name` プロパティは固有のリソース、例えばすべての SVG 画像をフィルタリングするのに有益です。

```js
// SVG リソースの処理時間をログ出力
performance.getEntriesByType("resource").forEach((entry) => {
  if (entry.name.endsWith(".svg")) {
    console.log(`${entry.name}'s duration: ${entry.duration}`);
  }
});
```

### パフォーマンス項目を名前で取得

`Performance` と `PerformanceObserver` はどちらもパフォーマンス項目を直接名前で取得するメソッドを提供しています。代わりに `Performance.getEntriesByName()` または `PerformanceObserverEntryList.getEntriesByName()` (en-US) を使用することができます。

```js
// この時点での "debug-marks" という名前のマークをすべてログ出力
const debugMarks = performance.getEntriesByName("debug-mark", "mark");
debugMarks.forEach((entry) => {
  console.log(`${entry.name}'s startTime: ${entry.startTime}`);
});

// PerformanceObserver 版
// "debug-marks" という名前のマークが発生したらすべてログ出力
function perfObserver(list, observer) {
  list.getEntriesByName("debug-mark", "mark").forEach((entry) => {
    console.log(`${entry.name}'s startTime: ${entry.startTime}`);
  });
}
const observer = new PerformanceObserver(perfObserver);
observer.observe({ entryTypes: ["measure", "mark"] });
```

仕様書
---

| Specification |
| --- |
| Performance Timeline # dom-performanceentry-name |

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

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

関連情報
----

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


PerformanceEntry: duration プロパティ - Web API

PerformanceEntry: duration プロパティ
================================

**`duration`** プロパティは、パフォーマンス項目の時間であるタイムスタンプを返します。このプロパティの意味は、この項目の `entryType` の値によって異なります。

値
-

`DOMHighResTimeStamp` で、パフォーマンス項目の継続時間を表します。具体的なパフォーマンス指標に長さの概念が適用されない場合は、`0` の時間を返します。

このプロパティの意味は、このパフォーマンス項目の `entryType` の値によって異なります。

`event`

イベントの `startTime` から次のレンダリングペイントまでの時間です（8 ミリ秒単位に丸めた値）。

`first-input`

最初の入力イベントの `startTime` から次のレンダリングペイントまでの時間です（8 ミリ秒単位に丸めた値）。

`longtask`

タスクの開始から終わりまでの経過時間です（1 ミリ秒単位）。

`measure`

測定の時間です。

`navigation`

この項目の `loadEventEnd` プロパティと `startTime` プロパティの差です。

`resource`

この項目の `responseEnd` 値からこの項目の `startTime` 値を引いたものです。

以下の種類の項目では `duration` は適用されず、この場合の値は常に `0` になります。

* `element`
* `largest-contentful-paint`
* `layout-shift`
* `mark`
* `paint`
* `taskattribution`
* `visibility-state`
例
-

### duration プロパティの使用

次の例では、`duration` が `0` より大きいパフォーマンス項目をすべてログ出力します。

```js
function perfObserver(list, observer) {
  list.getEntries().forEach((entry) => {
    if (entry.duration > 0) {
      console.log(`${entry.name}'s duration: ${entry.duration}`);
    }
  });
}
const observer = new PerformanceObserver(perfObserver);
observer.observe({ entryTypes: ["measure", "mark", "resource"] });
```

仕様書
---

| Specification |
| --- |
| Performance Timeline # dom-performanceentry-duration |

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

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


PerformanceEntry: startTime プロパティ - Web API

PerformanceEntry: startTime プロパティ
=================================

**`startTime`** プロパティは読み取り専用で、パフォーマンス項目のうち最初に記録された タイムスタンプを返します。このプロパティの意味は、この項目の `entryType` の値によって異なります。

値
-

この`パフォーマンス項目`が作成されたときの最初のタイムスタンプを表す `DOMHighResTimeStamp` です。

このプロパティの意味は、この項目の `entryType` の値によって異なります。

`element`

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

`event`

イベントが作成された時刻、すなわちそのイベントの `timeStamp` プロパティです。

`first-input`

最初の入力イベントが作成された時刻、すなわちそのイベtのの `timeStamp` プロパティです。

`largest-contentful-paint`

この項目の `renderTime` (en-US) の値が `0` でない場合はその値、そうでない場合はこの項目の `loadTime` (en-US) の値。

`layout-shift`

レイアウトシフトが始まった時刻。

`longtask`

タスクが始まった時刻。

`mark`

`performance.mark()` の呼び出しによってマークが作成された時刻。

`measure`

`performance.measure()` の呼び出しによって指標が作成された時刻。

`navigation`

常に `0` です。

`paint`

描画が発生した時刻。

`resource`

この項目の `fetchStart` プロパティの値。

`taskattribution`

常に `0` です。

`visibility-state`

可視状態の変更が発生した時刻。

例
-

### startTime プロパティの使用

次の例は、パフォーマンス監視中にログ出力することができる `startTime` プロパティの使用例を示しています。

メモ: `performance.mark()` メソッドでは、自分自身で `startTime` を設定することができ、 `performance.measure()` メソッドでは、測定の開始を設定することができます。

```js
performance.mark("my-mark");
performance.mark("my-other-mark", { startTime: 12.5 });

loginButton.addEventListener("click", (clickEvent) => {
  performance.measure("login-click", { start: clickEvent.timeStamp });
});

function perfObserver(list, observer) {
  list.getEntries().forEach((entry) => {
    if (entry.entryType === "mark") {
      console.log(`${entry.name}'s startTime: ${entry.startTime}`);
    }
    if (entry.entryType === "measure") {
      console.log(`${entry.name}'s duration: ${entry.duration}`);
    }
  });
}
const observer = new PerformanceObserver(perfObserver);
observer.observe({ entryTypes: ["measure", "mark"] });
```

仕様書
---

| Specification |
| --- |
| Performance Timeline # dom-performanceentry-starttime |

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

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


PerformanceEntry: entryType プロパティ - Web API

PerformanceEntry: entryType プロパティ
=================================

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

**`entryType`** プロパティは読み取り専用で、この項目が表すパフォーマンス指標の種類を表す文字列です。

対応している `entryTypes` はすべて、静的プロパティである `PerformanceObserver.supportedEntryTypes` を使用して得ることができます。

値
-

文字列です。返値は `PerformanceEntry` オブジェクトのサブタイプに依存します。一部のサブタイプには複数の `entryType` があります。

`element`

要素の読み込み時間を報告します。

項目のインスタンスは `PerformanceElementTiming` オブジェクトです。

`event`

イベントの待ち時間を報告します。

項目のインスタンスは `PerformanceEventTiming` (en-US) オブジェクトです。

`first-input`

first input delay (en-US) (FID) を報告します。

項目のインスタンスは `PerformanceEventTiming` (en-US) オブジェクトです。

`largest-contentful-paint`

画面で起動された要素の最大の描画を報告します。

項目のインスタンスは `LargestContentfulPaint` (en-US) オブジェクトです。

`layout-shift`

ページ上の要素の動きに基づいて、ウェブページのレイアウトの安定性を報告します。

項目のインスタンスは `LayoutShift` (en-US) オブジェクトです。

`longtask`

長いタスクのインスタンスを報告します。

項目のインスタンスは `PerformanceLongTaskTiming` オブジェクトです。

`mark`

独自のパフォーマンスマーカーを報告します。

項目のインスタンスは `PerformanceMark` オブジェクトです。

`measure`

独自のパフォーマンス指標を報告します。

項目のインスタンスは `PerformanceMeasure` オブジェクトです。

`navigation`

文書のナビゲーションタイミングを報告します。

項目のインスタンスは `PerformanceNavigationTiming` オブジェクトです。

`paint`

ページ読み込み中の文書レンダリングの主要な瞬間（最初の描画、最初のコンテンツ描画）を報告します。

項目のインスタンスは `PerformancePaintTiming` オブジェクトです。

`resource`

文書内のリソースのタイミング情報を報告します。

項目のインスタンスは `PerformanceResourceTiming` オブジェクトです。

`taskattribution`

長いタスクに大きく貢献した作業タイプを報告します。

項目のインスタンスは `TaskAttributionTiming` オブジェクトです。

`visibility-state`

タブがフォアグラウンドからバックグラウンドへ、またはその逆へ変化したときなど、ページの表示状態が変化した時刻を報告します。

項目のインスタンスは `VisibilityStateEntry` (en-US) オブジェクトです。

例
-

### パフォーマンス項目を種類別に絞り込み

`entryType` プロパティは、固有のパフォーマンス項目を絞り込みする際に有益なものです。例えば、すべてのスクリプトリソースを調べたい場合、 `entryType` が `"resource"` で `initiatorType` が `"script"` であることをチェックしてください。

```js
const scriptResources = performance
  .getEntries()
  .filter(
    (entry) =>
      entry.entryType === "resource" && entry.initiatorType === "script",
  );
console.log(scriptResources);
```

### パフォーマンス項目を種類別に取得

`Performance` と `PerformanceObserver` はどちらも、パフォーマンス項目を種類別に直接取得するメソッドを提供します。代わりに `Performance.getEntriesByType()` または `PerformanceObserverEntryList.getEntriesByType()` (en-US) を使用することができます。

また、 `PerformanceObserver` で監視する場合、 `observe()` メソッドはオプションオブジェクトに `entryTypes` の配列を受け取り、そこで監視する項目の種類を決めることができます。

```js
// この時点ですべてのリソース項目をログ出力
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  console.log(`${entry.name}'s duration: ${entry.duration}`);
});

// PerformanceObserver 版
// 利用できるすべてのリソース項目をログ出力
function perfObserver(list, observer) {
  list.getEntriesByType("resource").forEach((entry) => {
    console.log(`${entry.name}'s duration: ${entry.duration}`);
  });
}
const observer = new PerformanceObserver(perfObserver);
observer.observe({ entryTypes: ["resource", "navigation"] });
```

仕様書
---

| Specification |
| --- |
| Performance Timeline # dom-performanceentry-entrytype |

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

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

関連情報
----

* `PerformanceObserver.supportedEntryTypes`
* `Performance.getEntriesByType()`
* `PerformanceObserverEntryList.getEntriesByType()` (en-US)


PerformanceEntry: toJSON() メソッド - Web API

PerformanceEntry: toJSON() メソッド
===============================

**`toJSON()`** メソッドはシリアライザーで、この `PerformanceEntry` オブジェクトの JSON 表現を返します。

構文
--

```js
toJSON()
```

### 引数

なし。

### 返値

`JSON` お武衛ジェクトで、この `PerformanceEntry` オブジェクトをシリアライズしたものです。

例
-

### toJSON メソッドの使用

この例では、 `entry.toJSON()` を呼び出すとその `PerformanceMark` オブジェクトの JSON 表現を返します。

```js
performance.mark("debug-marker", {
  detail: "debugging-marker-123",
});

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(entry.toJSON());
  });
});

observer.observe({ entryTypes: ["mark"] });
```

これは JSON オブジェクトを次のように出力します。

```json
{
  "name": "debug-marker",
  "entryType": "mark",
  "startTime": 158361,
  "duration": 0
}
```

`PerformanceMark` の `detail` (en-US) プロパティが格納されていないことに注意してください。

JSON 文字列を取得するには、 `JSON.stringify(entry)` を直接使用することができます。これは `toJSON()` を自動的に呼び出します。

仕様書
---

| Specification |
| --- |
| Performance Timeline # dom-performanceentry-tojson |

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

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

関連情報
----

* `JSON`


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

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

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

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

**`NDEFRecord()`** はウェブ NFC API のコンストラクターで、新しく構築された `NDEFRecord` オブジェクトを返します。これは互換性のある NFC 機器（例えば、NDEF に対応している NFC タグ）から読み書きできるデータを表すものです。

構文
--

```js
new NDEFRecord(options)
```

### 引数

`options`

以下のプロパティを持つオブジェクトです。

`data` 省略可

転送されるデータが入ります。文字列のオブジェクトまたはリテラル、`ArrayBuffer`、`TypedArray`、`DataView`、またはネストされたレコードの配列のいずれかです。

`encoding` 省略可

文字列で、このレコードのエンコーディングを指定します。

`id` 省略可

このレコードの開発者が定義した識別子です。

`lang` 省略可

RFC 5646: Tags for Identifying Languages （または BCP 47）による有効な言語タグです。

`mediaType` 省略可

有効な MIME タイプです。

`recordType`

文字列で、 `data` に格納されたデータの型を示します。以下の値の何れかである必要があります。

`"absolute-url"`

データへの絶対 URL です。

`"empty"`

空の `NDEFRecord` です。

`"mime"`

有効な MIME タイプです。

`"smart-poster"`

NDEF-SMARTPOSTER 仕様書で定義されたスマートポスターです。

`"text"`

NDEF-TEXT 仕様書で定義されたテキストです。

`"unknown"`

レコードの型が不明です。

`"URL"`

NDEF-URI 仕様書で定義された URL です。

### 返値

新しい `NDEFRecord` です。

仕様書
---

| Specification |
| --- |
| Web NFC API # dom-ndefrecord-constructor |

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

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


NDEFRecord: encoding プロパティ - Web API

NDEFRecord: encoding プロパティ
==========================

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

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

**`encoding`** は `NDEFRecord` インターフェイスのプロパティで、テキストのペイロードのエンコーディングを返します。それ以外の場合は `null` です。

構文
--

```js
NDEFRecord.encoding
```

### 値

文字列で、 `"utf-8"`, `"utf-16"`, `"utf-16le"`, `"utf-16be"` のうちのいずれかです。

仕様書
---

| Specification |
| --- |
| Web NFC API # dom-ndefrecord-encoding |

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

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


NDEFRecord: data プロパティ - Web API

NDEFRecord: data プロパティ
======================

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

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

**`data`** は `NDEFRecord` インターフェイスのプロパティで、このレコードのペイロードの生のバイト列が入った `DataView` を返します。

構文
--

```js
NDEFRecord.data
```

### 値

エンコードしたこのレコードのペイロードをの入った `DataView` を返します。

例
-

次の例は `NDEFReadingEvent.message` から取得した `NDEFMessage` オブジェクト内のレコードを反復処理します。 `mediaType` に基づいてレコードを選択すると、次に `data` プロパティに格納されているものをデコードします。

```js
const ndef = new NDEFReader();
await ndef.scan();
ndef.onreading = (event) => {
  const decoder = new TextDecoder();
  for (const record of event.message.records) {
    if (record.mediaType === "application/json") {
      const json = JSON.parse(decoder.decode(record.data));
      const article = /^[aeio]/i.test(json.title) ? "an" : "a";
      console.log(`${json.name} is ${article} ${json.title}`);
    }
  }
};
```

仕様書
---

| Specification |
| --- |
| Web NFC API # dom-ndefrecord-data |

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

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


NDEFRecord: mediaType プロパティ - Web API

NDEFRecord: mediaType プロパティ
===========================

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

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

**`mediaType`** は `NDEFRecord` インターフェイスのプロパティで、このレコードの MIME タイプを返します。この値は `recordType` が `"mime"` と等しくない場合は `null` になります。

構文
--

```js
NDEFRecord.mediaType
```

### 値

文字列で、このレコードのペイロードの MIME タイプが入ります。

例
-

次の例は `NDEFReadingEvent.message` から取得した `NDEFMessage` オブジェクト内のレコードを反復処理します。そして、 `mediaType` プロパティを使用して、どのレコードを解釈するかを決定します。

```js
const ndef = new NDEFReader();
await ndef.scan();
ndef.onreading = (event) => {
  const decoder = new TextDecoder();
  for (const record of event.message.records) {
    if (record.mediaType === "application/json") {
      const json = JSON.parse(decoder.decode(record.data));
      const article = /^[aeio]/i.test(json.title) ? "an" : "a";
      console.log(`${json.name} is ${article} ${json.title}`);
    }
  }
};
```

仕様書
---

| Specification |
| --- |
| Web NFC API # dom-ndefrecord-mediatype |

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

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


NDEFRecord: recordType プロパティ - Web API

NDEFRecord: recordType プロパティ
============================

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

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

**`recordType`** は `NDEFRecord` インターフェイスのプロパティで、このレコードのレコード型を返します。

構文
--

```js
NDEFRecord.recordType
```

### 値

文字列で、以下のうちのいずれかを取ります。

`"empty"`

空の NDEF レコードです。

`"text"`

テキストの NDEF レコードです。

`"url"`

URI の NDEF レコードです。

`"smart-poster"`

「スマートポスター」の NDEF レコードです。

`"absolute-url"`

絶対 URL の NDEF レコードです。

`"mime"`

MIME タイプの NDEF レコードです。

`"unknown"`

NDEF レコード型が不明です。

ローカル型名

ローカル型名を表します。他のレコードに埋め込まれた NDEF レコードを指定するのによく使われます。

外部型名

ドメイン名とカスタムタイプ名をコロン (":") で区切ったカスタム文字列です。

仕様書
---

| Specification |
| --- |
| Web NFC API # dom-ndefrecord-recordtype |

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

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


NDEFRecord: toRecords() メソッド - Web API

NDEFRecord: toRecords() メソッド
============================

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

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

**`toRecords()`** は `NDEFRecord` インターフェイスのメソッドで、 `NDEFRecord.data` を `NDEFRecord.recordType` に基づいた一連のレコードに変換し、その結果を返すものです。これにより、スマートポスターや外部型レコードなど、ネストしたレコードを含む可能性のあるレコード型のペイロードを解釈することができます。

構文
--

```js
toRecords()
```

### 引数

なし。

### 返値

`NDEFRecord` のリストです。

例外
--

`NotSupported` `DOMException`

ユーザーエージェントが `NDEFRecord.data` と `NDEFRecord.recordType` のこの組み合わせを解釈する方法を知らないことを示します。

例
-

NDEF メッセージをペイロードとする外部レコードを読み取ります。

 この例では、外部型レコードを使用して、アプリケーション定義のレコードを作成します。
 これらのレコードはペイロードとして `NDEFMessage` を含むことができ、アプリケーションのコンテキストで使用されるローカル型を含む独自の `NDEFRecord` オブジェクトが含まれます。スマートポスターレコード型は、ペイロードとして NDEF メッセージも含んでいることに注意してください。

NDEF はレコードの順序を保証しないので、ペイロードとして NDEF メッセージを持つ外部型レコードを使用することは、関連するデータをカプセル化するのに便利です。

この例は、ソーシャルポストの外部レコードを読み取る方法を示しています。このレコードは `NDEFMessage` を含み、テキストレコードとローカル型 "act" (action) のレコードを含み、定義はスマートポスターから借用しますがローカルアプリケーションコンテキストで使用されます。

```js
const ndefReader = new NDEFReader();
await ndefReader.scan();
ndefReader.onreading = (event) => {
  const externalRecord = event.message.records.find(
    (record) => record.type === "example.com:smart-poster",
  );

  let action, text;

  for (const record of externalRecord.toRecords()) {
    if (record.recordType === "text") {
      const decoder = new TextDecoder(record.encoding);
      text = decoder.decode(record.data);
    } else if (record.recordType === ":act") {
      action = record.data.getUint8(0);
    }
  }

  switch (action) {
    case 0: // do the action
      console.log(`Post "${text}" to timeline`);
      break;
    case 1: // save for later
      console.log(`Save "${text}" as a draft`);
      break;
    case 2: // open for editing
      console.log(`Show editable post with "${text}"`);
      break;
  }
};
```

仕様書
---

| Specification |
| --- |
| Web NFC API # dom-ndefrecord-torecords |

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

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


NDEFRecord: id プロパティ - Web API

NDEFRecord: id プロパティ
====================

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

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

**`id`** は `NDEFRecord` インターフェイスのプロパティで、このレコードを識別するのに使用される絶対または相対 URL をレコード識別子として返します。

この識別子は、レコード識別子の一意性を強制する責任を負うレコードの生成者によって作成されま す。ウェブ NFC は NFC コンテンツに署名しないので、レコード利用者は識別子やレコードの他の部分の完全性や信憑性について、いかなる仮定もすべきではありません。

構文
--

```js
NDEFRecord.id
```

### 値

文字列です。

仕様書
---

| Specification |
| --- |
| Web NFC API # dom-ndefrecord-id |

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

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


NDEFRecord: lang プロパティ - Web API

NDEFRecord: lang プロパティ
======================

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

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

**`lang`** は `NDEFRecord` インターフェイスのプロパティで、テキストのペイロードの言語を返します。提供されていない場合は `null` を返します。

レコードには言語タグが付いていないことがあります。例えば、記録された情報がロケールに依存しない場合などです。

構文
--

```js
NDEFRecord.lang
```

### 値

文字列です。

仕様書
---

| Specification |
| --- |
| Web NFC API # dom-ndefrecord-lang |

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

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

関連情報
----

* HTML の `lang` 属性: 文書やその要素のコンテンツの言語を宣言します
* コンテンツの言語を宣言する HTTP ヘッダー: `Content-Language` および `Accept-Language`


RadioNodeList: value プロパティ - Web API

RadioNodeList: value プロパティ
==========================

基盤となる要素の集合にラジオボタンが含まれている場合、**`RadioNodeList.value`** プロパティはチェック状態のラジオボタンを表します。`value` プロパティを取得すると、現在 `checked` 状態になっているラジオボタンの `value` が文字列として返されます。集合内にラジオボタンが含まれていなかったり、集合内のラジオボタンに `checked` 状態のものがなかったりした場合は、空文字列が返されます。`value` プロパティを設定すると、`value` プロパティが新しい値と等しい最初のラジオボタン入力要素に `checked` 状態が設定されます。

構文
--

```js
value = radioNodeList.value
radioNodeList.value = string
```

例
-

### HTML

```html
<form>
  <label><input type="radio" name="color" value="blue" />青</label>
  <label><input type="radio" name="color" value="red" />赤</label>
</form>
```

### JavaScript

```js
// フォームを取得
const form = document.forms[0];

// フォームのラジオボタンの集合を取得
const radios = form.elements["color"];

// 「赤」の選択肢を選択
radios.value = "red";
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-radionodelist-value |

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

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

関連情報
----

* `<form>`、`<fieldset>`、`<input>` 要素


PushManager: registrations() メソッド - Web API

PushManager: registrations() メソッド
=================================

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

**`registrations`** メソッドは、プッシュ通知の端点登録の存在に関してシステムに問い合わせするために使用します。

**メモ:** このメソッドは `PushManager.getSubscription()` メソッドに置き換えられました。

構文
--

```js
registrations()
```

### 引数

なし。

### 返値

`DOMRequest` オブジェクトで、このメソッド呼び出しの成功または失敗を扱います。

メソッドの呼び出しが成功した場合、リクエストの `result` は PushRegistration オブジェクトの配列になります。

### PushRegistration

このオブジェクトは無名の JavaScript オブジェクトで、以下のプロパティがあります。

`pushEndpoint`

端点の URL を表す文字列です。

`version`

プッシュ通知の端点の現在のバージョンです。

例
-

```js
const req = navigator.push.registrations();

req.onsuccess = (e) => {
  if (req.result.length > 0) {
    req.result.forEach((result) => {
      console.log(
        `Existing registration ${result.pushEndpoint} ${result.version}`,
      );
    });
    // Reuse existing endpoints.
  } else {
    // Register for a new endpoint.
    const register = navigator.push.register();
    register.onsuccess = (e) => {
      console.log(`Registered new endpoint: ${register.result}`);
    };
  }
};
```

仕様書
---

この機能はもうどの仕様にも属していません。標準化の予定はなくなりました。

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

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

関連情報
----

* `PushManager`


PushManager: getSubscription() メソッド - Web API

PushManager: getSubscription() メソッド
===================================

**`PushManager.getSubscription()`** は `PushManager` インターフェイスのメソッドで、既存のプッシュサブスクリプションを取得します。

これは既存のプッシュサブスクリプションの詳細を含む `PushSubscription` で解決する `Promise` を返します。既存のプッシュサブスクリプションが存在しない場合 `null` 値で解決します。

構文
--

```js
getSubscription()
```

### 引数

なし。

### 返値

`Promise` です。これは `PushSubscription` オブジェクトまたは `null` で解決されます。

例
-

このコードスニペットは、 push messaging and notification sample から取得したものです（使用できるライブデモはありません）。

```js
// サブスクリプションをチェックするためにサービスワーカーの登録が必要
navigator.serviceWorker.ready.then((serviceWorkerRegistration) => {
  // 既にプッシュメッセージのサブスクリプションがあるか？
  serviceWorkerRegistration.pushManager
    .getSubscription()
    .then((subscription) => {
      // プッシュメッセージに加入／脱退する任意の UI を有効にする
      const pushButton = document.querySelector(".js-push-button");
      pushButton.disabled = false;

      if (!subscription) {
        // プッシュに参加していない場合、ユーザーがプッシュを
        // 有効化できるように UI を設定
        return;
      }

      // 最新の subscriptionId でサーバー同期を維持
      sendSubscriptionToServer(subscription);

      showCurlCommand(subscription);

      // プッシュメッセージに参加していることを表示するために
      // UI を設定
      pushButton.textContent = "Disable Push Messages";
      isPushEnabled = true;
    })
    .catch((err) => {
      console.error(`Error during getSubscription(): ${err}`);
    });
});
```

仕様書
---

| Specification |
| --- |
| Push API # dom-pushmanager-getsubscription |

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

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


PushManager: hasPermission() メソッド - Web API

PushManager: hasPermission() メソッド
=================================

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

**`PushManager.hasPermission()`** は `PushManager` インターフェイスのメソッドで、 `Promise` を返します。このプロミスは、ウェブアプリへのリクエストの `PushPermissionStatus` に解決し、 `granted`, `denied`, `default` のいずれかになります。

**メモ:** この機能は `PushManager.permissionState()` メソッドに置き換えられました。

構文
--

```js
hasPermission()
```

### 引数

なし。

### 返値

`Promise` で、このプロミスは `PushPermissionStatus` に解決します。

例
-

```js
// TBD
```

仕様書
---

この機能はもうどの仕様にも属していません。標準化の予定はなくなりました。

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

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


PushManager: permissionState() メソッド - Web API

PushManager: permissionState() メソッド
===================================

**`permissionState()`** は `PushManager` インターフェイスのメソッドで、プッシュマネージャーの許可状態を示す文字列で解決される `Promise` を返します。許可状態は、`'prompt'` か `'denied'`、`'granted'` のいずれかです。

**メモ:** Firefox 44 では、通知とプッシュの許可が統合されています。
 通知が許可された場合、プッシュも利用できます。

構文
--

```js
permissionState()
permissionState(options)
```

### 引数

`options` 省略可

オプションの設定パラメーターを含むオブジェクト。以下のプロパティが利用可能です。

`userVisibleOnly`

論理値で、返されたプッシュサブスクリプションは、その効果がユーザーに見えるようにされたメッセージに のみ使用することを示します。

`applicationServerKey`

プッシュサーバー経由でクライアントアプリにメッセージを送信する際に、プッシュサーバーが使用する公開鍵。この値はアプリケーションサーバーが生成する署名鍵ペアの一部であり、 P-256 曲線上の楕円曲線デジタル署名 (ECDSA) で使用できます。

### 返値

`Promise` で、`'prompt'`、`'denied'`、`'granted'` のいずれかの値の文字列に解決します。

仕様書
---

| Specification |
| --- |
| Push API # dom-pushmanager-permissionstate |

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

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


PushManager: supportedContentEncodings 静的プロパティ - Web API

PushManager: supportedContentEncodings 静的プロパティ
==============================================

**`supportedContentEncodings`** は `PushManager` インターフェイスの静的な読み取り専用プロパティで、プッシュメッセージのペイロードを暗号化するために使用できる、対応しているコンテンツコードの配列を返します。

値
-

文字列の配列です。

仕様書
---

| Specification |
| --- |
| Push API # dom-pushmanager-supportedcontentencodings |

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

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


PushManager: register() メソッド - Web API

PushManager: register() メソッド
============================

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

**`register`** メソッドは、システムにプッシュ通知の新しい端点をリクエストするために使用します。

**メモ:** このメソッドは `PushManager.subscribe()` に置き換えられました。

構文
--

```js
register()
```

### 引数

なし。

### 返値

`DOMRequest` オブジェクトで、このメソッド呼び出しの成功または失敗を扱います。

メソッドの呼び出しに成功したら、リクエストの `result` が端点の URL を表す文字列になります。

**メモ:** この URL が必要なくなったら、 `PushManager.unregister()` を使用して自分自身を掃除してください。

例
-

```js
const req = navigator.push.register();

req.onsuccess = (e) => {
  const endpoint = req.result;
  console.log(`New endpoint: ${endpoint}`);
};

req.onerror = (e) => {
  console.error(`Error getting a new endpoint: ${e.error}`);
};
```

仕様書
---

この機能はもうどの仕様にも属していません。標準化の予定はなくなりました。

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

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

関連情報
----

* `PushManager`


PushManager: subscribe() メソッド - Web API

PushManager: subscribe() メソッド
=============================

**`subscribe()`** は `PushManager` インターフェイスのメソッドで、プッシュサービスに加入します。

これは、プッシュサブスクリプションの詳細を含む `PushSubscription` オブジェクトで解決される `Promise` を返します。現在のサービスワーカーに既存のサブスクリプションがない場合、新しいプッシュサブスクリプションが生成されます。

構文
--

```js
subscribe(options)
```

### 引数

`options` 省略可

オプションの設定パラメーターを含むオブジェクトです。以下のプロパティを指定することができます。

`userVisibleOnly`

論理値で、返されたプッシュサブスクリプションの効果が、ユーザーに表示するメッセージにのみ使われるかを示します。

`applicationServerKey`

Base64 でエンコードされた文字列または `ArrayBuffer` で、プッシュサーバーがアプリケーションサーバーを認証するために使用する楕円曲線 DSA P-256 公開鍵が入ります。指定した場合は、アプリケーションサーバーから発するすべてのメッセージで VAPID 認証スキームを使用しなければならず、また対応する秘密鍵で署名した JWT を含めなければなりません。この鍵は、データを暗号化するために使用する ECDH 鍵と***同じではありません***。詳しくは "Using VAPID with WebPush" をご覧ください。

**メモ:** この引数は Chrome や Edge など、一部のブラウザーでは必須です。

### 返値

`Promise` です。これは `PushSubscription` オブジェクトで解決します。

例
-

```js
this.onpush = (event) => {
  console.log(event.data);
  // ここから、IndexedDB にデータを書き込んだり、いずれかのウィンドウに
  // それを送信したり、通知を表示したりできます。
};

navigator.serviceWorker.register("serviceworker.js");

// serviceWorker.ready を使用して、プッシュの購読ができることを確かめます。
navigator.serviceWorker.ready.then((serviceWorkerRegistration) => {
  const options = {
    userVisibleOnly: true,
    applicationServerKey,
  };
  serviceWorkerRegistration.pushManager.subscribe(options).then(
    (pushSubscription) => {
      console.log(pushSubscription.endpoint);
      // アプリケーションサーバが必要としているプッシュサブスクリプションの
      // 詳細はここから使用できます。たとえば、XMLHttpRequest を使用して
      // これを送信できます。
    },
    (error) => {
      // 開発中は、コンソールにエラーを表示するのに役立ちます。
      // 本番環境では、アプリケーションサーバにエラー情報を送信
      // するためにも 役立ちます。
      console.error(error);
    },
  );
});
```

### ユーザーのジェスチャーへの反応

`subscribe()` の呼び出しは、例えばボタンをクリックするようなユーザーのジェスチャーに反応して行うべきです。

```js
btn.addEventListener("click", () => {
  serviceWorkerRegistration.pushManager
    .subscribe(options)
    .then((pushSubscription) => {
      // handle subscription
    });
});
```

これは最善の手法であるだけでなく、ユーザーが同意していない通知を送りつけるべきではありません。今後、ブラウザーはユーザーのジェスチャーに応答して発生していない通知を明示的に許可しないようになります。例えば、Firefox はバージョン 72 から既にこの例を行っています。

仕様書
---

| Specification |
| --- |
| Push API # dom-pushmanager-subscribe |

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

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


PushManager: unregister() メソッド - Web API

PushManager: unregister() メソッド
==============================

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

**`unregister()`** メソッドは、システムに特定の端点の登録を脱退して削除するよう依頼するために使用していました。

**メモ:** 更新された API では、サブスクリプションは `PushSubscription.unsubscribe()` メソッドで脱退することができます。

構文
--

```js
unregister(pushEndpoint)
```

### 引数

`pushEndpoint`

脱退する端点です。

### 返値

`DOMRequest` オブジェクトで、このメソッド呼び出しの成功または失敗を扱います。

メソッドの呼び出しが成功した場合、リクエストの `result` は登録解除された端点を表す PushRegistration オブジェクトになります。

### PushRegistration

このオブジェクトは無名の JavaScript オブジェクトで、以下のプロパティがあります。

`pushEndpoint`

登録解除する端点の URL を表す文字列です。

`version`

`unregister.onsuccess` が呼び出された際には `undefined` です。

例
-

```js
const req = navigator.push.unregister(pushEndpoint);

req.onsuccess = (e) => {
  const endpoint = req.result;
  console.log(`Unregistered endpoint: ${endpoint}`);
};

req.onerror = (e) => {
  console.error(`Error unregistering the endpoint: ${e.error}`);
};
```

仕様書
---

この機能はもうどの仕様にも属していません。標準化の予定はなくなりました。

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

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

関連情報
----

* `PushManager`


WakeLockSentinel.released - Web API

WakeLockSentinel.released
=========================

**`released`** は `WakeLockSentinel` インターフェイスのプロパティで、 `WakeLockSentinel` がまだ解放されていないかどうかを示す論理値を返します。

構文
--

```js
var released = sentinel.released;
```

### 値

論理値で、最初は `false` であり、 `WakeLockSentinel` が解放され（`WakeLockSentinel.release()` が呼び出されるか、または自動的にロックが解除され） `release` イベントが発行された後は `true` となって変化しない値です。

例
-

この例は、 **`released`** の値が `WakeLockSentinel` のライフライクルの中でどのように変化するかを示します。

```js
const sentinel = await navigator.wakeLock.request("screen");
console.log(sentinel.released); // "false" と出力

sentinel.onrelease = () => {
  console.log(sentinel.released); // "true" と出力
};

await sentinel.release();
```

仕様書
---

| Specification |
| --- |
| Screen Wake Lock API # dom-wakelocksentinel-released |

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

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


WakeLockSentinel.type - Web API

WakeLockSentinel.type
=====================

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

**`type`** は `WakeLockSentinel` インターフェイスの読み取り専用プロパティで、現在取得している `WakeLockSentinel` の種別の文字列表現を返します。

構文
--

```js
var type = sentinel.type;
```

### 値

現在取得している起動ロックの種別の文字列表現です。

*type* 読取専用

返される値は以下の通りです。

* `'screen'`: 画面の起動ロックです。端末の画面が暗くなったりロックされたりすることを防ぎます。

例
-

この例は、 `WakeLockSentinel` を取得し、コンソールにその種別を出力する非同期関数の例を示しています。

```js
const requestWakeLock = async () => {
  wakeLock = await navigator.wakeLock.request("screen");
  console.log(wakeLock.type); // 'screen' と出力
};

requestWakeLock();
```

仕様書
---

| Specification |
| --- |
| Screen Wake Lock API # the-type-attribute |

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

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


WakeLockSentinel: release イベント - Web API

WakeLockSentinel: release イベント
==============================

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

**`release`** は `WakeLockSentinel` インターフェイスのイベントで、この見張りオブジェクトのハンドルが解放されたときに発行されます。

`WakeLockSentinel` は `release()` メソッドにより手動で解放したり、プラットフォームの起動ロックにより自動的に解放されたりします。これは、文書がアクティブでなくなった場合や、見えなくなった場合、端末の電力が低下した場合、ユーザーが省電力モードをオンにした場合に発生する可能性があります。

構文
--

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

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

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

イベント型
-----

一般的な `Event` です。

例
-

この例では、起動ロックが解放されたときに UI を更新します。

```js
wakeLock.addEventListener("release", () => {
  // if wake lock is released alter the UI accordingly
  statusElement.textContent = "Wake Lock has been released";
});
```

仕様書
---

| Specification |
| --- |
| Screen Wake Lock API # the-onrelease-attribute |

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

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


WakeLockSentinel.release() - Web API

WakeLockSentinel.release()
==========================

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

**`release()`** は `WakeLockSentinel` インターフェイスのメソッドで、 `WakeLockSentinel` を返し、この見張り (sentinel) の解放に成功したら解決する `Promise` を返します。

構文
--

```js
WakeLockSentinel.release().then(...);
```

### 引数

なし。

### 返値

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

### 例外

例外は発生しません。起動ロックが解放されたかどうかを確認するには `release` イベントを待ち受けしてください。

例
-

この例では、ユーザーがボタンをクリックすると `WakeLockSentinel` が解放されます。

```js
wakeLockOffButton.addEventListener("click", () => {
  WakeLockSentinel.release();
});
```

仕様書
---

| Specification |
| --- |
| Screen Wake Lock API # the-release-method |

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

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

関連情報
----

* `WakeLockSentinel`
* `navigator.wakeLock.request()`


AudioParam: setValueCurveAtTime() メソッド - Web API

AudioParam: setValueCurveAtTime() メソッド
======================================

**`setValueCurveAtTime()`** は `AudioParam` インターフェイスのメソッドで、引数の値が、値のリストで定義された曲線を定義すること以下で変化するように設定します。

この曲線は、浮動小数点数の配列で定義された一連の値の間の線形補間であり、 `startTime` から始まる指定された間隔と固有の継続時間に収まるように拡大縮小されます。

構文
--

```js
setValueCurveAtTime(values, startTime, duration)
```

### 引数

`values`

浮動小数点数の配列で、`AudioParam` が指定した `duration` に沿って変化する値のカーブを表します。配列内のすべての値は有限でなければなりません。値が `NaN`、`Infinity`、`-Infinity` のいずれか場合、`TypeError` 例外が発生します。

`startTime`

倍精度浮動小数点値で、変更される `AudioContext` が最初に作成されてから（秒単位の）時間を表します。この値が `AudioContext.currentTime` より小さい場合、 `currentTime` にクランプされます。

`duration`

引数の `value` が指定した曲線以下に変化する合計時間（秒単位）を表すダブル値です。指定する値は、この時間に沿って等間隔に配置されます。

### 返値

この `AudioParam` オブジェクトへの参照です。一部の古いブラウザーの実装では、このインターフェイスは 'undefined' を返します。

### 例外

`InvalidStateError` `DOMException`

指定した `values` 配列の値が 2 未満の場合に発生します。

`RangeError`

指定する `startTime` が負の値か有限でない値、または `duration` が有限で厳密に正の値でない場合に発生します。

`TypeError`

配列 `values` に含まれる値の 1 つ以上が有限でない場合に発生します。無限でない値は `NaN`、`Infinity`、`-Infinity` です。

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

パラメーターの値が曲線を以下に完了したとき、その値は `values` 引数で指定した値の集合の最後の値と一致することが保証されます。

**メモ:** ウェブオーディオ API の初期の実装では、これが確実に保持されず、予期せぬ結果を発生させるものがありました。

例
-

この単純な例では、2つのコントロールボタンを持つメディア要素のソースが特徴です（ソースコードは webaudio-examples リポジトリーを参照するか、またはこの例をライブで表示してください）。このボタンが押されると、 `setValueCurveAtTime()` が使用され、 waveArray 配列に格納されている値の間でゲインの値を変更します。

```js
// 音声コンテキストの作成
const audioCtx = new AudioContext();

// 例のための基本的な値を設定
const myAudio = document.querySelector("audio");

const valueCurve = document.querySelector(".value-curve");

// MediaElementAudioSourceNode を作成
// Feed the HTMLMediaElement into it
const source = audioCtx.createMediaElementSource(myAudio);

// ゲインノードを作成し、ゲイン値を 0.5 に設定
const gainNode = audioCtx.createGain();
gainNode.gain.value = 0.5;
const currGain = gainNode.gain.value;

// AudioBufferSourceNode を gainNodeに、
// gainNode を出力先に接続
source.connect(gainNode);
gainNode.connect(audioCtx.destination);

// onclick で何かするようにボタンを設定

const waveArray = new Float32Array(9);
waveArray[0] = 0.5;
waveArray[1] = 1;
waveArray[2] = 0.5;
waveArray[3] = 0;
waveArray[4] = 0.5;
waveArray[5] = 1;
waveArray[6] = 0.5;
waveArray[7] = 0;
waveArray[8] = 0.5;

valueCurve.onclick = () => {
  gainNode.gain.setValueCurveAtTime(waveArray, audioCtx.currentTime, 2);
};
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audioparam-setvaluecurveattime |

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

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

Chrome 46 より前のバージョンでは、線形補間ではなく最近傍補間を使用します。

関連情報
----

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


AudioParam: minValue プロパティ - Web API

AudioParam: minValue プロパティ
==========================

**`minValue`** は `AudioParam` インターフェイスの読み取り専用プロパティで、このパラメーターの公称（有効）範囲の使用可能な最小値を表します。

値
-

浮動小数点の数値 (`Number`) で、このパラメーターの公称範囲内で許容される最小値です。

`minValue` の既定値では、単精度浮動小数点数の負の最小値 (-340,282,346,638,528,859,811,704,183,484,516,925,440) です。

例
-

```js
const audioCtx = new AudioContext();
const gainNode = audioCtx.createGain();
console.log(gainNode.gain.minValue); // -3.4028234663852886e38
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audioparam-minvalue |

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

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

関連情報
----

* `AudioParam.maxValue`


AudioParam: value プロパティ - Web API

AudioParam: value プロパティ
=======================

ウェブオーディオ API の `AudioParam` インターフェイスの **`value`** プロパティは、この `AudioParam` の現在の値を取得または設定します。初期状態では、値は `AudioParam.defaultValue` に設定されています。

`value` を設定すると、 `AudioContext` の `currentTime` プロパティが返す時刻で `AudioParam.setValueAtTime` を呼び出すのと同じ効果があります。

値
-

現在の時刻におけるパラメーターの値を示す浮動小数点の値 (`Number`) です。この値は `minValue` および `maxValue` プロパティで指定された値の間になります。

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

### 値の精度とばらつき

内部的に `value` を格納するために使用されるデータ型は単精度（32 ビット）の浮動小数点数ですが、 JavaScript では 64 ビットの倍精度浮動小数点数を用います。そのため、 `value` プロパティから読み込んだ値が、常に設定した値と一致するとは限りません。

この例を考えてください。

```js
const source = new AudioBufferSourceNode(/\* … \*/);
const rate = 5.3;
source.playbackRate.value = rate;
console.log(source.playbackRate.value === rate);
```

ログ出力は `false` になります。これは、再生レートのパラメーターである `rate` が 5.3 に最も近い 32 ビット浮動小数点数に変換され、5.300000190734863 となったためです。解決策の 1 つは、 `value` を設定する際に、指定した 64 ビットの JavaScript 値に相当する単精度の値を返す `Math.fround()` メソッドを使用することです。

```js
const source = new AudioBufferSourceNode(/\* … \*/);
const rate = Math.fround(5.3);
source.playbackRate.value = rate;
console.log(source.playbackRate.value === rate);
```

この場合、ログ出力は `true` になります。

### 時間とともに変化するプロパティの値

`AudioParam` の `value` は固定されることもあれば、時間とともに変化することもあります。これは `value` ゲッターによって反映され、音声レンダリングエンジンの最新の**レンダリングクォンタム**（音声バッファーが処理され更新される瞬間）時点でのパラメーターの値を返します。音声バッファーが処理されるだけでなく、それぞれのレンダリングクォンタムは、現在の時刻と確立された時間ベースのパラメーターの値変更が指定された場合、必要に応じてそれぞれの `AudioParam` の `value` を更新します。

パラメーターを最初に作成した時、その値は `AudioParam.defaultValue` で指定された既定値に設定されます。これは、 0.0 秒の時刻におけるパラメーターの値であり、値が変更される最初のレンダリングクォンタムまで、パラメーターの値のままです。

レンダリングクォンタムの間、ブラウザーはパラメーターの値を管理するために以下のことを行います。

* `value` セッターが使用されてた場合、パラメーターの値は指定された値に変更されます。
* 現在の時刻が前回 `setValueAtTime()` を呼び出して指定した時刻と等しいか超えている場合、 `value` は `setValueAtTime()` に渡された値に変更されます。
* 段階的または漸進的な値変更メソッドが呼び出され、現在の時刻が段階的な値変更を行うべき時間範囲内にある場合、値は適切なアルゴリズムに基づいて更新されます。これらの漸進的または段階的な値変更メソッドには `linearRampToValueAtTime()`, `setTargetAtTime()`, `setValueCurveAtTime()` があります。

このように、パラメーターの `value` は、時間経過に伴うパラメーターの状態を正確に反映するように維持されます。

例
-

この例では、 `GainNode` の音量を即座に 40% に変更します。

```js
const audioCtx = new AudioContext();
const gainNode = audioCtx.createGain();
gainNode.gain.value = 0.4;
// 次のものと同じ
gainNode.gain.setValueAtTime(0.4, audioCtx.currentTime);
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audioparam-value |

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

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

`GainNode` のゲイン値を変更する際、バージョン 64 （2018 年 1 月）以前の Google Chrome では、デジッパリングを防ぐためにスムーズな補間が行われていました。
 バージョン 64 からは、ウェブオーディオ仕様に準拠するため、値が即座に変更されます。詳しくは Chrome Platform Status をご覧ください。

関連情報
----

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


AudioParam: maxValue プロパティ - Web API

AudioParam: maxValue プロパティ
==========================

**`maxValue`** は `AudioParam` インターフェイスの読み取り専用プロパティで、このパラメーターの公称（有効）範囲の使用可能な最大値を表します。

値
-

浮動小数点の数値 (`Number`) で、このパラメーターの公称範囲内で許容される最大値です。

`maxValue` の既定値では、単精度浮動小数点数の正の最大値 (+340,282,346,638,528,859,811,704,183,484,516,925,440) です。

例
-

```js
const audioCtx = new AudioContext();
const gainNode = audioCtx.createGain();
console.log(gainNode.gain.maxValue); // 3.4028234663852886e38
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audioparam-maxvalue |

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

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

関連情報
----

* `AudioParam.minValue`


AudioParam: setTargetAtTime() メソッド - Web API

AudioParam: setTargetAtTime() メソッド
==================================

`setTargetAtTime()` は `AudioParam` インターフェイスのメソッドで、 `AudioParam` の値を徐々に変化させる開始をスケジュールします。これは ADSR エンベロープのディケイやリリース部分に使用します。

構文
--

```js
setTargetAtTime(target, startTime, timeConstant)
```

### 引数

`target`

指定された開始時刻に引数が変化し始める値。

`startTime`

指数変化の開始時刻。 `AudioContext.currentTime` と同じ時間座標系で指定します。これが `AudioContext.currentTime` 以下の場合、引数はすぐに変化を始めます。

`timeConstant`

秒単位で指定された、指数関数的に対象とする手法に移行する際の時刻定数値。この値が大きいほど、遷移は遅くなります。

### 返値

この `AudioParam` オブジェクトへの参照です。このインターフェイスの古いブラウザーの実装の中には `undefined` を返すものもあります。

解説
--

変化は `startTime` で指定した時刻から始まり、指数関数的に `target` 引数で指定された値に向かって移動します。 `timeConstant` 引数で定義されているディケイレートは指数関数的です。 したがって、値が完全に `target` に到達することはありませんが、長さ `timeConstant` の各タイムステップの後、値は別の式

1
-

e

-
1

≈
63.2
%

1 - e^{-1} \approx 63.2%

 で `target` に近づきます。完全な式（一次線形連続時不変システムを使用しています）については、ウェブオーディオ API 仕様書を調べてください。

どうしても特定の時刻までに目標値に到達する必要がある場合は、 `AudioParam.exponentialRampToValueAtTime()` を使用することができます。ただし、数学的な理由から、このメソッドは現在値や対象とする値が `0` の場合には動作しません。

### 良い `timeConstant` の選択

前述のように、この値は指数関数的に変化し、 `timeConstant` ごとに 63.2% ずつ対象とする値に向かって変化します。目標値に達することを心配する必要はありません。十分に近づけば、それ以上の変化は人間のリスナーには知覚できないでしょう。

使用する用途によっては、対象とする値の 95% になれば十分かもしれません。その場合は、 `timeConstant` を対象とする時間の 3 分の 1 に設定すればよいでしょう。

詳細については、時間の経過とともに値が 0% から 100% までどのように変化するか、以下の表で調べてください。

| `startTime` からの時間 | 値 |
| --- | --- |
| `0 * timeConstant` | 0% |
| `0.5 * timeConstant` | 39.3% |
| `1 * timeConstant` | 63.2% |
| `2 * timeConstant` | 86.5% |
| `3 * timeConstant` | 95.0% |
| `4 * timeConstant` | 98.2% |
| `5 * timeConstant` | 99.3% |
| `n * timeConstant` |

1

 |

1
-

e

-
n

1 - e^{-n}

例
-

この例では、 2 つの制御ボタンを持つメディアソースがあります（ソースコードは audio-param repo を参照するか、またはこの例をライブで見てください）。これらのボタンが押されると、 `setTargetAtTime()` が使用され、それぞれゲイン値を 1.0 まで、 0 までフェードアップさせます。

```js
// 音声コンテキストの作成
const audioCtx = new AudioContext();

// 例のための基本的な値を設定
const myAudio = document.querySelector("audio");

const atTimePlus = document.querySelector(".at-time-plus");
const atTimeMinus = document.querySelector(".at-time-minus");

// MediaElementAudioSourceNode を作成
// Feed the HTMLMediaElement into it
const source = audioCtx.createMediaElementSource(myAudio);

// ゲインノードを作成し、ゲイン値を 0.5 に設定
const gainNode = audioCtx.createGain();
gainNode.gain.value = 0.5;
let currGain = gainNode.gain.value;

// AudioBufferSourceNode を gainNodeに、
// gainNode を出力先に接続
source.connect(gainNode);
gainNode.connect(audioCtx.destination);

// onclick で何かするようにボタンを設定
atTimePlus.onclick = () => {
  currGain = 1.0;
  gainNode.gain.setTargetAtTime(1.0, audioCtx.currentTime + 1, 0.5);
};

atTimeMinus.onclick = () => {
  currGain = 0;
  gainNode.gain.setTargetAtTime(0, audioCtx.currentTime + 1, 0.5);
};
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audioparam-settargetattime |

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

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

関連情報
----

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


AudioParam: setValueAtTime() メソッド - Web API

AudioParam: setValueAtTime() メソッド
=================================

`setValueAtTime()` は `AudioParam` インターフェイスのメソッドで、 `AudioContext.currentTime` を基準にした正確な時刻に `AudioParam` の値を瞬時に変更します。新しい値は value 引数で指定します。

構文
--

```js
setValueAtTime(value, startTime)
```

### 引数

`value`

指定された時刻に AudioParam が変更される値を表す浮動小数点数です。

`startTime`

倍精度浮動小数点値で、 `AudioContext` が最初に作成されてから、値の変更が起こるまでの時間（秒単位）を表します。時間が `AudioContext.currentTime` より小さい場合、変更は即座に起こります。この値が負の場合、 `TypeError` が発生します。

### 返値

この `AudioParam` オブジェクトへの参照です。一部の古いブラウザーの実装では、このインターフェイスは `undefined` を返します。

例
-

この単純な例では、2つのコントロールボタンを持つメディア要素のソースが特徴です（ソースコードは webaudio-examples リポジトリーを参照するか、またはこの例をライブで表示してください）。ボタンが押されると、変数 `currGain` は 0.25 ずつ増加/減少します。次に、 `setValueAtTime()` メソッドを使用して、ゲインの値を `currGain` と等しく、現在から 1 秒後 (`audioCtx.currentTime + 1`) に設定します。

```js
// 音声コンテキストの作成
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

// 例のための基本的な値を設定
const myAudio = document.querySelector("audio");
const pre = document.querySelector("pre");
const myScript = document.querySelector("script");

pre.innerHTML = myScript.innerHTML;

const targetAtTimePlus = document.querySelector(".set-target-at-time-plus");
const targetAtTimeMinus = document.querySelector(".set-target-at-time-minus");

// MediaElementAudioSourceNode を作成
// Feed the HTMLMediaElement into it
const source = audioCtx.createMediaElementSource(myAudio);

// ゲインノードを作成し、ゲイン値を 0.5 に設定
const gainNode = audioCtx.createGain();
gainNode.gain.value = 0.5;
let currGain = gainNode.gain.value;

// AudioBufferSourceNode を gainNodeに、
// gainNode を出力先に接続
source.connect(gainNode);
gainNode.connect(audioCtx.destination);

// onclick で何かするようにボタンを設定
targetAtTimePlus.onclick = () => {
  currGain += 0.25;
  gainNode.gain.setValueAtTime(currGain, audioCtx.currentTime + 1);
};

targetAtTimeMinus.onclick = () => {
  currGain -= 0.25;
  gainNode.gain.setValueAtTime(currGain, audioCtx.currentTime + 1);
};
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audioparam-setvalueattime |

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

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

関連情報
----

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


AudioParam: defaultValue プロパティ - Web API

AudioParam: defaultValue プロパティ
==============================

**`defaultValue`** は `AudioParam` インターフェイスの読み取り専用プロパティで、 `AudioParam` を作成する固有の `AudioNode` で定義する属性の初期値を表します。

値
-

浮動小数点数 (`Number`) です。

例
-

```js
const audioCtx = new AudioContext();
const gainNode = audioCtx.createGain();
const defaultVal = gainNode.gain.defaultValue;
console.log(defaultVal); // 1
console.log(defaultVal === gainNode.gain.value); // true
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audioparam-defaultvalue |

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

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

関連情報
----

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


AudioParam: cancelAndHoldAtTime() メソッド - Web API

AudioParam: cancelAndHoldAtTime() メソッド
======================================

**`cancelAndHoldAtTime()`** は `AudioParam` インターフェイスのメソッドで、将来 `AudioParam` に予定されていた変更をすべてキャンセルしますが、指定された時刻に他のメソッドを使用してさらに変更が加えられるまでその値を保持します。

構文
--

```js
cancelAndHoldAtTime(cancelTime)
```

### 引数

`cancelTime`

すべてのスケジュールされた変更が取り消される、 `AudioContext` が最初に作成されてからからの時間（秒単位）を表します。

### 返値

呼び出された `AudioParam` への参照です。

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audioparam-cancelandholdattime |

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

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


AudioParam: cancelScheduledValues() メソッド - Web API

AudioParam: cancelScheduledValues() メソッド
========================================

`cancelScheduledValues()` は `AudioParam` インターフェイスのメソッドで、 `AudioParam` に予定されている将来の変更をすべて取り消します。

構文
--

```js
cancelScheduledValues(startTime)
```

### 引数

`startTime`

`AudioContext` が最初に作成されてから、スケジュールされた変更がすべて取り消されるまでの時間（秒単位）を表します。

### 返値

この `AudioParam` オブジェクトへの参照です。古い実装では、このメソッドは `undefined` を返します。

例
-

```js
const gainNode = audioCtx.createGain();
gainNode.gain.setValueCurveAtTime(waveArray, audioCtx.currentTime, 2); // 'gain' は AudioParam
gainNode.gain.cancelScheduledValues(audioCtx.currentTime);
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audioparam-cancelscheduledvalues |

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

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

関連情報
----

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


AudioParam: linearRampToValueAtTime() メソッド - Web API

AudioParam: linearRampToValueAtTime() メソッド
==========================================

`linearRampToValueAtTime()` は `AudioParam` インターフェイスのメソッドで、 `AudioParam` の値を徐々に線形的に変化させます。変更は *直前の* イベントで指定した時刻に始まり、 `value` 引数で指定された新しい値まで直線的なランプが続き、 `endTime` 引数で指定された時刻に新しい値に到達します。

構文
--

```js
linearRampToValueAtTime(value, endTime)
```

### 引数

`value`

浮動小数点数で、指定された時刻までに `AudioParam` が変化する値を表します。

`endTime`

倍精度浮動小数点値で、値の変化が開始してから停止するまでの正確な時間（秒単位）を表します。

### 返値

この `AudioParam` オブジェクトを参照します。一部のブラウザーでは、このインターフェイスの古い実装は `undefined` を返します。

例
-

この例では、 2 つの制御ボタンを持つメディアソースがあります（ソースコードは audio-param repo を参照するか、またはこの例をライブで見てください）。これらのボタンが押されると、 `linearRampToValueAtTime()` を使用して、それぞれゲイン値を 1.0 までフェードアップし、 0 までフェードダウンします。これはフェードイン/フェードアウトのエフェクトにはかなり有益ですが、 `AudioParam.exponentialRampToValueAtTime()` の方が少し自然だと言います。

```js
// 音声コンテキストの作成
const audioCtx = new AudioContext();

// 例のための基本的な値を設定
const myAudio = document.querySelector("audio");

const linearRampPlus = document.querySelector(".linear-ramp-plus");
const linearRampMinus = document.querySelector(".linear-ramp-minus");

// MediaElementAudioSourceNode を作成
// Feed the HTMLMediaElement into it
const source = audioCtx.createMediaElementSource(myAudio);

// ゲインノードを作成し、ゲイン値を 0.5 に設定
const gainNode = audioCtx.createGain();

// AudioBufferSourceNode を gainNodeに、
// gainNode を出力先に接続
gainNode.gain.setValueAtTime(0, audioCtx.currentTime);
source.connect(gainNode);
gainNode.connect(audioCtx.destination);

// onclick で何かするようにボタンを設定
linearRampPlus.onclick = () => {
  gainNode.gain.linearRampToValueAtTime(1.0, audioCtx.currentTime + 2);
};

linearRampMinus.onclick = () => {
  gainNode.gain.linearRampToValueAtTime(0, audioCtx.currentTime + 2);
};
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audioparam-linearramptovalueattime |

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

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

関連情報
----

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


AudioParam: exponentialRampToValueAtTime() メソッド - Web API

AudioParam: exponentialRampToValueAtTime() メソッド
===============================================

**`exponentialRampToValueAtTime()`** は `AudioParam` インターフェイスのメソッドで、 `AudioParam` の値を指数関数的に徐々に変化させます。変更は *直前の* イベントで指定した時刻に始まり、`value` 引数で指定された新しい値まで指数関数的な変化が続き、 `endTime` 引数で指定された時刻に新しい値に到達します。

**メモ:** 指数関数的な変化は、周波数や再生レートを変化させる場合、直線的な変化よりも有益であると考えられています。これは、人間の耳の動作に起因しています。

構文
--

```js
exponentialRampToValueAtTime(value, endTime)
```

### 引数

`value`

浮動小数点数で、指定された時刻までに `AudioParam` が変化する値を表します。

`endTime`

倍精度浮動小数点値で、値の変化が停止する、変化開始後の正確な時刻（秒単位）を表します。

### 返値

この `AudioParam` オブジェクトへの参照です。一部のブラウザーでは、このインターフェイスの古い実装は `undefined` を返します。

例
-

この例では、 2 つの制御ボタンを持つメディアソースがあります（ソースコードは audio-param リポジトリー、またはこの例をライブで参照してください）。これらのボタンが押されると、 `exponentialRampToValueAtTime()` を使用して、それぞれゲイン値を 1.0 までフェードアップし、 0 までフェードダウンします。これはフェードイン/フェードアウトのエフェクトにかなり有益です。

```js
// 音声コンテキストの作成
const audioCtx = new AudioContext();

// 例のための基本的な変数を設定
const myAudio = document.querySelector("audio");

const expRampPlus = document.querySelector(".exp-ramp-plus");
const expRampMinus = document.querySelector(".exp-ramp-minus");

// MediaElementAudioSourceNode を作成
// HTMLMediaElement を投入します。
const source = audioCtx.createMediaElementSource(myAudio);

// ゲインノードを作成し、そのゲイン値を 0.5 に設定します。
const gainNode = audioCtx.createGain();

// AudioBufferSourceNode を gainNodeに、
// gainNode を出力先に接続します。
gainNode.gain.setValueAtTime(0, audioCtx.currentTime);
source.connect(gainNode);
gainNode.connect(audioCtx.destination);

// onclick で何かするようにボタンを設定
expRampPlus.onclick = () => {
  gainNode.gain.exponentialRampToValueAtTime(1.0, audioCtx.currentTime + 2);
};

expRampMinus.onclick = () => {
  gainNode.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 2);
};
```

**メモ:** 最後の関数で降下する値には、 0 ではなく 0.01 が使用されました。 0 を使用すると、 *invalid or illegal string* エラーが発生するためです。

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audioparam-exponentialramptovalueattime |

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

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

関連情報
----

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


Media Source Extensions のためのアセットのトランスコード - Web API

Media Source Extensions のためのアセットのトランスコード
========================================

Media Source Extensions を使用する場合、アセットをストリーミングする前に調整する必要がある可能性があります。 この記事では、要件を説明し、アセットを適切にエンコードするために使用できるツールチェーンを示します。

入門
--

1. 最初で最も重要な手順は、ユーザーのブラウザーがサポートするコンテナとコーデックでファイルを構成することです。
2. コーデックによっては、ISO BMFF 仕様に準拠するためにファイルを断片化する必要がある場合があります。
3. （オプション）Dynamic Adaptive Streaming over HTTP（DASH、HTTP を介した動的適応的ストリーミング）を使用した適応的ビットレートストリーミングを使用する場合、アセットを複数の解像度にトランスコードする必要があります。 ほとんどの DASH クライアントは、対応する Media Presentation Description（MPD）マニフェストファイルを期待しています。 これは通常、複数の解像度のアセットファイルを生成するときに生成されます。

以下では、これらのすべての手順を説明しますが、最初にこれをかなり簡単に行うために使用できるツールチェーンを見てみましょう。

### サンプルメディア

ここにリストされている手順を実行したいが、実験するメディアがない場合は、Big Buck Bunny の予告編 [0] をここで入手できます。 Big Buck Bunny は、Creative Commons Attribution 3.0 ライセンスの下でライセンスされています。 このチュートリアル全体を通して、ダウンロードしたファイル名 `trailer_1080p.mov` を参照します。

[0] (c) Copyright 2008, Blender Foundation / www.bigbuckbunny.org / https://peach.blender.org/about/

### 必要なツール

MSE を使用する場合、次のツールが必要です。

1. ffmpeg — メディアを必要な形式にトランスコードするためのコマンドラインユーティリティ。 Download FFmpeg のページであなたのシステムのバージョンをダウンロードできます。 アーカイブファイルから実行可能ファイルを抽出し、その場所を PATH ステートメントに追加します。 OSX ユーザーは、homebrew を使用して ffmpeg をインストールすることもできます。
2. Bento4 — アセットのメタデータを取得し、DASH のコンテンツを作成するための一連のコマンドラインユーティリティ。 インストールするには、OS と設定に応じて、提供されたプロジェクトファイル/ソースファイルからアプリを自分でビルド/コンパイルする必要があります。 詳細については、構築手順を参照してください。 構築済みファイルがここにあります。 `bin` ディレクトリの内容を ffmpeg と同じ場所に入れておきます。
3. python2 — Bento4 が使います。

次のステップに進む前に、これらを正常にインストールしてください。

サンプルメディアは、Bento4 の `utils` ディレクトリに入れておき、ここで作業します。

**メモ:** 構築済みの ffmpeg には、ライセンスの関係で libfdk\_aac が組み込まれていません。 これを Bento4 がデフォルトで使うので、必要なら、ffmpeg をコンパイルする必要があります。 必要なければ、`mp4-dash-encode.py` のコマンドラインに `--audio-codec=aac` を追加してください。

### コンテナとコーデックのサポート

MSE 仕様のセクション 1.1: Goals で指定されているように、MSE は特定のメディア形式またはコーデックのサポートを必要としないように設計されています。 これは紙の上では事実ですが、ブラウザーのサポートは特定のコンテナ/コーデックの組み合わせによって異なります。

ブラウザーが特定のコンテナをサポートしているかどうかを確認するには、次のように MIME タイプの文字列を `MediaSource.isTypeSupported` メソッドに渡します。

```js
MediaSource.isTypeSupported("audio/mp3"); // false
MediaSource.isTypeSupported("video/mp4"); // true
MediaSource.isTypeSupported('video/mp4; codecs="avc1.4D4028, mp4a.40.2"'); // true
```

文字列はコンテナの MIME タイプであり、オプションでコーデックのリストが続きます。 MIME タイプは簡単に把握できますが、mp4info ユーティリティを使用してコーデック文字列を取得できます。

現在、H.264 動画コーデックと AAC 音声コーデックを備えた MP4 コンテナは、すべての最新ブラウザーでサポートされていますが、他のブラウザーではサポートされていません。

サンプルメディアを QuickTime MOV コンテナから MP4 コンテナに変換するには、ffmpeg を使用できます。 MOV コンテナの音声コーデックは既に AAC であり、動画コーデックは H.264 であるため、トランスコードを実行しないように ffmpeg に指示できます。 代わりに、トランスコードを実行せずに音声トラックと動画トラックをコピーするだけです。 これは、トランスコードするよりも比較的高速です。
```

$ ffmpeg -i trailer_1080p.mov -c:v copy -c:a copy bunny.mp4
$ ls
bunny.mp4         trailer_1080p.mov
```

### 断片化の確認

MP4 を適切にストリーミングするには、アセットが ISO BMF 形式の MP4 である必要があります。 適切な断片化がなければ、特定の MP4 ファイルは MSE での動作が保証されません。 これは、コンテナ内にメタデータが分散され、まとめられていないことを意味します。

MP4 ファイルが適切な MP4 ストリームであるかどうかを確認するには、mp4info ユーティリティを再度使用して MP4 のアトムを一覧表示できます。

**メモ:** 断片化されたバージョンは、追加のメタデータがファイル全体に広がるため、元のバージョンよりわずかに大きくなります。 これは通常、ファイルサイズの 1% 以下の増加です。

### 断片化

まだ MP4 ではないアセットがある場合、ffmpeg は次のように `-movflags frag_keyframe+empty_moov` コマンドラインフラグを使用して、トランスコードプロセス中に適切に断片化された MP4 の発行を処理できます。

```bash
ffmpeg -i trailer_1080p.mov -c:v copy -c:a copy -movflags frag_keyframe+empty_moov bunny_fragmented.mp4
```

すでに MP4 を持っているが、適切に断片化されていない場合は、ffmpeg を改めて使用できます。
```

ffmpeg -i non_fragmented.mp4 -movflags frag_keyframe+empty_moov fragmented.mp4
```

どちらの場合でも、Chrome は次の追加のムービーフラグを設定する必要がある場合があります。

```bash
-movflags frag_keyframe+empty_moov+default_base_moof
```

適切に断片化された MP4 ファイルを用意するだけで開始できます。 適応的ビットレートストリーミングを使用する場合は、複数の解像度でエンコードを作成する必要があります。 MSE は柔軟に実装できるほど柔軟性がありますが、DASH は明確に指定されたアプリケーションプロトコルであるため、既存の DASH クライアントを使用することを強くお勧めします。

### DASH 用のコンテンツの作成

$PATH を介して ffmpeg と Bento4 のユーティリティにアクセスできる場合、Bento4 の `mp4-dash-encode.py` Python スクリプトを実行して、さまざまな解像度でコンテンツの複数のエンコーディングを生成できます。 Bento4 の `mp4-dash.py` Python スクリプトを使用して、クライアントが必要とする対応する MPD ファイルを生成できます。

次のコマンドを実行します（サンプル出力付き）。

```bash
$ python mp4-dash-encode.py -b 5 -v bunny_fragmented.mp4
Encoding 5 bitrates, min bitrate = 500.0 max bitrate = 2000.0
Media Source: Video: resolution=640x360
ENCODING bitrate: 500, resolution: 256x144
ENCODING bitrate: 875, resolution: 384x216
ENCODING bitrate: 1250, resolution: 480x270
ENCODING bitrate: 1625, resolution: 560x316
ENCODING bitrate: 2000, resolution: 640x360

$ python mp4-dash.py video_0*
Parsing media file 1: video_00500.mp4
Parsing media file 2: video_00875.mp4
Parsing media file 3: video_01250.mp4
Parsing media file 4: video_01625.mp4
Parsing media file 5: video_02000.mp4
Splitting media file (audio) video_00500.mp4
Splitting media file (video) video_00500.mp4
Splitting media file (video) video_00875.mp4
Splitting media file (video) video_01250.mp4
Splitting media file (video) video_01625.mp4
Splitting media file (video) video_02000.mp4

$ tree -L 2 output
output
├── audio
│   └── und
├── stream.mpd
└── video
    ├── 1
    ├── 2
    ├── 3
    ├── 4
    └── 5

8 directories, 1 file
```

**メモ:** `mp4-dash-encode.py` は、ffmpeg のエラーメッセージを表示しないようにしています。 `-d` オプションを指定することで、それを見ることができます。

**メモ:** エラーメッセージとして `"Invalid duration specification for force_key_frames: 'expr:eq(mod(n"` が表示されたら、`mp4-dash-encode.py` を修正して `"-force_key_frames 'expr:eq(mod(n,%d),0)'"` から `"'"` を 2 つ取り除きます。

まとめ
---

動画が適切にエンコードされ、適応的ビットレートメディアが生成されると、DASH と MSE を使用して Web で適応的ビットレートストリーミングを開始する準備が整いました。


PictureInPictureWindow: height プロパティ - Web API

PictureInPictureWindow: height プロパティ
====================================

`PictureInPictureWindow` の読み取り専用プロパティである **`height`** は、浮動動画ウィンドウの高さをピクセル単位で返します。

構文
--

```js
pictureInPictureWindow.height
```

### 値

整数で、浮動動画ウィンドウの高さをピクセル単位で示します。このプロパティは読み取り専用で、既定値はありません。

仕様書
---

| Specification |
| --- |
| Picture-in-Picture # ref-for-dom-pictureinpicturewindow-height |

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

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

関連情報
----

* ピクチャインピクチャ API
* `PictureInPictureWindow.width`


PictureInPictureWindow: resize イベント - Web API

PictureInPictureWindow: resize イベント
===================================

**`resize`** イベントは、浮動動画ウィンドウのサイズが変更されたときに発行されます。

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

構文
--

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

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

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

イベント型
-----

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

Event

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

*このインターフェイスには以下のプロパティに加え、親である `Event` から継承したプロパティもあります。*

`PictureInPictureEvent.pictureInPictureWindow` (en-US)

サイズが変更された `PictureInPictureWindow` を返します。

例
-

### ウィンドウのサイズをログ出力

```html
<p>Resize the floating video window to fire the <code>resize</code> event.</p>
<p>Window height: <span id="height"></span></p>
<p>Window width: <span id="width"></span></p>
<video id="video" src="" muted autoplay></video>
```

```js
const video = document.querySelector("#video");
const heightOutput = document.querySelector("#height");
const widthOutput = document.querySelector("#width");

function resize(evt) {
  heightOutput.textContent = evt.target.height;
  widthOutput.textContent = evt.target.width;
}

video.requestPictureInPicture().then((pictureInPictureWindow) => {
  pictureInPictureWindow.onresize = resize;
  // or
  pictureInPictureWindow.addEventListener("resize", resize);
});
```

仕様書
---

| Specification |
| --- |
| Picture-in-Picture # eventdef-pictureinpicturewindow-resize |
| Picture-in-Picture # dom-pictureinpicturewindow-onresize |

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

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


PictureInPictureWindow: width プロパティ - Web API

PictureInPictureWindow: width プロパティ
===================================

`PictureInPictureWindow` の読み取り専用プロパティである **`width`** は、浮動動画ウィンドウの幅をピクセル単位で返します。

構文
--

```js
pictureInPictureWindow.width
```

### 値

整数で、浮動動画ウィンドウの幅をピクセル単位で示します。このプロパティは読み取り専用で、既定値はありません。

仕様書
---

| Specification |
| --- |
| Picture-in-Picture # ref-for-dom-pictureinpicturewindow-width |

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

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

関連情報
----

* ピクチャインピクチャ API
* `PictureInPictureWindow.height`


BackgroundFetchEvent() - Web API

BackgroundFetchEvent()
======================

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

コンストラクター **`BackgroundFetchEvent()`** は新しい `BackgroundFetchEvent` オブジェクトを生成します。このコンストラクタは通常、使用されることはありません。なぜなら、これらのオブジェクトはブラウザによって自動で生成され、バックグラウンドのフェッチイベントのコールバックに渡されるからです。

構文
--

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

### 引数

`type`

 イベント名の文字列。
 大文字と小文字は区別されます。ブラウザーはこれを `backgroundfetchabort` または`backgroundfetchclick` に設定します。

`options`

*`ExtendableEvent()` で定義されたプロパティに加えて*、下記のプロパティを持つオブジェクト。

`registration`

`BackgroundFetchRegistration` オブジェクト。

### 返値

新しく生成された `BackgroundFetchEvent` オブジェクト。

仕様書
---

| Specification |
| --- |
| Background Fetch # dom-backgroundfetchevent-backgroundfetchevent |

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

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


BackgroundFetchEvent.registration - Web API

BackgroundFetchEvent.registration
=================================

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

**`registration`** は `BackgroundFetchEvent` インターフェイスの読み取り専用プロパティで、 `BackgroundFetchRegistration` オブジェクトを返します。

値
-

`BackgroundFetchRegistration`。

例
-

以下の例では、ユーザーがダウンロードの進捗表示のUIをクリックすると、 `onbackgroundfetchclick` イベントが発火します。 `event.registration` を呼び出すと、現在の `BackgroundFetchRegistration` が返されます。

```js
addEventListener("backgroundfetchclick", (event) => {
  console.log(event.registration);
});
```

仕様書
---

| Specification |
| --- |
| Background Fetch # dom-backgroundfetchevent-registration |

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

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


PushEvent: data プロパティ - Web API

PushEvent: data プロパティ
=====================

`data` は **`PushEvent`** インターフェイスの読み取り専用プロパティで、`PushSubscription` に送信されたデータを含む `PushMessageData` オブジェクトへの参照を返します。

値
-

`PushMessageData` オブジェクトです。

例
-

次の例は、 `PushEvent` からデータを取得して、すべてのサービスワーカークライアントで表示しています。

```js
self.addEventListener("push", (event) => {
  if (!(self.Notification && self.Notification.permission === "granted")) {
    return;
  }

  const data = event.data?.json() ?? {};
  const title = data.title || "Something Has Happened";
  const message =
    data.message || "Here's something you might want to check out.";
  const icon = "images/new-notification.png";

  const notification = new Notification(title, {
    body: message,
    tag: "simple-push-demo-notification",
    icon,
  });

  notification.addEventListener("click", () => {
    clients.openWindow(
      "https://example.blog.com/2015/03/04/something-new.html",
    );
  });
});
```

仕様書
---

| Specification |
| --- |
| Push API # dom-pushevent-data |

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

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


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

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

**`PushEvent()`** コンストラクターは、新しい `PushEvent` オブジェクトを生成します。このコンストラクターは、サービスワーカーにのみ公開されていることに注意してください。

構文
--

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

引数
--

`type`

 文字列で、イベントの名前を示します。
 大文字小文字の区別があり、ブラウザーは `push` または `pushsubscriptionchange` に設定します。

`options` 省略可

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

`data`

`PushEvent` に格納したいデータ（もしあれば）。コンストラクターが呼び出されると、結果オブジェクトの `PushEvent.data` プロパティには、これらのバイト列を格納した新しい `PushMessageData` オブジェクトが設定されます。

### 返値

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

例
-

```js
const dataInit = {
  data: "Some sample text",
};

const myPushEvent = new PushEvent("push", dataInit);

myPushEvent.data.text(); // 'Some sample text' を返す
```

仕様書
---

| Specification |
| --- |
| Push API # dom-pushevent-constructor |

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

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

関連情報
----

* プッシュ API
* サービスワーカー API


MIDIInput: midimessage イベント - Web API

MIDIInput: midimessage イベント
===========================

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

Web MIDI API の `midimessage` イベントは、この `MIDIInput` に対応する MIDI ポートで 1 個以上の MIDI メッセージの受信が完了した時発火します。受信したメッセージが格納された `MIDIMessageEvent` のインスタンスがイベントハンドラーに渡されます。

構文
--

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

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

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

イベント型
-----

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

Event

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

*このインターフェイスは `Event` からもプロパティを継承しています。*

`MIDIMessageEvent.data`

1 個の MIDI メッセージのデータバイト列が格納された `Uint8Array` です。構造の詳細については、MIDI の仕様書を参照してください。

例
-

以下の例では、すべての入力ポートで `midimessage` イベントを監視します。メッセージを受信したら、`MIDIMessageEvent.data` プロパティをコンソールに出力します。

```js
inputs.forEach((input) => {
  input.onmidimessage = (message) => {
    console.log(message.data);
  };
});
```

仕様書
---

| Specification |
| --- |
| Web MIDI API # dom-midiinput-onmidimessage |

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

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


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

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

**`Audio()`** コンストラクターは新しい `HTMLAudioElement` を作成し返します。この要素は文書に取り付けてユーザーが操作したり聞いたりすることができますし、画面外で音声を管理したり再生したりするために使用することもできます。

構文
--

```js
new Audio()
new Audio(url)
```

### 引数

`url` 省略可

オプションで、新しい audio 要素に関連付ける音声ファイルの URL をの入った文字列。

### 返値

 新しい `HTMLAudioElement` オブジェクトで、`url` で指定したファイルの音声を再生するために使用するように構成されています。新しいオブジェクトの `preload` プロパティは `auto` に設定され、その `src` プロパティには指定した URL が入ります。URL が与えられなかったら `null` が設定されます。
 URL が指定された場合、ブラウザーは新しいオブジェクトを返す前に、非同期的にメディアリソースの読み込みを始めます。

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

他にも `document` オブジェクトの `createElement()` メソッドなど、要素を作成するためのメソッドを使用して、新しい `HTMLAudioElement` を構築することもできます。

### 再生を始めるタイミングを決める

音声ファイルが十分に読み込まれ、再生が開始されたことを確認する方法は 3 つあります。

* `readyState` プロパティの値を調べます。`HTMLMediaElement.HAVE_FUTURE_DATA` であれば、再生を始めるのに十分なデータがあり、少なくとも短時間は再生できます。`HTMLMediaElement.HAVE_ENOUGH_DATA` であれば、現在のダウンロードレートを指定された場合、音声を中断することなく最後まで再生できる十分なデータがあることを意味します。
* `canplay` イベントを待ち受けします。再生を始めるのに十分な音声が利用できると `<audio>` 要素に送られますが、中断されることもあります。
* `canplaythrough` イベントを待ち受けします。音声が中断することなく最後まで再生できると推測されるときに送られます。

イベントベースの方法が最適です。

```js
myAudioElement.addEventListener("canplaythrough", (event) => {
  /\* 権限があれば、音声が再生できるようになった \*/
  myAudioElement.play();
});
```

### メモリーの使用と管理

再生が行われている場合は、`Audio()` コンストラクターで作成した audio 要素への参照をすべて削除しても、JavaScript ランタイムのガベージコレクション機構によって要素自体がメモリーから削除されることはありません。その代わり、音声は再生され続け、オブジェクトは再生が終わるか（`pause()` が呼び出されるなどで）一時停止されるまでメモリーに残ります。その時点で、オブジェクトはガベージコレクションの対象となります。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-audio-dev |

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

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

関連情報
----

* ウェブメディア技術
* このインターフェイスを実装している HTML 要素: `<audio>`


EventSource.close() - Web API

EventSource.close()
===================

**`close()`** は `EventSource` インターフェイスのメソッドで、コネクションが構築されていればそれを閉じ、 `EventSource.readyState` 属性を `2` （接続終了）に設定します。

**メモ:** コネクションが既に閉じられていた場合、このメソッドは何も行いません。

構文
--

```js
close()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

```js
const button = document.querySelector("button");
const evtSource = new EventSource("sse.php");

button.onclick = () => {
  console.log("Connection closed");
  evtSource.close();
};
```

**メモ:** 完全な例は GitHub で見られます。 PHP を用いた簡単な SSE のデモ を参照してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-eventsource-close-dev |

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

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

関連情報
----

* `EventSource`


EventSource.withCredentials - Web API

EventSource.withCredentials
===========================

**`withCredentials`** は `EventSource` インターフェイスの読み取り専用プロパティで、この `EventSource` オブジェクトが CORS 資格情報が設定してインスタンス化されたかどうかを示す論理値を返します。

値
-

この `EventSource` オブジェクトが CORS 資格情報を設定してインスタンス化されたのか (`true`) あるいはそうでないのか (`false`、既定値) を示す論理値です。

例
-

```js
const evtSource = new EventSource("sse.php");
console.log(evtSource.withCredentials);
```

**メモ:** 完全な例は GitHub で見られます。 PHP を用いた簡単な SSE のデモ を参照してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-eventsource-withcredentials-dev |

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

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

関連情報
----

* `EventSource`


EventSource: message イベント - Web API

EventSource: message イベント
=========================

`message` は `EventSource` API のイベントで、イベントソースからデータを受け取ったときに発生します。

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

構文
--

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

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

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

イベント型
-----

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

Event

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

*このインターフェイスは親である `Event` からプロパティを継承しています。*

`MessageEvent.data` 読取専用

メッセージ送信元によって送信されたデータです。

`MessageEvent.origin` 読取専用

文字列で、メッセージ送信元のオリジンを表します。

`MessageEvent.lastEventId` 読取専用

文字列で、このイベントの一意の ID を表します。

`MessageEvent.source` 読取専用

`MessageEventSource` （`WindowProxy`、`MessagePort`、`ServiceWorker` の何れかのオブジェクト）で、メッセージの送信元を表します。

`MessageEvent.ports` 読取専用

`MessagePort` オブジェクトの配列で、メッセージが送信されるチャンネルに関連するポートを表します（チャンネルメッセージングや、共有ワーカーにメッセージを送信する場合など、適切な場合）。

例
-

この基本的な例では、サーバーからイベントを受け取るために `EventSource` を作成し、 `sse.php` という名前のページがイベントを作成する役割を担っています。

```js
const evtSource = new EventSource("sse.php");
const eventList = document.querySelector("ul");

evtSource.addEventListener("message", (e) => {
  const newElement = document.createElement("li");

  newElement.textContent = `message: ${e.data}`;
  eventList.appendChild(newElement);
});
```

### onmessage による同等品

```js
evtSource.onmessage = (e) => {
  const newElement = document.createElement("li");

  newElement.textContent = `message: ${e.data}`;
  eventList.appendChild(newElement);
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-message |
| HTML Standard # handler-eventsource-onmessage |

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

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

関連情報
----

* サーバー送信イベントの使用
* `open`
* `error`


EventSource.readyState - Web API

EventSource.readyState
======================

**`readyState`** は `EventSource` インターフェイスの読み取り専用プロパティで、コネクションの状態を表す数値を返します。

値
-

コネクションの状態を表す数値。使用可能な値は以下の通りです。

* `0` — 接続試行中
* `1` — 接続中
* `2` — 接続終了
例
-

```js
const evtSource = new EventSource("sse.php");
console.log(evtSource.readyState);
```

**メモ:** 完全な例は GitHub で見られます。 PHP を用いた簡単な SSE のデモ を参照してください。

仕様書
---

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

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

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

関連情報
----

* `EventSource`


EventSource() - Web API

EventSource()
=============

**`EventSource()`** コンストラクターは、リモートリソースを表す新しく作成された `EventSource` を返します。

構文
--

```js
new EventSource(url)
new EventSource(url, options)
```

### 引数

`url`

文字列で、イベント/メッセージを処理するリモートリソースの場所を表します。

`options` 省略可

新しいコネクションを構成するオプションを提供します。可能な項目は次のとおりです。

`withCredentials` 省略可

論理値で、既定値は `false` であり、 CORS の資格情報を `include` に設定すべきかどうかを示します。

例
-

```js
const evtSource = new EventSource("sse.php");
const eventList = document.querySelector("ul");

evtSource.onmessage = (e) => {
  const newElement = document.createElement("li");

  newElement.textContent = `message: ${e.data}`;
  eventList.appendChild(newElement);
};
```

**メモ:** 完全な例は GitHub で見られます。 PHP を用いた簡単な SSE のデモ を参照してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-eventsource-dev |

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

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

関連情報
----

* `EventSource`


EventSource: error イベント - Web API

EventSource: error イベント
=======================

`error` は `EventSource` API のイベントで、イベントソースとのコネクションを開くのに失敗した場合に発生します。

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

構文
--

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

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

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

イベント型
-----

一般的な `Event` です。

例
-

```js
const evtSource = new EventSource("sse.php");

// addEventListener 版
evtSource.addEventListener("error", (e) => {
  console.log("An error occurred while attempting to connect.");
});

// onerror 版
evtSource.onerror = (e) => {
  console.log("An error occurred while attempting to connect.");
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-error |
| HTML Standard # handler-eventsource-onerror |

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

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

関連情報
----

* サーバー送信イベントの使用
* `open`
* `message`


EventSource: open イベント - Web API

EventSource: open イベント
======================

`open` は `EventSource` API のイベントで、イベントソースとのコネクションが開かれたときに発生します。

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

構文
--

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

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

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

イベント型
-----

一般的な `Event` です。

例
-

```js
const evtSource = new EventSource("sse.php");

// addEventListener version
evtSource.addEventListener("open", (e) => {
  console.log("The connection has been established.");
});

// onopen version
evtSource.onopen = (e) => {
  console.log("The connection has been established.");
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-open |
| HTML Standard # handler-eventsource-onopen |

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

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

関連情報
----

* サーバー送信イベントの使用
* `open`
* `error`
* `message`


EventSource.url - Web API

EventSource.url
===============

**`url`** は `EventSource` インターフェイスの読み取り専用プロパティで、ソースの URL を表す文字列を返します。

値
-

ソースの URL を表す文字列です。

例
-

```js
const evtSource = new EventSource("sse.php");
console.log(evtSource.url);
```

**メモ:** 完全な例は GitHub で見られます。 PHP を用いた簡単な SSE のデモ を参照してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-eventsource-url-dev |

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

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

関連情報
----

* `EventSource`