Question

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

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

Answer 1

查看此代码示例：https://github.com/cwilso/volume-meter/。

Answer 2

基于cwilso的答案。解决了移动设备的问题。 “ StartNow”是main.js（由window.onload调用的原始lt）中的主要JS函数：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>Volume Meter</title>
        <script src="volume-meter.js"></script>     
        <script src="main.js"></script>     
    </head>

    <body onload="javascript:StartNow()"> >
        <p>uses audioContext.createScriptProcessor(buffer size) Web Audio API. Use https://webaudio.github.io/web-audio-api/#audioworklet</p>
        <canvas id="meter" width="1100" height="60"></canvas>

        <p>On Android press button to start (fixes new security requirement added in the new Android OS version)</p>
        <button onclick="javascript:StartNow()">Start</button>
</body>
</html>

在Android上，您需要按按钮才能启动。这是必要的，因为新的Android操作系统中增加了新的安全性要求。

Microphone Audio Visualizer Web Audio API

2 个答案: