javascript - Web 音频 - 静音期间分析仪频率数据不为 0

标签 javascript html web-audio-api

我使用振荡器节点创建声音,并想在 Canvas 上绘制频率可视化。当振荡器播放时,可视化效果如下(标准振荡器设置,请参见下面的代码)。 http://i58.tinypic.com/wtvwgz.png

振荡器停止播放后(完全静音!),这就是我得到的。确切的结果会随着运行而变化,有时这些值甚至在停止后会保持轻微的变化。 http://i62.tinypic.com/2duji81.png

我不明白为什么在没有播放声音时所有 bin 的频率数据都不为零。

在 Firefox 30.0 和 Iron 34.0.1850.0 (Chrome) 上测试

这是我的示例代码:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            window.onload = function () {
                var ctx = document.getElementById("canvas").getContext("2d");
                var audioContext = new (window.AudioContext
                    || window.webkitAudioContext || window.mozAudioContext)();

                var analyser = audioContext.createAnalyser();
                analyser.fftSize = 512;
                analyser.connect(audioContext.destination);
                var frequencyBins = new Uint8Array(analyser.frequencyBinCount);

                var osc = audioContext.createOscillator();
                osc.connect(analyser);
                osc.start(audioContext.currentTime + 2);
                osc.stop(audioContext.currentTime + 4);

                var WIDTH = 512;
                var HEIGHT = 100;
                var value, h, w;

                function draw() {
                    ctx.clearRect(0, 0, WIDTH, HEIGHT);

                    for (var i = 0; i < frequencyBins.length; i++) {
                        value = frequencyBins[i];
                        h = HEIGHT * (value / 255);
                        w = WIDTH / frequencyBins.length;
                        ctx.fillRect(i * w, HEIGHT - 1, w, -h);
                    }
                };

                function animate() {
                    analyser.getByteFrequencyData(frequencyBins);
                    draw();
                    requestAnimationFrame(animate);
                }

                requestAnimationFrame(animate);
            };
        </script>
    </head>
    <body>
        <canvas id="canvas" width="512" height="100"></canvas>
    </body>
</html>

最佳答案

我找到了适合我的解决方案。

我没有将振荡器直接连接到分析仪,而是先让频率通过高通滤波器。似乎截止频率的值可以设置为任意低,只要它不为 0。即使截止频率为 0.00000001,在静音期间可视化也会是空白的。

http://jsfiddle.net/a2ZL9/3/

var analyser = audioContext.createAnalyser();
analyser.fftSize = 512;
analyser.connect(audioContext.destination);
var frequencyBins = new Uint8Array(analyser.frequencyBinCount);

var filter = audioContext.createBiquadFilter();
filter.type = "highpass";
filter.frequency.value = 0.0001;
filter.connect(analyser);

var osc = audioContext.createOscillator();
osc.connect(filter);
osc.start(audioContext.currentTime + 2);
osc.stop(audioContext.currentTime + 4);

关于javascript - Web 音频 - 静音期间分析仪频率数据不为 0,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24355656/

相关文章:

javascript - 如何使用 AngularJS 将 json 中的 url 超链接到同一 JSON 中的文本

jquery - Chrome 无法识别 SELECT 选项的高度(使用 jQuery 和 CSS)

html - CSS 仅在必要时溢出

node.js - 如何在HTML5中通过客户端扬声器播放实时二进制流

javascript - 使用 renderBuffer 作为 HTML5 音频标签

javascript - 使用箭头键导航

javascript - Angular $http - 在接收响应数据时处理它

javascript - 如何在javascript中组合数组

html - 为什么 css3 过渡高度不缓入缓出

javascript - 为什么 ScriptProcessorNode 必须连接到目的地?