recursal/MDN huggingface dataset:
NodeList: length プロパティ
======================

**`NodeList.length`** プロパティは、`NodeList` のアイテムの数を返します。

値
-

整数値で、`NodeList` 内のアイテムの数を表します。

例
-

`length` プロパティは DOM プログラミングでしばしば有益です。リストがすべて存在するかどうかを確認するために、リストの長さを検査するために使用することが多いからです。また、この例のように `for` ループのイテレーターとしてもよく使用されます。


```js
// 文書内のすべての段落
const items = document.getElementsByTagName("p");

// リスト中のすべてのアイテムに対して実行し、
// HTML の文字列として要素全体を追加
let gross = "";
for (let i = 0; i < items.length; i++) {
  gross += items[i].innerHTML;
}

// gross には HTML のすべての段落が入ります
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-nodelist-length① |

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

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

**`NodeList.keys()`** メソッドは、このオブジェクトに含まれるすべてのキーを走査することができる`イテレーター`を返します。キーは `unsigned integer` です。

構文
--


```js
keys()
```

返値
--

`イテレーター`を返します。

例
-


```js
const node = document.createElement("div");
const kid1 = document.createElement("p");
const kid2 = document.createTextNode("hey");
const kid3 = document.createElement("span");

node.appendChild(kid1);
node.appendChild(kid2);
node.appendChild(kid3);

let list = node.childNodes;

// for...of の使用
for (const key of list.keys()) {
  console.log(key);
}
```


結果は次の通りです。
```

0
1
2
```

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

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

関連情報
----

* `NodeList.prototype.keys` のポリフィル (`core-js`)
* `Node`
* `NodeList`
NodeList: forEach() メソッド
========================

**`forEach()`** は `NodeList` インターフェイスのメソッドで、引数に渡されたコールバックを、リストのそれぞれの値のペアに対して 1 度ずつ挿入順に呼び出します。

構文
--


```js
forEach(callback)
forEach(callback, thisArg)
```

### 引数

`callback`

`someNodeList` の各要素に対して実行する関数です。3 つの引数を受け付けます。

`currentValue`

現在 `someNodeList` で処理されている要素です。

`currentIndex` 省略可

現在 `someNodeList` で処理されている `currentValue` のインデックスです。

`listObj` 省略可

`forEach()` を適用しようとしている `someNodeList` です。


`thisArg` 省略可

`callback` 内で `this` として使う値です。

### 返値

`undefined`.

例
-


```js
const node = document.createElement("div");
const kid1 = document.createElement("p");
const kid2 = document.createTextNode("hey");
const kid3 = document.createElement("span");

node.appendChild(kid1);
node.appendChild(kid2);
node.appendChild(kid3);

const list = node.childNodes;

list.forEach(function (currentValue, currentIndex, listObj) {
  console.log(`${currentValue}, ${currentIndex}, ${this}`);
}, "myThisArg");
```


上記のコードの結果は以下のようになります。
```

[object HTMLParagraphElement], 0, myThisArg
[object Text], 1, myThisArg
[object HTMLSpanElement], 2, myThisArg
```

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-nodelist |

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

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

関連情報
----

* `NodeList.prototype.forEach` のポリフィル (`core-js`)
* `Node`
* `NodeList`
NodeList: item() メソッド
=====================

`NodeList` からインデックスでノードを返します。このメソッドは引数を提供する限り例外を発生しません。インデックスが範囲外の場合は `null` という値が返され、引数が指定されなかった場合は `TypeError` が発生します。

構文
--


```js
item(index)
```


JavaScript では、NodeList からインデックスでアイテムを取得するのに配列風の括弧構文も提供しています。


```js
nodeItem = nodeList[index];
```

### 引数

* `index` はノードを読み取るインデックスです。インデックスはゼロ基点です。
### 返値

`item` メソッドが返す `nodeList` 内の `index` 番目のノード。

### 例外

`TypeError`

引数が提供されなかった場合に発生します。

例
-


```js
const tables = document.getElementsByTagName("table");
const firstTable = tables.item(1); // または tables[1] - DOM 内の 2 番目の表を返す
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-nodelist-item① |

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

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

