分析声音流而不复制它

我有一个音频流，我通过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传输）？

来源

2017-02-18 Alexander Tsepkov

应该'的document.getElementById（ '垃圾箱'）'是'的document.getElementById（ '巴'）'？或者'

'是'

'？ – guest271314

是的，谢谢你指出，div应该有bin的id。我复制粘贴原件并重新命名标签以使示例更清晰，但忘记更新其中的标识。 –

不要将分析仪连接到目的地。只是评论

//analyzer.connect(audioCtx.destination);

，应立即停止反馈

来源

2017-02-18 19:02:36

完美，谢谢。简直不敢相信这件事在我的这一端很愚蠢。 –

分析声音流而不复制它

回答

相关问题