如何使用 Web Audio API 重新创建 John Locke 的 3D 音频可视化？

问：

我想重新创建约翰·洛克（John Locke）制作的可视化。 作者不再在他们的博客上做出回应，但我发现结果在视觉上很有趣，并想重现它们。

John 的项目和代码

从本质上讲，它是声音的图，其中一个轴是时间，另一个轴是声音频率，高度是该频率的 FFT（快速傅里叶变换）值。

John 的可视化代码看起来像是使用了 Minim 库中的 FFT，其中输出频率采用对数刻度，并且是平均的：

fftLog = new FFT(groove.bufferSize(),groove.sampleRate());
fftLog.logAverages(22,4);     //adjust numbers to adjust spacing
// ...
z = height/4-fftLog.getAvg(i)*10;
// ...
text(round(fftLog.getAvg(i)*100),0,0,0);

请注意，代码中的 与这篇博客文章中第二个屏幕截图中的注释匹配，并指示生成介于 和 之间的值。textgetAvg030

我失败的尝试

我尝试使用 Web Audio API 重新创建它但失败了。 我正在使用 Web Audio，因为我需要完全在前端进行此可视化。

我在高层次上所做的是：

1. 加载一个音频文件，并通过OfflineAudioContext
2. 使用ChannelMergerNode
3. 使用 形式的 FFT，并使用平均法获得对数刻度的频率。AnalyserNode
4. 将分贝值转换为线性，并以巨大的因素进行缩放。

代码的最后一步如下所示：

dest[i] = rangeAverage(buffer, previous, logPos) * 10000;

这给了我这样的风景：

我的方法几乎可以肯定是错误的，但我真的不知道我还能做些什么。 我最初试图将所有东西都保持在分贝内，但这给了我一个非常无聊的景观，比如：

dest[i] = dbToPositive(linearToDb(rangeAverage(buffer, previous, logPos)));

完整的代码可以在这里找到。我做错了什么，我怎样才能重现约翰的可视化？

注意：此代码仅在 Chrome/Chromium 中运行，因为它使用了 Firefox 等不支持的 API 功能。要使用测试页面，只需选择一个文件，然后使用 THREE.js 生成景观

更新

修复我的 dB 计算后，我得到了更准确的结果：

function dbToLinear(f) {
    //                               previously / 10
    return f === -Infinity ? 0 : Math.pow(10, f / 20);
}

不过，在较低频率上也有一些巨大的峰值。