Уровень активности микрофона WebRTC MediaStream

Мне хотелось бы получить советы о том, как наилучшим образом получить уровень активности микрофона аудио-объекта MediaStreamTrack javascript в Chrome/Canary. Объектом MediaStreamTrack является звуковая дорожка MediaStream, возвращаемая getUserMedia, как часть API JavaScript JavaScript WebRTC.

Ответ 1

Когда микрофон имеет звук, зеленая полоса вверх и вниз очень приятная:

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

Ответ 2

То, что вы ищете, это webkitAudioContext и его метод createMediaStreamSource.

Здесь образец кода, который рисует зеленую полосу, действует как измеритель 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);
    }

}

Подробнее о AudioContext

Ответ 3

Я сделал несколько поправок к коду из первого ответа. Я также добавил:

window.AudioContext = window.AudioContext || window.webkitAudioContext;
navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

Итак, теперь он работает на Chrome 39 и Firefox 34.

Вот скрипка: http://jsfiddle.net/elshnkhll/p07e5vcq/