ThedecodeAudioData() method of theBaseAudioContextInterface is used to asynchronously decode audio file data contained in anArrayBuffer that is loaded fromfetch(),XMLHttpRequest, orFileReader. The decodedAudioBuffer is resampled to theAudioContext's samplingrate, then passed to a callback or promise.

This is the preferred method of creating an audio source for Web Audio API from anaudio track. This method only works on complete file data, not fragments of audio filedata.

This function implements two alternative ways to asynchronously return the audio data or error messages: it returns aPromise that fulfills with the audio data, and also accepts callback arguments to handle success or failure. The primary method of interfacing with this function is via its Promise return value, and the callback parameters are provided for legacy reasons.

Syntax

// Promise-based syntax returns a Promise:decodeAudioData(arrayBuffer)// Callback syntax has no return value:decodeAudioData(arrayBuffer, successCallback)decodeAudioData(arrayBuffer, successCallback, errorCallback)

Parameters

arrayBuffer

An ArrayBuffer containing the audio data to be decoded, usually grabbed fromfetch(),XMLHttpRequest orFileReader.

successCallbackOptional

A callback function to be invoked when the decoding successfully finishes. Thesingle argument to this callback is anAudioBuffer representing thedecodedData (the decoded PCM audio data). Usually you'll want to put thedecoded data into anAudioBufferSourceNode, from which it can be playedand manipulated how you want.

errorCallbackOptional

An optional error callback, to be invoked if an error occurs when the audio data isbeing decoded.

Return value

APromise object that fulfills with thedecodedData. If you are using theXHR syntax you will ignore this return value and use a callback function instead.

Examples

In this section we will first cover the promise-based syntax and then the callback syntax.

Promise-based syntax

In this exampleloadAudio() usesfetch() to retrieve an audio file and decodes it into anAudioBuffer. It then caches theaudioBuffer in the globalbuffer variable for later playback.

let audioCtx;let buffer;let source;async function loadAudio() {  try {    // Load an audio file    const response = await fetch("viper.mp3");    // Decode it    buffer = await audioCtx.decodeAudioData(await response.arrayBuffer());  } catch (err) {    console.error(`Unable to fetch the audio file. Error: ${err.message}`);  }}

Callback syntax

In this exampleloadAudio() usesfetch() to retrieve an audiofile and decodes it into anAudioBuffer using the callback-based version ofdecodeAudioData(). In the callback, it plays the decoded buffer.

let audioCtx;let source;function playBuffer(buffer) {  source = audioCtx.createBufferSource();  source.buffer = buffer;  source.connect(audioCtx.destination);  source.loop = true;  source.start();}async function loadAudio() {  try {    // Load an audio file    const response = await fetch("viper.mp3");    // Decode it    audioCtx.decodeAudioData(await response.arrayBuffer(), playBuffer);  } catch (err) {    console.error(`Unable to fetch the audio file. Error: ${err.message}`);  }}

Specifications

Browser compatibility

See also

• Using the Web Audio API