麦克风音频可视化器网络音频API

我是新的HTML5画布。我想做的事。我想要一个像麦克风一样的麦克风音频可视化器（控制面板=>硬件和声音=>声音=>录制）任何人都可以告诉我请如何在画布中创建它并使用网络音频API进行调整？另一个问题是我的可视化工具更敏感。我将如何调整它。如果没有声音，我想要空白频谱。我正在分享一张我真正想要的照片。 Img url：http://phillihp.com/wp-content/uploads/2011/12/winamp-step-pre-step-1.png 请帮我解决这个问题。无标题文档麦克风音频可视化器网络音频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>

来源

2015-11-16 Sajid

您不需要分析频率就知道声级。只需将麦克风直接挂接到处理器节点即可。 – GameAlchemist