BaseAudioContext: createBufferSource() method

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨April 2021⁩.

ThecreateBufferSource() method of theBaseAudioContextInterface is used to create a newAudioBufferSourceNode, which can beused to play audio data contained within anAudioBuffer object.AudioBuffers are created usingBaseAudioContext.createBuffer or returned byBaseAudioContext.decodeAudioData when it successfully decodes an audio track.

Note:TheAudioBufferSourceNode()constructor is the recommended way to create anAudioBufferSourceNode; seeCreating an AudioNode.

Syntax

createBufferSource()

Parameters

None.

Return value

AnAudioBufferSourceNode.

Examples

In this example, we create a two second buffer, fill it with white noise, and then playit via anAudioBufferSourceNode. The comments should clearly explainwhat is going on.

Note:You can alsorun the code live,orview the source.

const audioCtx = new AudioContext();const button = document.querySelector("button");const pre = document.querySelector("pre");const myScript = document.querySelector("script");pre.textContent = myScript.textContent;// Stereoconst channels = 2;// Create an empty two second stereo buffer at the// sample rate of the AudioContextconst frameCount = audioCtx.sampleRate * 2.0;const myArrayBuffer = audioCtx.createBuffer(  channels,  frameCount,  audioCtx.sampleRate,);button.onclick = () => {  // Fill the buffer with white noise;  // just random values between -1.0 and 1.0  for (let channel = 0; channel < channels; channel++) {    // This gives us the actual ArrayBuffer that contains the data    const nowBuffering = myArrayBuffer.getChannelData(channel);    for (let i = 0; i < frameCount; i++) {      // Math.random() is in [0; 1.0]      // audio needs to be in [-1.0; 1.0]      nowBuffering[i] = Math.random() * 2 - 1;    }  }  // Get an AudioBufferSourceNode.  // This is the AudioNode to use when we want to play an AudioBuffer  const source = audioCtx.createBufferSource();  // set the buffer in the AudioBufferSourceNode  source.buffer = myArrayBuffer;  // connect the AudioBufferSourceNode to the  // destination so we can hear the sound  source.connect(audioCtx.destination);  // start the source playing  source.start();};