分析声音流而不复制它

Question

我有一个通过 WebRTC 获取的音频流。我想分析一下，把下面的代码放在一起，直观地展示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>

分析仪按预期工作，只是我听到了激活它后的反馈。我猜这是由于我正在创建的 AudioContext。如何禁用重复的 audio/feedback，同时仍保持原始启用（因为我需要通过 WebRTC 传输它）？

Answer 1

不要将分析器连接到目标。只是评论

//analyzer.connect(audioCtx.destination);

应该停止反馈

分析声音流而不复制它

Analyze sound stream without duplicating it

javascript

audio

webrtc