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

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

转载作者：太空狗更新时间：2023-10-29 16:00:51

25

4

我使用振荡器节点创建声音，并想在 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/

25

4

0

文章推荐： c - 预处理器 : Concatenate string to each argument in __VA_ARGS__

文章推荐： c - 无法从 CodeGolf 理解这段代码

文章推荐： java - 将十六进制转换为 float 时出错

lucene - Elasticsearch 分析仪
我想在elasticsearch中指定每个字段分析器。对于某些字段，我需要关键字分析器，而对于一个字段，我需要一个自定义数字分析器，它将删除所有非数字字符(请参见下面的代码中的number_analy
analysis - Tiff 分析仪
我正在编写一个程序来转换一些数据，主要是一堆 Tiff 图像。一些 Tiff 似乎对他们有一个小问题。它们在某些查看器(Irfanview，客户的旧系统)中显示良好，但在其他查看器(客户的新系统、Wi
iphone - 潜在的泄漏？ - 分析仪
分析状态泄漏问题，为什么？ + (DebugOutput *) sharedDebug { @synchronized(self) { if (shar
android - 图片已经关闭。 CameraX 分析仪
我正在尝试将 ProxyImage 从 cameraX 分析器转换为位图，以使用 tensorflow 光分析图像。所以我实现了cameraX Analyze回调，它将图像作为proxyImage。
java - 如何快速创建网络取证 Pcap 分析仪？
我想为我的论文“网络取证挑战”创建一个应用程序，它可以获取任何 PCAP 文件并呈现包含尽可能多信息的 HTML 分析文件，可能与搜索 ip 查找的 API 相结合。我对 Python 或 C++ 的
windows - 无法激活 rust 分析仪: bootstrap error
从2020-12-09开始，VSCode的Rust Analyzer扩展不再为我加载。在启动时，它会打印出以下错误消息: Cannot activate rust-analyzer: bootstra
linux - 如何在不成为 beagle I2C 分析仪 super 用户的情况下运行全相数据中心？
我正在尝试在 Ubuntu 16.04 上从总阶段运行 beagle I2C 分析器，而不是 super 用户。当我使用 sudo 运行它时，我能够看到 beagle USB 设备，当我以我的用户身份

首页

博学

6Ren·AI

商城

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