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
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:
- The response body is disturbed or locked.
- There was an error decoding the body content (for example, because the
Content-Encoding
header is incorrect).
RangeError
-
There was a problem creating the associated
ArrayBuffer
. For example, if the data size is more thanNumber.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
:
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() {
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
File
s and Blob
s, 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 |
---|
Fetch Standard # ref-for-dom-body-arraybuffer① |
Browser compatibility
BCD tables only load in the browser