**`HTMLVideoElement`** の **`requestPictureInPicture()`** メソッドは、動画をピクチャインピクチャモードで表示するための非同期のリクエストを発行します。

動画がピクチャインピクチャになることは保証されていません。そのモードに入る権限が与えられている場合、返された `Promise` は解決され、動画は `enterpictureinpicture` イベントを受け取り、これでピクチャインピクチャになったことを知らせます。

構文
--


```js
requestPictureInPicture()
```

### 引数

なし。

### 返値

`Promise` で、ユーザーがその浮動ウィンドウのサイズを変更するときに使用することができる `PictureInPictureWindow` オブジェクトに解決します。

### 例外

`SecurityError` `DOMException`

この機能の使用が権限ポリシーによってブロックされた場合。

セキュリティ
------

ユーザーによる一時的な有効化が必要です。この機能が動作するには、ユーザーがページまたは UI 要素を操作する必要があります。

例
-

この例では、動画がピクチャインピクチャモードになるようにリクエストされ、浮動ウィンドウのリサイズを処理するためのイベントリスナーを設定します。


```js
function enterPictureInPicture() {
  videoElement.requestPictureInPicture().then((pictureInPictureWindow) => {
    pictureInPictureWindow.addEventListener(
      "resize",
      () => onPipWindowResize(),
      false,
    );
  });
}
```

仕様書
---

| Specification |
| --- |
| Picture-in-Picture # request-pip |

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

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

関連情報
----

* `<video>` 要素
* `HTMLVideoElement.disablePictureInPicture`
* `Document.pictureInPictureEnabled`
* `Document.exitPictureInPicture()`
* `Document.pictureInPictureElement`
* `:picture-in-picture`
HTMLVideoElement: disablePictureInPicture プロパティ
===============================================

`HTMLVideoElement` の **`disablePictureInPicture`** プロパティは HTML の属性を反映し、ピクチャインピクチャ機能が現在の要素で無効になっているかどうかを示します。

値
-

論理値で、この要素でピクチャインピクチャ機能が無効な場合に `true` となります。これは、ユーザーエージェントがその機能をユーザーに提案したり、自動的にリクエストしたりしないことを意味しています。

仕様書
---

| Specification |
| --- |
| Picture-in-Picture # disable-pip |

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

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

**`HTMLVideoElement`** の **`getVideoPlaybackQuality()`** メソッドは、どれだけのフレームが落ちるのかを示す指標を含む `VideoPlaybackQuality` (en-US) オブジェクトを返します。

返されるデータは、動画ストリームの品質を評価するために使用することができます。

構文
--


```js
getVideoPlaybackQuality()
```

### 引数

なし。

### 返値

`VideoPlaybackQuality` (en-US) オブジェクトで、この video 要素の再生品質についての情報を提供します。

例
-

この例では、再生処理でこれまでに経過した動画フレームの総数を示す要素を更新します。この値には、取りこぼしたフレームや破損したフレームも含まれるため、「再生されたフレームの総数」とは異なります。


```js
const videoElem = document.getElementById("my\_vid");
const counterElem = document.getElementById("counter");
const quality = videoElem.getVideoPlaybackQuality();

counterElem.innerText = quality.totalVideoFrames;
```

仕様書
---

| Specification |
| --- |
| Media Playback Quality # dom-htmlvideoelement-getvideoplaybackquality |

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

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

関連情報
----

* `<video>` 要素
* `VideoPlaybackQuality` (en-US) インターフェイス
HTMLVideoElement: enterpictureinpicture イベント
============================================

`enterpictureinpicture` イベントは、`HTMLVideoElement` がピクチャインピクチャモードに入ることに成功した場合に発行されます。

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

構文
--

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


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

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

イベント型
-----

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

Event

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

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

例
-

