recursal/MDN huggingface dataset:
AudioContext: sinkchange イベント
=============================

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

`AudioContext` インターフェイスの **`sinkchange`** イベントは、出力音声デバイスが変更された (そしてその結果 `AudioContext.sinkId` が変更された) 時発火します。

構文
--

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


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

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

イベント型
-----

`Event` です。

例
-

`sinkchange` イベントのリスナーは、音声出力デバイスの変更を報告するのに利用できます。`sinkId` に `AudioSinkInfo` オブジェクトが入っている場合、音声がどの出力デバイスでも再生されないようになったことを表すことに注意してください。


```js
audioCtx.addEventListener("sinkchange", () => {
  if (typeof audioCtx.sinkId === "object" && audioCtx.sinkId.type === "none") {
    console.log("音声がどのデバイスでも再生されなくなりました");
  } else {
    console.log(`音声出力デバイスが ${audioCtx.sinkId} に変更されました`);
  }
});
```


動くコードは、SetSinkId test example を参照してください。

仕様書
---

| Specification |
| --- |
| Web Audio API # eventdef-audiocontext-sinkchange |

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

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

関連情報
----

* SetSinkId test example
* Change the destination output device in Web Audio
* `AudioContext.setSinkId()`
* `AudioContext.sinkId`
AudioContext: AudioContext() コンストラクター
=====================================

**`AudioContext()`** コンストラクターは新しい `AudioContext` オブジェクトを生成します。このオブジェクトは音声モジュールが相互に接続された音声処理のグラフを表現しています。このグラフ中で用いられる音声モジュールは `AudioNode` として表現されます。

構文
--


```js
new AudioContext()
new AudioContext(options)
```

### 引数

`options` 省略可

コンテキストを設定するために使用するオブジェクト。利用できるプロパティは以下のとおりです。

`latencyHint` 省略可

 コンテキストを使用する再生の種類。定義済みの文字列（`"balanced"`、`"interactive"`、`"playback"`）、またはコンテキストの推奨する最大レイテンシーを秒単位で示す倍精度浮動小数点数値です。
 ユーザーエージェントは、このリクエストに応じても応じなくても構いません。
 コンテキストを作成した後、 `AudioContext.baseLatency` の値を調べて真のレイテンシーを決定します。


* `"balanced"`: ブラウザーはレイテンシー値を選択する際、音声出力のレイテンシーと消費電力のバランスをとります。
* `"interactive"` （既定値）: 音声は、ユーザー操作に反応したり、動画やゲームのアクションなどの視覚的な合図に合わせる必要があるなど、インタラクティブな要素に関与します。
 ブラウザーは音声にグリッチを発生させない使用可能な最低のレイテンシーを選択します。これは消費電力の増加を要求される可能性があります。
* `"playback"`: ブラウザーは、レイテンシーを犠牲にして消費電力を最小限に抑え、再生時間を最大化するレイテンシーを選択します。
 音楽再生など、操作を必要としない再生に有益な機能です。

`sampleRate` 省略可

 新しいコンテキストに使用するサンプリングレートを示します。この値は、新しいコンテキストを構成するサンプリングレートを示す浮動小数点数で、 1 秒あたりのサンプル数でなければなりません。
 また、 `AudioBuffer.sampleRate` で対応している値でなければなりません。
 値は通常 8,000Hz から 96,000Hz の間で、既定値は出力機器によって異なりますが、サンプリングレート 44,100Hz が最も一般的です。
 もし `sampleRate` プロパティがオプションに含まれていなかったり、音声コンテキストを作成するときにオプションが指定されていなかったりした場合 は、新しいコンテキストの出力機器が推奨するサンプリングレートが既定で使用されます。


`sinkId` 省略可 
Experimental

`AudioContext` に使用するオーディオ出力機器のシンク ID を指定します。これは以下の値のうちの一つを取ります。

* シンク ID を表す文字列です。これは例えば、 `MediaDevices.enumerateDevices()` が返す `MediaDeviceInfo` オブジェクトの `deviceId` プロパティから取得したものです。
* シンク ID を表す文字列です。シンク ID を表す文字列です。


### 返値

新しい `AudioContext` インスタンスです。

### 例外

`NotSupportedError` `DOMException`

指定した `sampleRate` がコンテキストで対応していない場合に発生します。

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

