CODEWITHSUNDEEP
javascriptweb-audio-api
Fomo
Fomo

Reputation: 153

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

Upvotes: 0

Views: 1061

Answers (1)

Fomo
Fomo

Reputation: 153

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

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

Upvotes: 1

Related Questions