この例は HTMLVideoElement の `leavepictureinpicture` イベントのイベントリスナーを追加し、イベントハンドラーがイベントの発行に反応したときにメッセージを投稿します。

`addEventListener()` を使用した場合:


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

function onEnterPip() {
  console.log("Picture-in-Picture mode activated!");
}

video.addEventListener("enterpictureinpicture", onEnterPip, false);

button.onclick = () => {
  video.requestPictureInPicture();
};
```


`onenterpictureinpicture` イベントハンドラープロパティを使用した場合:


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

function onEnterPip() {
  console.log("Picture-in-Picture mode activated!");
}

video.onenterpictureinpicture = onEnterPip;

button.onclick = () => {
  video.requestPictureInPicture();
};
```

仕様書
---

| Specification |
| --- |
| Picture-in-Picture # eventdef-htmlvideoelement-enterpictureinpicture |
| Picture-in-Picture # dom-htmlvideoelement-onenterpictureinpicture |

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

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

関連情報
----

* `HTMLVideoElement`
* `Picture-in-Picture API`
HTMLVideoElement: videoHeight プロパティ
===================================

`HTMLVideoElement` インターフェイスの **`videoHeight`** プロパティは読み取り専用で、動画の内在的な高さを CSS ピクセル単位で示します。
 単純に言えば、これはメディアの自然なサイズでの高さです。

値
-

 動画の内在的な高さを CSS のピクセル数で示す整数値。
 要素の `readyState` が `HTMLMediaElement.HAVE_NOTHING` の場合、このプロパティの値は 0 です。これは、動画やポスターのフレームサイズ情報がまだ利用できないためです。

### 内在的な幅と高さについて

ユーザーエージェントは、この要素のメディアの内在的な幅と高さを、このメディアの幅と高さの生のピクセル数から計算し始め、以下のような要素を考慮します。

* このメディアのアスペクト比。
* メディアのクリーンアパーチャ（対象とする縦横比に一致する、メディアを中心とした長方形）。
* 対象とする機器の解像度。
* そのメディア形式が要求する他の要素。

要素がレンダリング動画ではなくポスターフレームを表示している場合、ポスターフレームの内在サイズが `<video>` 要素のサイズとみなされます。

 メディアの内在サイズが変更された時点で、要素の `readyState` が `HAVE_NOTHING` でない場合、`resize` イベントが `<video>` 要素に送られます。
 これは、要素がポスターフレームの表示から動画コンテンツの表示に切り替わるときや、表示される動画トラックが変わるときに発生します。

例
-

この例では、`resize` イベントのハンドラーを作成し、`<video>` 要素のサイズをそのコンテンツの内在サイズに一致するように変更します。


```js
let v = document.getElementById("myVideo");

v.addEventListener(
  "resize",
  (ev) => {
    let w = v.videoWidth;
    let h = v.videoHeight;

    if (w && h) {
      v.style.width = w;
      v.style.height = h;
    }
  },
  false,
);
```


 これは `videoWidth` と `videoHeight` の両方が 0 でない場合にのみ変更を適用することに注意してください。
 これにより、寸法についてまだ利用できる真の情報がない場合に、無意味な変更が適用されるのを避けることができます。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-video-videoheight-dev |

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

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

`HTMLVideoElement` インターフェイスの **`videoWidth`** プロパティは読み取り専用で、この動画の内在的な幅を CSS ピクセル数で表します。
 単純に言えば、これは自然なサイズでのメディアの幅です。

詳しくは、`HTMLVideoElement.videoHeight` > 内在的な幅と高さについてを参照してください。

値
-

 動画の内在的な幅を CSS のピクセル数で指定する整数値。
 要素の `readyState` が `HTMLMediaElement.HAVE_NOTHING` の場合、このプロパティの値は 0 です。これは、動画やポスターのフレームサイズ情報がまだ利用できないためです。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-video-videowidth-dev |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLVideoElement: leavepictureinpicture イベント
============================================

