I know the html5 audio stuff is all very new, but is there a way to change the left/right balance on a sound?
Something like this:
var snd = new Audio("test.mp3");
snd.balance = -1; // only left
snd.play();
I know the html5 audio stuff is all very new, but is there a way to change the left/right balance on a sound?
Something like this:
var snd = new Audio("test.mp3");
snd.balance = -1; // only left
snd.play();
The <audio>
element is a very basic tool that allows you only the play/pause the playback and change the volume. If you need more complex operations you will need to use Audio Web API
The way Audio Web API works is by building a graph/chain of nodes linked together. On one side you have your audio source - which can be an audio file or some audio waves generated by you. On the other side, you have your audio destination (audio sink) which will be your computer speakers/headphones. In the middle, you can put as many nodes as you want for manipulating the audio. For example, you can use the GainNode
to control the audio volume or you can use the SterioPannerNode
to control the left and right balance.
The API is very complex, but to just control the Left/Right balance is very simple:
First, let's create an <audio>
element so we can load the sound. You don't have to use the <audio>
element if you load your audio via XHR request, or if you generate the sound at runtime.
<audio src="myCoolTrack.mp3"></audio>
Let's create an AudioContext
and load the audio from the element to the context object
// for legacy browsers
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioContext = new AudioContext();
// get the audio element
const audioElement = document.querySelector('audio');
// pass it into the audio context
const track = audioContext.createMediaElementSource(audioElement);
Let's create a StereoPannerNode
which will control the balance
// default pan set to 0 - center
const stereoNode = new StereoPannerNode(audioContext, { pan: 0 });
// change the value of the balance by updating the pan value
stereoNode.pan.value = -1; // left
stereoNode.pan.value = 0; // center
stereoNode.pan.value = 1; // right
Connect all the nodes to a single graph/chain. With the input node (audio source) and the output node (speaker/ headphones). You can add more nodes in the middle for other audio manipulations, like volume, filtering etc.
track.connect(stereoNode).connect(audioContext.destination);
This answer uses the StereoPannerNode
which controls the balance in a single AudioNode
. But if you want to split your audio and manipulate each channel (left/right) separately, you will need to ChannelSplitterNode
and ChannelMergerNode
. You can find a full example on how to use them here: https://stackoverflow.com/a/63272648/2658683
Original answer:
Currently, this is not supported.
You can check the w3c spec for supported properties and methods. Note that browsers often provide more / less or different things. But in this case: no browser supports audio balance changes.