サウンドストリームを複製せずに分析する

Question

WebRTC経由で取得しているオーディオストリームがあります。私はそれを分析し、ビンを視覚的に表示するために次のコードをまとめます。

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

アナライザーは、私がアクティブ化の結果としてフィードバックを聞いていることを除いて、期待どおりに動作します。私はそれが私が作成しているAudioContextによると推測しています。オリジナルを有効にしたままで（WebRTCで送信する必要があるため）、重複するオーディオ/フィードバックを無効にするにはどうすればよいですか？

Answer 1

アナライザーを宛先に接続しないでください。ただ

//analyzer.connect(audioCtx.destination); 

コメントそれは `のdocument.getElementById（ 'ビン'）` ``のdocument.getElementById（ 'バー'）であるべき