`leavepictureinpicture` イベントは、`HTMLVideoElement` がピクチャインピクチャモードを終了することに成功した場合に発行されます。

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

構文
--

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


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

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

イベント型
-----

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

Event

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

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

例
-

この例は HTMLVideoElement の `leavepictureinpicture` イベントのイベントリスナーを追加し、イベントハンドラーがイベントの発行に反応したときにメッセージを投稿します。

`addEventListener()` を使用した場合:


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

function onExitPip() {
  console.log("Picture-in-Picture mode deactivated!");
}

video.addEventListener("leavepictureinpicture", onExitPip, false);

button.onclick = () => {
  if (document.pictureInPictureElement) {
    document.exitPictureInPicture();
  }
};
```


`onleavepictureinpicture` イベントハンドラープロパティを使用した場合:


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

function onExitPip() {
  console.log("Picture-in-Picture mode deactivated!");
}

video.onleavepictureinpicture = onExitPip;

button.onclick = () => {
  if (document.pictureInPictureElement) {
    document.exitPictureInPicture();
  }
};
```

仕様書
---

| Specification |
| --- |
| Picture-in-Picture # eventdef-htmlvideoelement-leavepictureinpicture |
| Picture-in-Picture # dom-htmlvideoelement-onleavepictureinpicture |

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

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

関連情報
----

* `HTMLVideoElement`
* `Picture-in-Picture API`
ReadableStreamDefaultReader: read() メソッド
========================================

**`read()`** は `ReadableStreamDefaultReader` インターフェイスのメソッドで、ストリームの内部キュー内の次のチャンクへのアクセスを提供するプロミスを返します。

構文
--


```js
read()
```

### 引数

なし。

### 返値

`Promise` です。ストリームの状態に応じて、結果にて履行または拒否されます。
 ありうる状況ものは次の通りです。

* チャンクが使用可能な場合、プロミスが `{ value: theChunk, done: false }` の形式のオブジェクトで履行されます。
* ストリームが閉じられると、プロミスが `{ value: undefined, done: true }` という形式のオブジェクトで履行されます。
* ストリームがエラーになると、プロミスが関連するエラーでプロミスが拒否されます。
### 例外

`TypeError`

ソースオブジェクトが `ReadableStreamDefaultReader` ではないか、ストリームに所有者がいません。

例
-

### 例 1 - 簡単な例

この例は、基本的な API の使用方法を示していますが、例えば、行の境界で終了しないストリームチャンクなどの複雑な問題には対処しません。

この例では、`stream` は以前に作成したカスタムの `ReadableStream` です。 `getReader()` を使用して作成した `ReadableStreamDefaultReader` を使用して読み取ります（完全なコードについては、単純なランダムストリームの例を参照）。 各チャンクを順番に読み取り、ストリームの読み取りが完了するまで UTF-8 のバイトの配列として UI に出力します。 ストリームの読み取りが完了すると、再帰関数から戻り、ストリーム全体を UI の別の部分に出力します。


```js
function fetchStream() {
  const reader = stream.getReader();
  let charsReceived = 0;

  // read() は、値を受け取ったときに解決する promise を返します
  reader.read().then(function processText({ done, value }) {
    // 結果オブジェクトには2つのプロパティが含まれます
    // done - ストリームがすべてのデータを既に提供している場合は true
    // value - 一部のデータ。 done が true の場合、常に undefined
    if (done) {
      console.log("Stream complete");
      para.textContent = result;
      return;
    }

    // フェッチしたストリームの値は Uint8Array です
    charsReceived += value.length;
    const chunk = value;
    let listItem = document.createElement("li");
    listItem.textContent = `Received ${charsReceived} characters so far. Current chunk = ${chunk}`;
    list2.appendChild(listItem);

    result += chunk;

    // さらに読み、この関数を再度呼び出します
    return reader.read().then(processText);
  });
}
```

### 例 2 - テキストを 1 行ずつ処理する

この例は、テキストファイルをフェッチし、テキスト行のストリームとして処理する方法を示しています。 行の境界で終了せず、`Uint8Array` から文字列に変換するストリームチャンクを処理します。


