how to change volume on the left/right side of a audio JavaScript?

Question

how to make onclick the sound start only on a side of the earphones

like for example right or left.

something like this: https://www.onlinemictest.com/sound-test/

so if it plays the sound on the left it, the right earphone doesn't need to make any sound.

I think it can be done by using volumes or something like that. how to do that?

(I can't edit the sound in a video editor, I want it will automatically done by javascript)

function playSound(options) {
  const choosedDirection = () => {
    return Object.keys(options)
      .reverse()
      .find(
        (direction) => direction === "left" || direction === "right",
      );
  };

  const audio = new Audio("audio.mp3");

  switch (choosedDirection()) {
    case "left":
      audio.play();
      // how to make here play only on the left side
      // by making the volume high on the left and 0 on the right
      break;
    case "right":
      audio.play();
      // how to make here play only on the right side
      // by making the volume high on the right and 0 on the left
      break;
  }
}

trane · Answer

You can use this solution:

const audioUrl = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/858/outfoxing.mp3";
const audioElement = new Audio(audioUrl);
audioElement.crossOrigin = "anonymous";

const audioContext = new AudioContext();

const audioSource = audioContext.createMediaElementSource(audioElement);

const volumeNodeL = new GainNode(audioContext);
const volumeNodeR = new GainNode(audioContext);

volumeNodeL.gain.value = 2;
volumeNodeR.gain.value = 2;

const channelsCount = 2;

const splitterNode = new ChannelSplitterNode(audioContext, {
  numberOfOutputs: channelsCount
});
const mergerNode = new ChannelMergerNode(audioContext, {
  numberOfInputs: channelsCount
});

audioSource.connect(splitterNode);

splitterNode.connect(volumeNodeL, 0);
splitterNode.connect(volumeNodeR, 1);

volumeNodeL.connect(mergerNode, 0, 0);
volumeNodeR.connect(mergerNode, 0, 1);

mergerNode.connect(audioContext.destination);

let isPlaying;

function playPause() {
  if (audioContext.state === 'suspended') {
    audioContext.resume();
  }

  isPlaying = !isPlaying;
  if (isPlaying) {
    audioElement.play();
  } else {
    audioElement.pause();
  }
}

function setBalance(val) {
  volumeNodeL.gain.value = 1 - val;
  volumeNodeR.gain.value = 1 + val;
}

Check if your speakers are connected and working with this test.

how to change volume on the left/right side of a audio JavaScript?

1 Answers