Change left/right balance on playing audio in javascript

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();

---

This is possible using Audio Web API

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:

Step 1 - Load audio source

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>

Step 2 - Audio Context

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);

Step 3 Stereo Node

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

Final Step

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);

Additional reading

• Full API: Web Audio API
• Tutorial on how to create a "boombox" with volume and stereo controls: Using Web Audio API.
• Or you see a working demo here: DEMO.

Additional example

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

---

As of 2021, this is possible using the Web Audio API. See this answer for more info.

---

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.

http://dev.w3.org/html5/spec/Overview.html#audio