1
Я новичок в холсте HTML5. Что я хочу сделать. Я хочу, чтобы визуализатор микрофона звучал так же, как окна Звуковой визуализатор микрофона (панель управления => аппаратное обеспечение и звук => Звук => запись) Может кто-нибудь сказать мне Пожалуйста, как я создам его на холсте и настроюсь с помощью API веб-аудио? Другая проблема: мой визуализатор более чувствителен. Как я его настрою. Я хочу чистый спектр, если нет звука. Я делюсь картиной, что я точно хочу. Img URL: http://phillihp.com/wp-content/uploads/2011/12/winamp-step-pre-step-1.png Пожалуйста, помогите мне решить эту проблему. Untitled Document Микрофон Audio Visualizer Web Audio API
<body>
<canvas id="test"></canvas>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
navigator.webkitGetUserMedia({audio:true}, function(stream){
audioContext = new AudioContext();
analyser = audioContext.createAnalyser();
microphone = audioContext.createMediaStreamSource(stream);
javascriptNode = audioContext.createScriptProcessor(1024, 1, 1);
analyser.smoothingTimeConstant = 0.0;
analyser.fftSize = 512;
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, 150, 300);
canvasContext.fillStyle = '#00ff00';
canvasContext.fillRect(0,130-average,25,140);
}
}, function(e){ console.log(e); }
);
</script>
</body>
Вам не нужно анализировать частоты, чтобы знать уровень звука. Просто подключите микрофон непосредственно к процессорному узлу. – GameAlchemist