Analyze sound stream without duplicating it

Question

I have an audio stream that I'm obtaining via WebRTC. I want to analyze it, and put together the following code to visually show the bins.

<div id="bins">
</div>
<style>
#bins {
    position: fixed;
    top: 20%;
    width: 100%;
    height: 40%;
    -webkit-transition: 0.1s ease all;
}

.bin {
    background-color: blue;
    height: 100%;
    width: 2px;
    float: left;
}

</style>
<script>
function mediaAnalyze () {
    var audio = webrtc.localStreams[0];
    audioCtx = new AudioContext();
    analyzer = audioCtx.createAnalyser();
    source = audioCtx.createMediaStreamSource(audio);
    source.connect(analyzer);
    analyzer.connect(audioCtx.destination);
    analyzer.fftSize = 128;

    var frequencyData = new Uint8Array(analyzer.frequencyBinCount);

    var bins = [];
    frequencyData.forEach(function(e) {
        var e = document.createElement('div');
        e.classList.add('bin');
        document.getElementById('bins').appendChild(e);
        bins.push(e);
    });
    function renderFrame() {
        analyzer.getByteFrequencyData(frequencyData);
        frequencyData.forEach(function (data, index) {
            bins[index].style.height = ((data * 100) / 256) + "%";
        });
        requestAnimationFrame(renderFrame);
    }
    renderFrame();
};
mediaAnalyze();
</script>

The analyzer works as expected, except that I'm hearing feedback as a result of activating it. I'm guessing it's due to the AudioContext I'm creating. How can I disable duplicate audio/feedback while still keeping the original enabled (since I need to transmit it over WebRTC)?

Answer 1

don't connect analyser to destination. just comment

//analyzer.connect(audioCtx.destination);

it should stop feedback