```js
async function\* makeTextFileLineIterator(fileURL) {
  const utf8Decoder = new TextDecoder("utf-8");
  let response = await fetch(fileURL);
  let reader = response.body.getReader();
  let { value: chunk, done: readerDone } = await reader.read();
  chunk = chunk ? utf8Decoder.decode(chunk, { stream: true }) : "";

  let re = /\r\n|\n|\r/gm;
  let startIndex = 0;

  for (;;) {
    let result = re.exec(chunk);
    if (!result) {
      if (readerDone) {
        break;
      }
      let remainder = chunk.substr(startIndex);
      ({ value: chunk, done: readerDone } = await reader.read());
      chunk =
        remainder + (chunk ? utf8Decoder.decode(chunk, { stream: true }) : "");
      startIndex = re.lastIndex = 0;
      continue;
    }
    yield chunk.substring(startIndex, result.index);
    startIndex = re.lastIndex;
  }
  if (startIndex < chunk.length) {
    // 最後の行は改行文字で終わっていません
    yield chunk.substr(startIndex);
  }
}

for await (let line of makeTextFileLineIterator(urlOfFile)) {
  processLine(line);
}
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-default-reader-read① |

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

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

関連情報
----

* `ReadableStreamDefaultReader()` コンストラクター
* 読み取り可能なストリームの使用
ReadableStreamDefaultReader: ReadableStreamDefaultReader() コンストラクター
===================================================================

**`ReadableStreamDefaultReader()`** コンストラクターは、`ReadableStreamDefaultReader` オブジェクトのインスタンスを作成して返します。

**メモ:** 通常、このコンストラクターを手動で使用することはありません。 代わりに、`ReadableStream.getReader()` メソッドを使用してください。

構文
--


```js
new ReadableStreamDefaultReader(stream)
```

### 引数

`stream`

読み取り対象となる `ReadableStream`。

### 返値

`ReadableStreamDefaultReader` オブジェクトのインスタンス。

### 例外

`TypeError`

指定された `stream` 引数が `ReadableStream` ではないか、別のリーダーによる読み取りのために既にロックされています。

例
-

次の簡単な例では、`getReader()` を使用して作成した `ReadableStreamDefaultReader` を使用して、以前に作成したカスタムの `ReadableStream` を読み取ります（完全なコードについては、単純なランダムストリームの例を参照）。 各チャンクを順番に読み取り、ストリームの読み取りが完了するまで UI に出力します。 ストリームの読み取りが完了すると、再帰関数から戻り、ストリーム全体を UI の別の部分に出力します。


```js
function fetchStream() {
  const reader = stream.getReader();
  let charsReceived = 0;

  // read() は、値を受け取ったときに解決する promise を返します
  reader.read().then(function processText({ done, value }) {
    // 結果オブジェクトには2つのプロパティが含まれます。
    // done - ストリームがすべてのデータを既に提供している場合は true。
    // value - 一部のデータ。 done が true の場合、常に undefined。
    if (done) {
      console.log("Stream complete");
      para.textContent = result;
      return;
    }

    // フェッチしたストリームの値は Uint8Array です
    charsReceived += value.length;
    const chunk = value;
    let listItem = document.createElement("li");
    listItem.textContent = `Received ${charsReceived} characters so far. Current chunk = ${chunk}`;
    list2.appendChild(listItem);

    result += chunk;

    // さらに読み、この関数を再度呼び出します
    return reader.read().then(processText);
  });
}
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-default-reader-constructor① |

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

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

関連情報
----

* ストリーム API の概念
* 読み取り可能なストリームの使用
* `ReadableStream`
* `ReadableStreamDefaultController`
ReadableStreamDefaultReader: closed プロパティ
=========================================

**`closed`** は `ReadableStreamDefaultReader` インターフェイスの読み取り専用プロパティで、ストリームが閉じられた場合、またはリーダーのロックが解除された場合に履行され、ストリームがエラーの場合に拒否されるプロミス (`Promise`) を返します。このプロパティを使用すると、ストリーミング処理の終わりに応答するコードを書くことができます。