仕様書では、ユーザーエージェントが対応すべき音声コンテキストの数や、レイテンシの最小・最大要件（もしあれば）などについてあまり詳しく説明していないため、これらの詳細はブラウザーによって異なる可能性があります。重要であれば、必ず値を調べてください。

特に、仕様書では同時に開くための音声コンテキストの最大数や最小数を示していないため、これはブラウザーの実装に任せられています。

### Google Chrome

#### Chrome におけるタブごとの音声コンテキストの制約

バージョン 66 以前の Google Chrome では、 1 つのタブにつき最大 6 つの音声コンテキストにしか対応していませんでした。

#### Chrome での標準外の例外

`latencyHint` プロパティの値が有効でない場合、Chrome は "The provided value '...' is not a valid enum value of type AudioContextLatencyCategory" というメッセージと共に `TypeError` 例外を発生します。

例
-

この例では、インタラクティブ音声用の新しい `AudioContext` を作成し（遅延を最適化）、サンプルレートを 44.1kHz、音声出力を固有のものにします。


```js
const audioCtx = new AudioContext({
  latencyHint: "interactive",
  sampleRate: 44100,
  sinkId: "bb04fea9a8318c96de0bd...", // truncated for brevity
});
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audiocontext-audiocontext |

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

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

関連情報
----

* `new OfflineAudioContext()` コンストラクター
AudioContext: resume() メソッド
===========================

**`resume()`** は `AudioContext` インターフェイスのメソッドで、一時停止された音声コンテキストの時間の流れを再開します。

`OfflineAudioContext` でこのメソッドを呼び出すと、 `INVALID_STATE_ERR` 例外が発生します。

構文
--


```js
resume()
```

### 引数

なし。

### 返値

コンテキストが再開されたときに解決する `Promise` です。このプロミスは、コンテキストが既に閉じている場合は拒否されます。

例
-

次のスニペットは AudioContext states のデモ（ライブ実行）から取ったものです。suspend/resume ボタンをクリックすると、`BaseAudioContext.state` を問い合わせます。もし `running` ならば、 `suspend()` が呼び出されます。 `suspended` ならば、 `resume()` が呼ばれます。両方ともプロミスが解決すると、ボタンのラベルが適切なものに更新されます。


```js
susresBtn.onclick = () => {
  if (audioCtx.state === "running") {
    audioCtx.suspend().then(() => {
      susresBtn.textContent = "Resume context";
    });
  } else if (audioCtx.state === "suspended") {
    audioCtx.resume().then(() => {
      susresBtn.textContent = "Suspend context";
    });
  }
};
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audiocontext-resume |

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

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

関連情報
----

* ウェブオーディオ API の使用
* ウェブオーディオ API
AudioContext: close() メソッド
==========================

`close()` は `AudioContext` インターフェイスのメソッドで、音声コンテキストを閉じて使っていたシステムの音声リソースを全て解放します。

この関数は、他の参照も同様に解放されない限り、 `AudioContext` が生成したオブジェクトは自動的には解放しません。しかし、これは音声リソースを強制的に解放します。よって、音声コンテキストの更なる生成と使用はできなくなり、音声コンテキストの時間の流れは止まり、音声データの処理は停止します。 `AudioContext` の生成をブロックするリソースがすべて解放されたとき、返された `Promise` が解決します。このメソッドは `OfflineAudioContext` で呼ばれたとき `INVALID_STATE_ERR` 例外が発生します。

構文
--


```js
close()
```

### 引数

なし。

### 返値

`undefined` で解決する `Promise` です。

例
-

次のスニペットは AudioContext states デモ（すぐ実行）から取ったものです。stop ボタンをクリックすると、 `close()` が呼び出されます。プロミスに成功すると、リセットされ最初の状態に戻ります。


