How do I use the WebAudio API channel splitter for adjusting the Left or Right gain on an audio track?

Question

<body>
  <audio id="myAudio" src="audio/Squirrel Nut Zippers - Trou Macacq.mp3"></audio>
</body>
<script>
  var myAudio = document.getElementById('myAudio')
  var context = new AudioContext();
  var audioSource = context.createMediaElementSource(myAudio)
  var splitter = context.createChannelSplitter(2);
  audioSource.connect(splitter);
  var merger = context.createChannelMerger(2)

  //REDUCE VOLUME OF LEFT CHANNEL ONLY
  var gainNode = context.createGain();
  gainNode.gain.setValueAtTime(0.5, context.currentTime);
  splitter.connect(gainNode, 0);

  //CONNECT SPLITTER BACK TO SECOND INPUT OF THE MERGER
  gainNode.connect(merger, 0, 1);
  splitter.connect(merger, 1, 0);

  var destination = context.createMediaStreamDestination();

  merger.connect(destination)

  myAudio.play()

</script>

I am trying to make the audio playing through the left channel silent so that the audio on the right channel is the only thing playing through both speakers. My understanding is that this is done by splitting the channels, adjusting the gain of one channel and then merging them back together, however I am unsure on how to do this and need help

Raymond Toy Raymond Toy · Accepted Answer · 2020-12-14T21:20:13

Here is a rough sketch, using your framework:

var splitter = context.createChannelSplitter(2);
var merger = context.createChannelMerger(2);
// connect the merger to the destination now.
merger.connect(context.destination);

// Gain node to control the volume of each channel.
var gainL = context.createGain();
var gainR = context.createGain();

audioSource.connect(splitter);

// audioSource is split into its separate channels.  For each channel connect
// a different gain node so we can control the volume independently.
splitter.connect(gainL, 0, 0);
splitter.connect(gainR, 1, 0);

// Combine the output of each gain node back into one stream using the merger.
gainL.connect(merger, 0, 0);
gainR.connect(merger, 0, 1);

// Set the gain values for the left and right channels as desired.
gainL.gain.value = 0;
gainR.gain.value = 1;

How do I use the WebAudio API channel splitter for adjusting the Left or Right gain on an audio track?

1 Answers