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 インターフェイスのメソッドで、リクエストの本体を読み取り、 ArrayBuffer で解決されるプロミスを返します。

構文

js
arrayBuffer()

引数

なし。

返値

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

例

音楽の演奏

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;
    });
}

// wire up buttons to stop and play audio

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

関連情報