javascript – Web Audio API Stereo Volume Meter

I’m trying to create the most basic stereo volume meter for mic input but my right and left meters are showing the same readings regardless of which channel I am speaking into.

Here’s my code in action:
codepen.io/9880780/pen/oNdwbLz

const meterR = document.getElementById("meterR");
const meterL = document.getElementById("meterL");
const startButtonEl = document.getElementById("startButton");
startButtonEl.onclick = async () => {
  startButtonEl.disabled = true;
  const stream = await navigator.mediaDevices.getUserMedia({
    audio: true,
    video: false
  });
  const context = new AudioContext();
  const mediaStreamAudioSourceNode = context.createMediaStreamSource(stream);
  const analyserL = context.createAnalyser();
  const analyserR = context.createAnalyser();
  var splitter = context.createChannelSplitter(2);
  mediaStreamAudioSourceNode.connect(splitter);
  splitter.connect(analyserL, 1);
  splitter.connect(analyserR, 0);
  const pcmDataR = new Float32Array(analyserR.fftSize);
  const pcmDataL = new Float32Array(analyserL.fftSize);
  const onFrame = () => {
    analyserR.getFloatTimeDomainData(pcmDataR);
    analyserL.getFloatTimeDomainData(pcmDataL);
    let sumR = 0.0;
    let sumL = 0.0;
    for (const amplitude of pcmDataR) {
      sumR += amplitude * amplitude;
    }
    for (const amplitude of pcmDataL) {
      sumL += amplitude * amplitude;
    }
    meterR.value = Math.sqrt(sumR / pcmDataR.length);
    meterL.value = Math.sqrt(sumL / pcmDataL.length);
    window.requestAnimationFrame(onFrame);
  };
  window.requestAnimationFrame(onFrame);
};

Any idea what I’m doing wrong?

Read more here: Source link