値
-

`Promise` です。

例
-

このスニペットでは、以前に作成したリーダーに問い合わせて、ストリームが閉じられているかどうかを確認します。 閉じられるとプロミスが履行され、メッセージをコンソールに出力します。


```js
reader.closed.then(() => {
  console.log("reader closed");
});
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-generic-reader-closed② |

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

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

関連情報
----

* `ReadableStreamDefaultReader()` コンストラクター
* 読み取り可能なストリームの使用
ReadableStreamDefaultReader: cancel() メソッド
==========================================

**`cancel()`** は `ReadableStreamDefaultReader` インターフェイスのメソッドで、ストリームをキャンセルし、コンシューマーがストリームに興味を失ったことを通知します。 提供された reason 引数は、基になるソースに与えられ、使用する場合もしない場合もあります。

キャンセルは、ストリームを完全に終了し、読み取り待ちのチャンクがキューに入っている場合でも、それ以上データを必要としない場合に使用します。 キャンセルが呼び出された後、そのデータは失われ、ストリームは読み取り不能になります。 これらのチャンクをまだ読み取り、ストリームを完全に取り除くわけではない場合は、 `ReadableStreamDefaultController.close()` を使用します。

**メモ:** リーダーがアクティブな場合、`cancel()` メソッドは、関連付けられたストリームの場合 (`ReadableStream.cancel()`) と同じように振る舞います。

構文
--


```js
cancel()
cancel(reason)
```

### 引数

`reason` 省略可

人間が読むことができるキャンセルの理由です。この値は使われたり使われなかったりします。

### 返値

`Promise` です。 `reason` 引数で指定された値で履行されます。

### 例外

`TypeError`

ソースオブジェクトが `ReadableStreamDefaultReader` ではないか、ストリームに所有者がいません。

例
-

次の簡単な例では、`getReader()` を使用して作成した `ReadableStreamDefaultReader` を使用して、以前に作成したカスタムの `ReadableStream` を読み取ります（このコードは、単純なランダムストリームの例に基づいています）。 各チャンクを順番に読み取り、ストリームの読み取りが完了するまで UI に出力します。 ストリームの読み取りが完了すると、再帰関数から戻り、ストリーム全体を UI の別の部分に出力します。

ストリームが完了したら（`if (done)`）、`reader.cancel()` を実行してストリームをキャンセルし、それ以上使用する必要がないことを通知します。


```js
function fetchStream() {
  const reader = stream.getReader();
  let charsReceived = 0;

  // read() は、値を受け取ったときに解決する promise を返します
  reader.read().then(function processText({ done, value }) {
    // 結果オブジェクトには2つのプロパティが含まれます
    // done - ストリームがすべてのデータを既に提供している場合は true
    // value - 一部のデータ。 done が true の場合、常に undefined
    if (done) {
      console.log("Stream complete");
      reader.cancel();
      para.textContent = result;
      return;
    }

    // フェッチしたストリームの値は Uint8Array です
    charsReceived += value.length;
    const chunk = value;
    let listItem = document.createElement("li");
    listItem.textContent = `Received ${charsReceived} characters so far. Current chunk = ${chunk}`;
    list2.appendChild(listItem);

    result += chunk;

    // さらに読み、この関数を再度呼び出します
    return reader.read().then(processText);
  });
}
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-generic-reader-cancel② |

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

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

関連情報
----

* `ReadableStreamDefaultReader()` コンストラクター
* 読み取り可能なストリームの使用
ReadableStreamDefaultReader: releaseLock() メソッド
===============================================

**`releaseLock()`** は `ReadableStreamDefaultReader` インターフェイスのメソッドで、ストリームのリーダーのロックを解除します。

ロックを解除したときに関連するストリームにエラーが発生した場合、リーダーはその後同様にエラーが発生したようになります。 そうでない場合、リーダーは閉じた状態になります。

