WebRTC MediaStreamのマイクアクティビティレベル

Question

Chrome/CanaryのオーディオMediaStreamTrack javascriptオブジェクトのマイクアクティビティレベルを取得するにはどうすればよいかアドバイスします。 MediaStreamTrackオブジェクトは、getUserMediaによって返されたMediaStreamのオーディオトラックで、WebRTC javascript APIの一部です。

Answer 1

あなたが探しているものは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); 
    } 

} 

More details about AudioContext

Answer 2

マイクは非常にいい上下オーディオ緑のバーを持っている場合：

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

Answer 3

私は最初の答えからコードにいくつかの修正を行いました。私も追加しました：

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

をだから今、それはここではクロームとFirefox 39で34

の作品フィドルです：http://jsfiddle.net/elshnkhll/p07e5vcq/