WebRTC技术MediaStream可的话筒活动水平 [英] Microphone activity level of WebRTC MediaStream

问题描述

我想就如何最好地获得音频话筒活动水平一些建议 MediaStreamTrack JavaScript对象在Chrome /加那利。在 MediaStreamTrack 对象的音频轨道 MediaStream可按 getUserMedia ，由于WebRTC中的JavaScript API。

I would like some advice on how best to get the microphone activity level of an audio MediaStreamTrack javascript object in Chrome/Canary. The MediaStreamTrack object is an audio track of the MediaStream returned by getUserMedia, as part of the WebRTC javascript API.

推荐答案

确定 - 只更新多米尼克ALIE版本。导致code是非常好的，但是当我试图通过复制粘贴并没有奏效。以下应该在谷歌浏览33测试。

OK - just update version of Dominic Alie. Cause the code was very nice but did not worked when i tried by copy paste. Following should work instantly in Google Chrome 33 tested.

当麦克风音频有绿色地址栏上下非常漂亮：

由多米尼克ALIE的 code：

Code by Dominic Alie:

<script type="text/javascript">
navigator.webkitGetUserMedia({audio:true, video:true}, function(stream){
    audioContext = new webkitAudioContext();
    analyser = audioContext.createAnalyser();
    microphone = audioContext.createMediaStreamSource(stream);
    javascriptNode = audioContext.createJavaScriptNode(2048, 1, 1);

    analyser.smoothingTimeConstant = 0.3;
    analyser.fftSize = 1024;

    microphone.connect(analyser);
    analyser.connect(javascriptNode);
    javascriptNode.connect(audioContext.destination);

    //canvasContext = $("#canvas")[0].getContext("2d");
    canvasContext = document.getElementById("test");
    canvasContext= canvasContext.getContext("2d");

    javascriptNode.onaudioprocess = function() {
        var array =  new Uint8Array(analyser.frequencyBinCount);
        analyser.getByteFrequencyData(array);
        var values = 0;

        var length = array.length;
        for (var i = 0; i < length; i++) {
            values += array[i];
        }

        var average = values / length;
        canvasContext.clearRect(0, 0, 60, 130);
        canvasContext.fillStyle = '#00ff00';
        canvasContext.fillRect(0,130-average,25,130);
    }

}  
);
</script>
<canvas id="test" style="background-color: black;"></canvas>

这篇关于WebRTC技术MediaStream可的话筒活动水平的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！