BaseAudioContext: createStereoPanner() 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⁩.

ThecreateStereoPanner() method of theBaseAudioContext interface creates aStereoPannerNode, which can be used to applystereo panning to an audio source.It positions an incoming audio stream in a stereo image using alow-cost panning algorithm.

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

Syntax

createStereoPanner()

Parameters

None.

Return value

AStereoPannerNode.

Examples

In ourStereoPannerNode example (see source code) HTML we have a simple<audio> element along with aslider<input> to increase and decrease pan value. In the JavaScript wecreate aMediaElementAudioSourceNode and aStereoPannerNode, and connect the two together using theconnect() method. We then use anoninput event handler tochange the value of theStereoPannerNode.pan parameter and update the panvalue display when the slider is moved.

Moving the slider left and right while the music is playing pans the music across tothe left and right speakers of the output, respectively.

const audioCtx = new AudioContext();const myAudio = document.querySelector("audio");const panControl = document.querySelector(".panning-control");const panValue = document.querySelector(".panning-value");// Create a MediaElementAudioSourceNode// Feed the HTMLMediaElement into itconst source = audioCtx.createMediaElementSource(myAudio);// Create a stereo pannerconst panNode = audioCtx.createStereoPanner();// Event handler function to increase panning to the right and left// when the slider is movedpanControl.oninput = () => {  panNode.pan.setValueAtTime(panControl.value, audioCtx.currentTime);  panValue.textContent = panControl.value;};// connect the MediaElementAudioSourceNode to the panNode// and the panNode to the destination, so we can play the// music and adjust the panning using the controlssource.connect(panNode);panNode.connect(audioCtx.destination);