Javascript WebAudio dB可视化未按预期反映频带

我已经建立了一个系统音频设置与WebAudio在一个角度的组成部分。它工作得很好，只是波段似乎不能准确地反映频率

请参阅此处的高、中、低音调测试

我已经在本机API、访问媒体流等方面取得了相当大的进展，但它并不像我想象的那么有用

问题: 我们如何获得最准确的频率分贝数据

所有的声音似乎都集中在前3个波段

下面是可视化媒体流的方法（在[Github][2]上的完整代码）

专用中继器（）{
this._AFID=requestAnimationFrame（（）=>this.frameLooper（））；
//来自分析仪的数值（缓冲区大小）
此._fbc=此._分析仪频率b计数；
//频率数据是0到255范围内的整数
此._数据=新的UINT8阵列（此._分析仪频率BINCOUNT）；
此._分析仪。GetByTefFrequencyData（此._数据）；
设bandsTemp=[]；
//使用频率数据计算每个波段元素的高度
对于（var i=0；i

鲍里斯·斯莫斯的书中说：

但是，如果我们想对整个过程进行全面分析 音频缓冲区，我们应该看看其他方法

也许这个方法已经足够好了。什么是更好的功能频率分析方法？

感谢中的示例。你是对的，它在chrome中不起作用，但是如果我使用链接在新窗口中打开它，一切都是正确的

所以，我认为你计算图表的标签是错误的。我想它们应该代表频带的频率。如果不是，那么这个答案是错误的

您有

fqRange=sampleRate/bands

。让我们假设

sampleRate=48000

（保持数字简单），并且

bands=16

。然后

fqRange=3000

。首先，我认为您确实需要

sampleRate/2/bands

或

sampleRate/fftSize

，这是相同的

因此，每个频率箱都有1500 Hz宽。对于k=0到15，标签应为

1500*k

。（虽然有不止一种方法来标记这些，但这是最简单的。）这将涵盖0到24000 Hz的范围

---

当我播放12 kHz的音调时，我看到你的代码中的峰值在1552左右。但是有了新标签，这是第8个箱子，所以1500*8=12000。（嗯，有一些不同。我的采样频率实际上是44.1 kHz，因此上面计算的数字会有所不同。）

一个不需要我克隆回购协议的可运行示例将非常有用。此外，上面的示例很好，但很难知道发生了什么。这些音调似乎没有持续很长时间，除了可能是低音。嗨@RaymondToy谢谢你的提问。我这里有一个，但没有包括它，因为我无法让Stackblitz环境访问我的系统设备。。。这有帮助吗？如果它可以运行并且更小，那会更好，但是我可以看到您将fftsize设置为32。这意味着大约20千赫的整个范围被分成32个大小相等的箱子。那可能有点粗糙。使用振荡器为分析仪供电的简单测试可能会帮助您了解发生了什么。事实上，我帮不了什么忙，因为我不知道来源是什么。作为演示，您甚至不需要任何图形。只是偶尔将fft值转储到控制台。好主意，谢谢。是的，我都做过了。事实上，fft是/2，所以有16个频带，但这并不重要。如果我增加它，我们会得到更多关于这个“低端”视觉的报道，但问题仍然存在。似乎75%的声音在频率覆盖的前1/8范围内可见。是的，频带是线性间隔的，而不是对数间隔的，因此低频分辨率很高，但高频分辨率不太好。然而，一个小的可运行的例子说明了这个问题是最好的。真棒@raymondtoy，谢谢。重新贴标签至少可以强化频带是正确的频率。我最初希望看到更多的音频到频率的分离，在这种情况下，WebAudio vis在较低的fqs中仍然具有很大的威力。我将继续修补它。有多种方法可以解决这个问题，但最简单的方法是增加fftSize，比如1024。这将给你一个大约45赫兹的箱子间距，这可能是你想要的足够的分辨率。

private repeater() {
    this._AFID = requestAnimationFrame(() => this.frameLooper());

    // how many values from analyser (the "buffer" size)
    this._fbc = this._analyser.frequencyBinCount;

    // frequency data is integers on a scale from 0 to 255
    this._data = new Uint8Array(this._analyser.frequencyBinCount);
    this._analyser.getByteFrequencyData(this._data);

    let bandsTemp = [];
    // calculate the height of each band element using frequency data
    for (var i = 0; i < this._fbc; i++) {
        bandsTemp.push({ height: this._data[i] });
    }
    this.bands = bandsTemp;
}