Body.arrayBuffer()

Body ミックスインの arrayBuffer() メソッドは、Response ストリームを取得して、完全に読み取ります。 ArrayBuffer で解決される promise を返します。

構文

response.arrayBuffer().then(function(buffer) {
  // buffer を使用した何らかの処理
});

パラメーター

なし。

戻り値

ArrayBuffer で解決される promise。

音楽の演奏

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

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

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

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

function getData() {
  source = audioCtx.createBufferSource();

  var myRequest = new Request('viper.ogg');

  fetch(myRequest).then(function(response) {
    return response.arrayBuffer();
  }).then(function(buffer) {
    audioCtx.decodeAudioData(buffer, function(decodedData) {
      source.buffer = decodedData;
      source.connect(audioCtx.destination);
    });
  });
};

// wire up buttons to stop and play audio

play.onclick = function() {
  getData();
  source.start(0);
  play.setAttribute('disabled', 'disabled');
}

ファイルを読む

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

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

仕様

仕様 状態 コメント
Fetch
arrayBuffer() の定義
現行の標準

ブラウザーの互換性

BCD tables only load in the browser

関連情報