```js
stopBtn.onclick = () => {
  audioCtx.close().then(() => {
    startBtn.removeAttribute("disabled");
    susresBtn.setAttribute("disabled", "disabled");
    stopBtn.setAttribute("disabled", "disabled");
  });
};
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audiocontext-close |

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

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

関連情報
----

* ウェブオーディオ API の使用
* ウェブオーディオ API
AudioContext: suspend() メソッド
============================

`suspend()` は `AudioContext` インターフェイスのメソッドで、音声コンテキストの時間の流れを一時停止します。音声ハードウェアへのアクセスを一時的に停止し、処理に必要だった CPU/バッテリーの使用を減らすことが出来ます。これは、アプリケーションがしばらくの間音声を扱わない間に、音声ハードウェアに電源を供給しないようにしたいときに便利です。

`OfflineAudioContext` でこのメソッドを呼び出すと、 `INVALID_STATE_ERR` 例外が発生します。

構文
--


```js
suspend()
```

### 引数

なし。

### 返値

`Promise` であり、これは `undefined` で解決します。コンテキストが既に閉じている場合、プロミスは失敗します。

例
-

次のスニペットは AudioContext states デモ（ライブ実行）から取ったものです。suspend/resume ボタンをクリックすると、 `AudioContext.state` を問い合わせます。もし `running` ならば、 `suspend()` が呼び出されます。 `suspended` ならば、 `resume()` が呼び出されます。両方ともプロミスに成功するとボタンのラベルが適したものに更新されます。


```js
susresBtn.onclick = () => {
  if (audioCtx.state === "running") {
    audioCtx.suspend().then(() => {
      susresBtn.textContent = "Resume context";
    });
  } else if (audioCtx.state === "suspended") {
    audioCtx.resume().then(() => {
      susresBtn.textContent = "Suspend context";
    });
  }
};
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audiocontext-suspend |

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

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

関連情報
----

* ウェブオーディオ API の使用
* ウェブオーディオ API
AudioContext: createMediaStreamDestination() メソッド
=================================================

`createMediaStreamDestination()` は `AudioContext` インターフェイスのメソッドで、 WebRTC の `MediaStream` と関連付けられた `MediaStreamAudioDestinationNode` オブジェクトを生成します。この MediaStream はローカルファイルに格納されたり他のコンピューターに送信されたりする音声ストリームを表します。

`MediaStream` はノードが生成されたときに作成され、`MediaStreamAudioDestinationNode`の `stream` プロパティを通じてアクセスすることができます。このストリームは `navigator.getUserMedia` で得られた `MediaStream` と同じような使い方ができます。例えば、`RTCPeerConnection` インターフェイスの `addStream()` メソッドでリモートの端末に送ることができます。

詳細は `MediaStreamAudioDestinationNode` のページを参照してください。

構文
--


```js
createMediaStreamDestination()
```

### 引数

なし。

### 返値

`MediaStreamAudioDestinationNode` です。

例
-

次の簡単な例では、`MediaStreamAudioDestinationNode` と `OscillatorNode` と `MediaRecorder` (そのため現時点では、このサンプルは Firefox と Chrome でしか動作しません) を作成します。`MediaRecorder` は `MediaStreamDestinationNode` からの情報を記録するように設定されています。

ボタンをクリックするとオシレーター（振動子）が開始し、`MediaRecorder` も開始します。再びボタンを押して止めると、オシレーターと `MediaRecorder` の両方が停止します。`MediaRecorder` が停止すると `dataavailable` イベントが発火され、イベントデータが `chunks`配列にプッシュされます。その後、`stop` イベントが発火すると、新しい `blob` が opus タイプで作られます—そこには `chunks`配列のデータが書き込まれていて、その blob の URL を指す新しいウィンドウ（タブ）が開きます。

そこで opus ファイルの再生と保存ができます。


```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>createMediaStreamDestination() demo</title>
  </head>
  <body>
    <h1>createMediaStreamDestination() demo</h1>

    <p>Encoding a pure sine wave to an Opus file</p>
    <button>Make sine wave</button>
    <audio controls></audio>
    <script>
 const b = document.querySelector("button");
 let clicked = false;
 const chunks = [];
 const ac = new AudioContext();
 const osc = ac.createOscillator();
 const dest = ac.createMediaStreamDestination();
 const mediaRecorder = new MediaRecorder(dest.stream);
 osc.connect(dest);

 b.addEventListener("click", (e) => {
 if (!clicked) {
 mediaRecorder.start();
 osc.start(0);
 e.target.textContent = "Stop recording";
 clicked = true;
 } else {
 mediaRecorder.stop();
 osc.stop(0);
 e.target.disabled = true;
 }
 });

 mediaRecorder.ondataavailable = (evt) => {
 // それぞれのチャンク (blob) を配列に入れる
 chunks.push(evt.data);
 };

 mediaRecorder.onstop = (evt) => {
 // blob を作成し開く
 const blob = new Blob(chunks, { type: "audio/ogg; codecs=opus" });
 document.querySelector("audio").src = URL.createObjectURL(blob);
 };
 </script>
  </body>
</html>
```


