麦克风音频可视化器 Web 音频 API答案

【问题标题】：Microphone Audio Visualizer Web Audio API麦克风音频可视化器 Web 音频 API
【发布时间】：2015-11-16 09:22:40
【问题描述】：

我是 HTML5 的 Canvas 新手。我想做的事。我想要一个麦克风音频可视化工具，就像 windows 麦克风的声音可视化工具（控制面板 => 硬件和声音 => 声音 => 录音）谁能告诉我，我将如何在画布中创建它并使用网络音频 API 进行调整？另一个问题是我的可视化器更敏感。我将如何调整它。如果没有声音，我想要空白频谱。我正在分享一张我真正想要的照片。图片网址：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>

【问题讨论】：

您无需分析频率即可了解声级。只需将麦克风直接连接到处理器节点即可。

标签： html audio html5-canvas web-audio-api

【解决方案1】：

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

【讨论】：

适用于 PC (Windows/FFox/Chrome) 但不适用于 Android (Chrome)。绿色音量条根本没有出现。

【解决方案2】：

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

<!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 操作系统中添加了新的安全要求。

【讨论】：