リーダーのロックは、保留中の読み取りリクエストが残っている間、つまり、リーダーの `ReadableStreamDefaultReader.read()` メソッドによって返されたプロミスが終了していない場合、解除できません。 これにより、`TypeError` が発生します。

構文
--


```js
releaseLock()
```

### 引数

なし。

### 返値

なし (`undefined`)。

### 例外

`TypeError`

ソースオブジェクトが `ReadableStreamDefaultReader` でないか、読み取り要求が保留中です。

例
-


```js
function fetchStream() {
  const reader = stream.getReader();

  // ...

  reader.releaseLock();

  // ...
}
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-default-reader-release-lock② |

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

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

関連情報
----

* `ReadableStreamDefaultReader()` コンストラクター
* 読み取り可能なストリームの使用
AudioContext: createMediaStreamSource() メソッド
============================================

`createMediaStreamSource()` は `AudioContext` インターフェイスのメソッドで、指定のメディアストリームから（言い換えると `navigator.getUserMedia` インスタンスから） `MediaStreamAudioSourceNode` オブジェクトを生成します。ここからの音声は再生や編集ができます。

メディアストリームの音声ソースノードの詳細は`MediaStreamAudioSourceNode`のページを参照してください。

構文
--


```js
createMediaStreamSource(stream)
```

### 引数

`stream`

操作のために音声グラフに加えたい `MediaStream` オブジェクト。

### 返値

指定したソースストリームから取得したメディアを持つ音声ノードを表す新しい `MediaStreamAudioSourceNode` オブジェクトです。

例
-

この例では、メディア（音声＋映像）ストリームを `navigator.getUserMedia` から獲得し、それを `<video>` 要素に渡し、映像は再生しますが音声は再生しないようにします。音声は `MediaStreamAudioSourceNode` に渡します。次に、音声をローパスフィルター `BiquadFilterNode` (en-US) （低音を強めるように働きます）に渡し、そして `AudioDestinationNode` に渡します。

`<video>` 要素の下のスライダーはローパスフィルターの増幅量を操作します—スライダーで値を大きくすると、より低音が強くなります。

**メモ:** この例の実行とソースの閲覧もできます。


```js
const pre = document.querySelector("pre");
const video = document.querySelector("video");
const myScript = document.querySelector("script");
const range = document.querySelector("input");

// getUserMediaのブロック - ストリームを得る
// MediaStreamAudioSourceNodeに渡す
// 映像はvideo要素に出力する

if (navigator.mediaDevices) {
  console.log("getUserMedia supported.");
  navigator.mediaDevices
    .getUserMedia({ audio: true, video: true })
    .then((stream) => {
      video.srcObject = stream;
      video.onloadedmetadata = (e) => {
        video.play();
        video.muted = true;
      };

      // MediaStreamAudioSourceNode を生成し、
      // それに HTMLMediaElement を渡す
      const audioCtx = new AudioContext();
      const source = audioCtx.createMediaStreamSource(stream);

      // 二次フィルターを生成する
      const biquadFilter = audioCtx.createBiquadFilter();
      biquadFilter.type = "lowshelf";
      biquadFilter.frequency.value = 1000;
      biquadFilter.gain.value = range.value;

      // AudioBufferSourceNode を gainNode に、
      // そして gainNode を destination に接続する
      // これでマウスを動かすことで音楽のボリュームを調整することができる
      source.connect(biquadFilter);
      biquadFilter.connect(audioCtx.destination);

      // マウスが動いたとき新しい座標を得る
      // そして増幅量を更新する

      range.oninput = () => {
        biquadFilter.gain.value = range.value;
      };
    })
    .catch((err) => {
      console.log(`The following gUM error occurred: ${err}`);
    });
} else {
  console.log("getUserMedia not supported on your browser!");
}

// pre 要素にスクリプトを書き出す

pre.innerHTML = myScript.innerHTML;
```


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

仕様書
---

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

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

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

関連情報
----

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