**メモ:** Github で実際に動作する例を閲覧したり、ソースコードを読むことができます。

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audiocontext-createmediastreamdestination |

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

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

関連情報
----

* ウェブオーディオ API の使用
AudioContext: createMediaStreamTrackSource() メソッド
=================================================

**`createMediaStreamTrackSource()`** は `AudioContext` インターフェイスのメソッドで、指定された `MediaStreamTrack` からデータを受け取る音源を表す `MediaStreamTrackAudioSourceNode` を作成して返します。

このメソッドが `createMediaStreamSource()` と異なる点は、指定された `MediaStream` の中の `id` が辞書順（アルファベット順）で最初の音声トラックからデータを受け取る `MediaStreamAudioSourceNode` を作成する点です。

構文
--


```js
createMediaStreamTrackSource(track)
```

### 引数

`track`

新しいノードのすべての音声データの取得元として使用する `MediaStreamTrack` です。

### 返値

指定の音声トラックから得られる音声データの取得元として働く `MediaStreamTrackAudioSourceNode` オブジェクトを返します。

例
-

この例では、ユーザーのマイクへのアクセスを要求するために `getUserMedia()` を使います。アクセスができるようになると、音声コンテキストを作成し、`getUserMedia()` が返したストリームの最初の音声トラックから音声を取得する `MediaStreamTrackAudioSourceNode` を `createMediaStreamTrackSource()` により作成します。

そして、`createBiquadFilter()` により `BiquadFilterNode` (en-US) を作成し、音源から流れてくる音声にローシェルフフィルターを適用するように意図通り設定します。すると、マイクからの出力が新しいバイクワッドフィルターに流れ、フィルターの出力が音声コンテキストの出力先 (`destination`) に順に流れるようになります。


```js
navigator.mediaDevices
  .getUserMedia({ audio: true, video: false })
  .then((stream) => {
    audio.srcObject = stream;
    audio.onloadedmetadata = (e) => {
      audio.play();
      audio.muted = true;
    };

    const audioCtx = new AudioContext();
    const audioTracks = stream.getAudioTracks();
    const source = audioCtx.createMediaStreamTrackSource(audioTracks[0]);

    const biquadFilter = audioCtx.createBiquadFilter();
    biquadFilter.type = "lowshelf";
    biquadFilter.frequency.value = 3000;
    biquadFilter.gain.value = 20;

    source.connect(biquadFilter);
    biquadFilter.connect(audioCtx.destination);
  })
  .catch((err) => {
    // getUserMedia() のエラーを処理する
  });
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audiocontext-createmediastreamtracksource |

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

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

関連情報
----

* ウェブオーディオ API
* ウェブオーディオ API の使用
* `MediaStreamTrackAudioSourceNode`
AudioContext: outputLatency プロパティ
=================================

**`outputLatency`** は `AudioContext` の読み取り専用プロパティで、現在の音声コンテキストにおける出力遅延の見積を提供します。

この値は、ブラウザーが音声バッファーを再生のために音声グラフからホストシステムの音声サブシステムに渡してから、バッファー内の最初のサンプルが実際に音声出力デバイスで処理されるまでの秒数です。

この値は、プラットフォームおよび利用可能なハードウェアによって変わります。

値
-

出力遅延の秒数を表す double 値です。

例
-


```js
const audioCtx = new AudioContext();
console.log(audioCtx.outputLatency);
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audiocontext-outputlatency |

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

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

関連情報
----

* ウェブオーディオ API の使用
* ウェブオーディオ API
AudioContext: getOutputTimestamp() メソッド
=======================================

**`getOutputTimestamp()`** は `AudioContext` インターフェイスのメソッドで、現在の音声コンテキストに関係する 2 つの音声タイムスタンプが格納された新しい `AudioTimestamp` オブジェクトを返します。

2 つの値とは、以下のものです。

