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

構文

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

引数

なし。

戻り値

ArrayBuffer で解決される promise。

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

new Audio(music.ogg).play()

getData() 関数内では、Request.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');
}

仕様

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

ブラウザ実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

42

411

あり

39

342

なし

29

283

なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 なし なし あり なし なし なし なし

1. From version 41: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.

2. From version 34: this feature is behind the dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.

3. From version 28: this feature is behind the Experimental Web Platform Features preference.

関連項目

ドキュメントのタグと貢献者

このページの貢献者: woodmix, YuichiNukiyama
最終更新者: woodmix,