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.
The createBufferSource()
method of the BaseAudioContext
Interface is used to create a new AudioBufferSourceNode
, which can be
used to play audio data contained within an AudioBuffer
object.
AudioBuffer
s are created using BaseAudioContext.createBuffer
or returned by BaseAudioContext.decodeAudioData
when it successfully decodes an audio track.
Note:
The AudioBufferSourceNode()
constructor is the recommended way to create a AudioBufferSourceNode
; see
Creating an AudioNode.
Syntax
createBufferSource()
Parameters
None.
Return value
Examples
In this example, we create a two second buffer, fill it with white noise, and then play
it via an AudioBufferSourceNode
. The comments should clearly explain
what is going on.
Note: You can also run the code live, or view 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;
// Stereo
const channels = 2;
// Create an empty two second stereo buffer at the
// sample rate of the AudioContext
const 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();
};
Specifications
Specification |
---|
Web Audio API # dom-baseaudiocontext-createbuffersource |
Browser compatibility
BCD tables only load in the browser