Body.arrayBuffer()

The arrayBuffer() method of the Body mixin takes a Response stream and reads it to completion. It returns a promise that resolves with an ArrayBuffer.

Syntax

response.arrayBuffer().then(function(buffer) {
  // do something with buffer
});

Parameters

None.

Return value

A promise that resolves with an ArrayBuffer.

Examples

Playing music

In our fetch array buffer live, we have a Play button. When pressed, the getData() function is run. Note that before playing full audio file will be downloaded. If you need to play ogg during downloading (stream it) - consider HTMLAudioElement:

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

In getData() we create a new request using the Request() constructor, then use it to fetch an OGG music track. We also use AudioContext.createBufferSource to create an audio buffer source. When the fetch is successful, we read an ArrayBuffer out of the response using arrayBuffer(), decode the audio data using AudioContext.decodeAudioData, set the decoded data as the audio buffer source's buffer (source.buffer), then connect the source up to the AudioContext.destination.

Once getData() has finished running, we start the audio source playing with start(0), then disable the play button so it can't be clicked again when it is already playing (this would cause an error.)

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

Reading files

The Response() constructor accepts Files and Blobs, so it may be used to read a File into other formats.

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

Specifications

Specification Status Comment
Fetch
The definition of 'arrayBuffer()' in that specification.
Living Standard

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
arrayBuffer
Experimental
Chrome Full support 42
Full support 42
Full support 41
Disabled
Disabled From version 41: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge Full support ≤18Firefox Full support 39
Full support 39
Full support 34
Disabled
Disabled From version 34: this feature is behind the dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 29
Full support 29
Full support 28
Disabled
Disabled From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari Full support 10WebView Android No support NoChrome Android Full support 42Firefox Android No support NoOpera Android Full support 29
Full support 29
Full support 28
Disabled
Disabled From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari iOS Full support YesSamsung Internet Android No support No

Legend

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
User must explicitly enable this feature.
User must explicitly enable this feature.

See also