Search code examples
javascripthtml5-audioweb-audio-api

Muting sound output when using Mic - Audio Web API

I've created a canvas visualisation that responds to sound recorded through a device's microphone.
All is well and good, however all sound picked up by the mic is played back through the speakers, and I get horrible feedback.

I've tried setting a gainNode to 0, but it's not working.
I know I'm missing something, but i can't figure it out.

Here's my code.

let getSound = (stream) => {
    const audioCtx = new AudioContext();

    gainNode = audioCtx.createGain();
            
    mic = audioCtx.createMediaStreamSource(stream);
    mic.connect(gainNode);
    gainNode.gain.value = 0;

    analyser = audioCtx.createAnalyser();
    analyser.fftSize = 512;
    const bufferLength = analyser.frequencyBinCount;
    const dataArray = new Uint8Array(bufferLength);
    analyser.getByteTimeDomainData(dataArray);
    mic.connect(analyser);
            
    analyser.connect(audioCtx.destination);
    gainNode.connect(audioCtx.destination);
}
Solution

  • The graph you made looks as follows:

    mic > gainNode > destination
mic > analyser > destination

    If you want to level the signal with the gainNode you could chain all the nodes to end up with a graph like this:

    mic > analyser > gainNode > destination

    But as you already mentioned the analyser doesn't have to be connected to the destination if you're just interested in the data. Therefore the following graph should work:

    mic > analyser