Web 音频 API 立体声音量计

Question

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: https://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?

Answer 1

Solved: You must disable echo cancellation for it to work. (Why?)

{ "echoCancellation": false, "googAutoGainControl": false, "googNoiseSuppression": false, "googHighpassFilter": false }