javascript WebRTC MediaStream 的麦克风活动级别

Microphone activity level of WebRTC MediaStream

提问by user1710407

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

我想就如何最好地获得MediaStreamTrackChrome/Canary 中音频javascript 对象的麦克风活动级别提供一些建议。该MediaStreamTrack对象是由MediaStream返回的音轨getUserMedia，作为 WebRTC javascript API 的一部分。

回答by

When microphone has audio the green bar up and down very nice:

当麦克风有音频时，上下绿色条非常漂亮：

<script type="text/javascript">
navigator.webkitGetUserMedia({audio:true, video:true}, function(stream){
    // audioContext = new webkitAudioContext(); deprecated  OLD!!
    audioContext = new AudioContext(); // NEW!!
    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>

回答by Dominic Alie

What you are looking for is webkitAudioContextand its createMediaStreamSourcemethod.

您正在寻找的是webkitAudioContext及其createMediaStreamSource方法。

Here's a code sample that draws green bar to act like a VU meter:

这是一个绘制绿色条以充当 VU 表的代码示例：

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");

    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);
    }

}

More details about AudioContext

关于 AudioContext 的更多细节

回答by elshnkhll

UPDATE: modified the code using:

更新：修改代码使用：

navigator.mediaDevices.getUserMedia(constraints).then(
    function(stream){
        // code ... 
    }).catch(function(err) {
        // code ... 
});

Here is a fiddle: https://jsfiddle.net/elshnkhll/p07e5vcq/

这是一个小提琴：https: //jsfiddle.net/elshnkhll/p07e5vcq/