* `AudioTimestamp.contextTime`: コンテキストの `AudioContext.currentTime` で用いられるのと同じ単位と始点の、現在音声出力デバイスで出力されているサンプルフレームの時刻（すなわち、出力音声ストリームの位置）です。
 基本的には、これは音声コンテキストが最初に作られてからの時間です。
* `AudioTimestamp.performanceTime`: `performance.now()` で用いられるのと同じ単位と始点の、`contextTime` の値に対応するサンプルフレームが音声出力デバイスで出力される時刻の推定値です。これは、音声コンテキストを含む文章が最初に描画されてからの時間です。
構文
--


```js
getOutputTimestamp()
```

### 引数

なし

### 返値

`AudioTimestamp` オブジェクトです。このオブジェクトは以下のプロパティを持ちます。

* `contextTime`: `BaseAudioContext` の `currentTime` で用いられる時間座標系上の点で、音声コンテキストが最初に作られてからの時間です。
* `performanceTime`: `Performance` インターフェイスで用いられる時間座標系上の点で、音声コンテキストを含む文章が最初に描画されてからの時間です。
例
-

以下のコードでは、play ボタンが押されると音声ファイルの再生を開始し、`requestAnimationFrame` によるループを開始します。このループでは、継続して `contextTime` と `performanceTime` を出力します。

この例のコード全体は output-timestamp で見ることができます。(動く例を見る)


```js
// play ボタンを押す
playBtn.addEventListener("click", () => {
  // ユーザーの操作があったので、audioCtx を作ることができる
  if (!audioCtx) {
    audioCtx = new AudioContext();
  }
  source = new AudioBufferSourceNode(audioCtx);
  getData();
  source.start(0);
  playBtn.disabled = true;
  stopBtn.disabled = false;
  rAF = requestAnimationFrame(outputTimestamps);
});

// stop ボタンを押す
stopBtn.addEventListener("click", () => {
  source.stop(0);
  playBtn.disabled = false;
  stopBtn.disabled = true;
  cancelAnimationFrame(rAF);
});

// タイムスタンプ出力用の補助関数
function outputTimestamps() {
  const ts = audioCtx.getOutputTimestamp();
  output.textContent = `Context time: ${ts.contextTime} | Performance time: ${ts.performanceTime}`;
  rAF = requestAnimationFrame(outputTimestamps); // 自身を再登録する
}
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audiocontext-getoutputtimestamp |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
AudioContext: createMediaElementSource() メソッド
=============================================

`createMediaElementSource()` は `AudioContext` インターフェイスのメソッドで、新しい `MediaElementAudioSourceNode` オブジェクトを作成するために使用されます。 HTML 内に存在する`<audio>` または `<video>` を指定すると、その音声を再生し、操作することができます。

メディア要素の音声ソースノードについての詳細は、 `MediaElementAudioSourceNode` を参照して下さい。

構文
--


```js
createMediaElementSource(myMediaElement)
```

### 引数

`myMediaElement`

音声処理グラフに与えて操作したい `HTMLMediaElement` オブジェクトです。

### 返値

`MediaElementAudioSourceNode` です。

例
-

以下の例では、 `createMediaElementSource()` を使用して `<audio>` から音源を作成します。再生される音源は `GainNode` を介し `AudioDestinationNode` に渡されます。マウスポインターが動くと `updatePage()` 関数が呼ばれ、マウスポインターの Y 座標の値をウィンドウの高さで割った比率を元に現在のゲインを計算します。また、マウスポインターを上下に動かすことで、再生している音楽の音量を上げ下げできます。

**メモ:** ライブで実行する例と、ソースを見ることができます。


```js
const audioCtx = new AudioContext();
const myAudio = document.querySelector("audio");

// MediaElementAudioSourceNodeを作成
// HTMLMediaElementをそこへ接続
const source = audioCtx.createMediaElementSource(myAudio);

// ゲインノードを作成
const gainNode = audioCtx.createGain();

// マウスポインターの Y 座標と
// 画面の高さを保持するための変数を作成
let curY;
const HEIGHT = window.innerHeight;

// マウスが動いたら新しいY座標を取得し、
// ゲインの値を設定する
document.onmousemove = updatePage;

function updatePage(e) {
  curY = e.pageY;
  gainNode.gain.value = curY / HEIGHT;
}

