Мне хотелось бы узнать, как лучше всего получить уровень активности микрофона аудио MediaStreamTrack
Объект javascript в Chrome/Canary. Объект MediaStreamTrack
является звуковой дорожкой MediaStream
, возвращаемой getUserMedia
, как часть API-интерфейса JavaScript WebRTC.Уровень активности микрофона в WebRTC MediaStream
ответ
То, что вы ищете, это webkitAudioContext
и его метод createMediaStreamSource
.
Вот пример кода, который рисует зеленую полосу, чтобы действовать как волюметре:
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);
}
}
Когда микрофон имеет аудио зеленую полосу вверх и вниз очень красиво:
<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>
audioContext.createJavaScriptNode переименован в audioContext.createScriptProcessor https://developer.mozilla.org/en-US/docs/Web/API/AudioContext.createScriptProcessor –
и теперь вам нужно определить функцию ошибки для 'webkitGetUserMedia', как третий arg. – CodeBrauer
Я сделал несколько поправок к коду из первого ответа. Я также добавил:
window.AudioContext = window.AudioContext || window.webkitAudioContext;
navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
Так что теперь он работает на Chrome 39 и Firefox 34.
Вот скрипку: http://jsfiddle.net/elshnkhll/p07e5vcq/
Вы забыли закрывающую скобку в самом конце. – igorpavlov