Response: arrayBuffer() method

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.

Note: This feature is available in Web Workers.

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

Syntax

js
arrayBuffer()

Parameters

None.

Return value

A promise that resolves with an ArrayBuffer.

Exceptions

DOMException AbortError

The request was aborted.

TypeError

Thrown for one of the following reasons:

RangeError

There was a problem creating the associated ArrayBuffer. For example, if the data size is more than Number.MAX_SAFE_INTEGER.

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:

js
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.)

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(audioCtx);
      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");
  });
};

Reading files

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

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

Specifications

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

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
arrayBuffer

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also