Web音频 - 静默期间分析器频率数据不为0

Question

Web音频 - 静默期间分析器频率数据不为0

Pro*_*eus 5 javascript html5 web-audio-api

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

振荡器停止播放后(完全沉默!),这就是我得到的.确切的结果会在不同运行之间发生变化,有时这些值甚至会在停止后略有变化. http://i62.tinypic.com/2duji81.png

我不明白为什么当声音没有播放时,所有音箱的频率数据都不为零.

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Pro*_*eus 3

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

我没有将振荡器直接连接到分析仪，而是首先让频率通过高通滤波器。似乎截止频率的值可以设置为任意低，只要它不为 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);

Run Code Online (Sandbox Code Playgroud)

归档时间：	11 年，8 月前
查看次数：	1576 次
最近记录：	7 年，8 月前