// AudioBufferSourceNode を gainNode へ接続
// gainNode を destination へ接続
// これで音楽の再生と、マウスカーソルで音量を調節できるようになる
source.connect(gainNode);
gainNode.connect(audioCtx.destination);
```


**メモ:** `createMediaElementSource()`を呼び出した結果、 `HTMLMediaElement` からの音声再生は AudioContext の処理グラフに再ルーティングされます。そのため、メディアの再生/一時停止は、メディア要素 API とプレーヤコントロールを通して行うことができます。

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audiocontext-createmediaelementsource |

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

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

関連情報
----

* ウェブオーディオ API の使用
AudioContext: baseLatency プロパティ
===============================

**`baseLatency`** は `AudioContext` インターフェイスの読み取り専用プロパティで、`AudioDestinationNode` すなわち音声グラフの終端から音声バッファーをホストシステムで再生の準備ができている音声サブシステムに渡すときに発生する処理の遅延の秒数を表す `double` の値を返します。

**メモ:** コンテキストの生成時に `latencyHint` オプションを用いることで特定の遅延を要求することができます。しかし、ブラウザーはこのオプションを無視する可能性があります。

値
-

ベース遅延の秒数を表す `double` の値です。

例
-


```js
// デフォルトの遅延 ("interactive")
const audioCtx1 = new AudioContext();
console.log(audioCtx1.baseLatency); // 0.00

// より大きい遅延 ("playback")
const audioCtx2 = new AudioContext({ latencyHint: "playback" });
console.log(audioCtx2.baseLatency); // 0.15
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audiocontext-baselatency |

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

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

関連情報
----

* ウェブオーディオ API の使用
* ウェブオーディオ API
AudioContext: sinkId プロパティ
==========================

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

**`sinkId`** は `AudioContext` インターフェイスの読み取り専用プロパティで、現在の音声出力機器のシンク ID を返します。

値
-

このプロパティは、どのようにシンク ID が設定されているかにより、以下の値のいずれかを返します。

空文字列

シンク ID が明示的に設定されていない場合、デフォルトのシステム音声出力機器が用いられ、`sinkId` は空文字列を返します。

文字列

シンク ID が（`setSinkId()` を用いるか、`AudioContext()` コンストラクターのオプション `sinkId` を用いて）文字列として設定されている場合、`sinkId` は同じ文字列を返します。

`AudioSinkInfo` オブジェクト

シンク ID が（`setSinkId()` を用いるか、`AudioContext()` コンストラクターのオプション `sinkId` を用いて）オプションオブジェクトとして設定されている場合、`sinkId` は最初のオプションオブジェクトで設定された値と同じ値を持つ `AudioSinkInfo` オブジェクトを返します。

例
-

SetSinkId test example では、`AudioBufferSourceNode` により 3 秒間のホワイトノイズを生成し、`GainNode` を通して少し音量を下げる音声グラフを作成します。さらに、ユーザーが音声出力機器を変えることができるドロップダウンメニューを提供します。

Play ボタンがクリックされると、音声グラフを組み立て、再生を開始し、`sinkId` の値に基づいて現在の機器の情報を記録します。これは以下のような動作になります。

* 空文字列は、まだ既定の機器が使われていることを表します。
* 値がオブジェクトである場合は、`type: 'none'` が格納されたオプションオブジェクトを設定しているため、音声はどの機器でも再生されません。
* それ以外の場合は、値はシンク ID の文字列のはずなので、記録します。


