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 [[../../../../../../../mdn.github.io/fetch-examples/fetch-array-buffer/index|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 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 | Status | Comment |
FetchThe definition of 'arrayBuffer()' in that specification. | Living Standard |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Chrome Full support 42 Full support 42 Full support 41 Disabled' From version 41: this feature is behind the |
Edge
Full support ≤18 |
Firefox Full support 39 Full support 39 Full support 34 Disabled' From version 34: this feature is behind the |
IE
No support No |
Opera Full support 29 Full support 29 Full support 28 Disabled' From version 28: this feature is behind the |
Safari
Full support 10.1 |
WebView Android
No support No |
Chrome Android
Full support 42 |
Firefox Android
No support No |
Opera Android Full support 29 Full support 29 Full support 28 Disabled' From version 28: this feature is behind the |
Safari iOS
Full support 10.3 |
Samsung Internet Android
Full support 4.0 |
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
Body.arrayBuffer() by Mozilla Contributors is licensed under CC-BY-SA 2.5.