Response: arrayBuffer() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

arrayBuffer() は Response インターフェイスのメソッドで、Response を取り、終わりまで読み取ります。ArrayBuffer で解決されるプロミスを返します。

構文

js
arrayBuffer()

引数

なし。

返値

ArrayBuffer で解決されるプロミス。

例外

DOMException AbortError

リクエストが中止された場合。

TypeError

以下のいずれかの原因で発生します。

  • レスポンス本体が妨害またはロックされている場合。
  • 本体コンテンツをデコードする際にエラーが発生した場合（例えば、Content-Encoding ヘッダーが不正な場合など）。
RangeError

関連づけられた ArrayBuffer を作成する際に問題が発生した場合。 例えば、データサイズが Number.MAX_SAFE_INTEGER を超える場合など。

例

音楽の演奏

fetch array buffer のライブでは、Play ボタンを配置して、押下されると getData() 関数が実行されるようになっています。 再生する前に音声ファイル全体をダウンロードすることに注意してください。ダウンロード中に演奏を開始したい (つまりストリーム再生したい) 場合は、次のように HTMLAudioElement を使いましょう。

js
new Audio("music.ogg").play();

getData() 関数内では、Request() コンストラクターを使用して新しいリクエストを作成し、それを使用して OGG 音声トラックを読み取ります。 また、AudioContext.createBufferSource を使用して、音声バッファーソースを作成します。 読み取りが成功したら、arrayBuffer() を使用してレスポンスから ArrayBuffer を読み取り、 AudioContext.decodeAudioData() を使用して音声データをデコードし、デコードされたデータを音声バッファーソースのバッファー（source.buffer）として設定し、それから AudioContext.destination にソースを接続します。

getData() の実行が完了すると、start(0) で音声ソースの再生を開始し、それから再生中に再度再生ボタンをクリックできないようにするために（これはよくエラーの原因になります）ボタンを無効化しています。

js
function getData() {
  const audioCtx = new AudioContext();

  return fetch("viper.ogg")
    .then((response) => {
      if (!response.ok) {
        throw new Error(`HTTP error, status = ${response.status}`);
      }
      return response.arrayBuffer();
    })
    .then((buffer) => audioCtx.decodeAudioData(buffer))
    .then((decodedData) => {
      const source = new AudioBufferSourceNode();
      source.buffer = decodedData;
      source.connect(audioCtx.destination);
      return source;
    });
}

// 音声の停止と再生を行うボタンを配線する

play.onclick = () => {
  getData().then((source) => {
    source.start(0);
    play.setAttribute("disabled", "disabled");
  });
};

ファイルを読む

Response() コンストラクターは、 File と Blob を受け入れるため、 File を他の形式に読み込むために使用することができます。

js
function readFile(file) {
  return new Response(file).arrayBuffer();
}
html
<input type="file" onchange="readFile(this.files[0])" />

仕様書

Specification
Fetch Standard
# ref-for-dom-body-arraybuffer①

ブラウザーの互換性

BCD tables only load in the browser

関連情報