```js
playBtn.addEventListener("click", () => {
  const source = audioCtx.createBufferSource();
  source.buffer = myArrayBuffer;
  source.connect(gain);
  gain.connect(audioCtx.destination);
  source.start();

  if (audioCtx.sinkId === "") {
    console.log("音声は既定の機器で再生されています");
  } else if (
    typeof audioCtx.sinkId === "object" &&
    audioCtx.sinkId.type === "none"
  ) {
    console.log("音声はどの機器でも再生されていません");
  } else {
    console.log(`音声は機器 ${audioCtx.sinkId} で再生されています`);
  }
});
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audiocontext-sinkid |

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

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

関連情報
----

* SetSinkId test example
* Change the destination output device in Web Audio
* `AudioContext.setSinkId()`
* `sinkchange`
CSSKeyframesRule.name
=====================

**`name`** は `CSSKeyframeRule` インターフェイスのプロパティで、 `animation-name` プロパティで使用されるアニメーションの名前を取得したり設定したりします。

### 値

文字列です。

例
-

 この CSS には keyframes アットルールがあります。これは `document.styleSheets[0].cssRules` で返される最初の `CSSRule` になります。
 `myRules[0]` は `CSSKeyframesRule` オブジェクトを返し、 `name` は "slidein" に設定されます。


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

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



```js
let myRules = document.styleSheets[0].cssRules;
let keyframes = myRules[0]; // CSSKeyframesRule
console.log(keyframes.name); // "slidein"
```

仕様書
---

| Specification |
| --- |
| CSS Animations Level 1 # dom-csskeyframesrule-name |

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

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

**`cssRules`** は `CSSKeyframeRule` インターフェイスの読み取り専用プロパティで、 `CSSRuleList` で keyframes アットルールのルールを返します。

### 値

`CSSRuleList` です。

例
-

 この CSS には keyframes アットルールがあります。これは `document.styleSheets[0].cssRules` で返される最初の `CSSRule` になります。
 `myRules[0]` は `CSSKeyframesRule` オブジェクトを返します。 `cssRules` プロパティは 2 つのルールを含む `CSSRuleList` を返します。


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

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



```js
let myRules = document.styleSheets[0].cssRules;
let keyframes = myRules[0]; // CSSKeyframesRule
console.log(keyframes.cssRules); // 2 つのルールを含む CSSRuleList オブジェクト
```

仕様書
---

| Specification |
| --- |
| CSS Animations Level 1 # dom-csskeyframesrule-cssrules |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSKeyframesRule: appendRule() メソッド
===================================

**`appendRule()`** は `CSSKeyframeRule` インターフェイスのメソッドで、 `CSSKeyFrameRule` をルールの末尾に追加します。

構文
--


```js
appendRule(rule)
```

### 引数

`rule`

keyframe ルールの入った文字列です。

### 返値

なし (`undefined`)。

例
-

 この CSS には keyframes アットルールがあります。これは `document.styleSheets[0].cssRules` で返される最初の `CSSRule` になります。
 `myRules[0]` は `CSSKeyframesRule` オブジェクトを返します。その `cssRules` プロパティは 1 つのルールの入った `CSSRuleList` を返します。

`appendRule` でもう 1 つのルールを追加すると、 `cssRules` プロパティは 2 つのルールが入った `CSSRuleList` を返します。


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



```js
let myRules = document.styleSheets[0].cssRules;
let keyframes = myRules[0]; // a CSSKeyframesRule
keyframes.appendRule("to {transform: translateX(100%);}");
console.log(keyframes.cssRules); // 2 つのルールが入った CSSRuleList オブジェクト
```

仕様書
---

| Specification |
| --- |
| CSS Animations Level 1 # interface-csskeyframesrule-appendrule |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSKeyframesRule: findRule() メソッド
=================================

**`findRule()`** は `CSSKeyframeRule` インターフェイスのメソッドで、指定されたキーフレームセレクターに一致する `CSSKeyFrameRule` を検索します。

構文
--


```js
findRule(select)
```

### 引数

`select`

見つけるルールのキーフレームセレクターの入った文字列です。次のどちらかになります。

* 0% から 100% までのパーセント値をカンマで区切ったリスト
* または `from` か `to` のキーワード

なお、指定するキーフレームセレクターの値の数と順序は、対象となるキーフレームルールのものと一致していなければなりません。ホワイトスペースは無視されます。

### 返値

最後にルールに一致した `CSSKeyframeRule` を返します。ルールが見つからなかった場合は、何も返されません。

例
-

 この CSS には keyframes アットルールがあります。これは `document.styleSheets[0].cssRules` で返される最初の `CSSRule` になります。
 `myRules[0]` は `CSSKeyframesRule` オブジェクト 1 つを返します。 findRule("to") を呼び出すと、 2 番目のルールを表す `CSSKeyframeRule` が返されます。


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

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



```js
let myRules = document.styleSheets[0].cssRules;
let keyframes = myRules[0]; // CSSKeyframesRule
console.log(keyframes.findRule("to")); // CSSKeyframeRule オブジェクト
```

仕様書
---

| Specification |
| --- |
| CSS Animations Level 1 # interface-csskeyframesrule-findrule |

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

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