使用 Web Audio API 创建 10 段均衡器答案

【问题标题】：Creating a 10-Band Equalizer Using Web Audio API使用 Web Audio API 创建 10 段均衡器
【发布时间】：2012-09-26 03:01:33
【问题描述】：

我正在尝试使用 Web Audio API 重新创建类似
的内容 Winamp 的 10 段均衡器。

_{（来源：head-fi.org）}

据我所知，我必须创建 10 个Biquad Filters，将它们的type 设置为2 (for a Bandpass filter)，并将它们的frequency 设置为[60, 170, 310, 600, 1000, 3000, 6000, 12000, 14000, 16000]。完成此操作后（这就是我有点困惑的地方），然后我将为每个频率“波段”创建一个单独的 Gain Node 并将其值绑定到一个滑块。

<input id="someFreqBand" type="range" min="-12" max="12" step="0.1" value="0" onchange="slide()"/>

假设所有这些都是正确的，那么剩下的唯一步骤就是将所有 10 个增益节点连接到音频上下文 destination（我想这会将所有 10 个频率“频带”混合/同步在一起）。这是创建 Web 音频 10 波段均衡器的正确方法吗？

我感到困惑的主要事情是我如何将源“连接”到 10 个频带滤波器（+ 相关增益节点），因为所有节点只有一个输入或输出（包括目标）。

【问题讨论】：

标签： javascript html5-audio equalizer web-audio-api

【解决方案1】：

我感到困惑的主要事情是我如何将源“连接”到 10 个频带滤波器（+ 相关增益节点），因为所有节点只有一个输入或输出（包括目标）。

确实如此，但不要将其视为只能连接到另一个物理输入的物理输出。 Web Audio 节点的单个输出可以连接多个节点，一个节点也可以接收多个输入。例如，假设您想通过 5 个并行过滤器链接输入节点，然后将它们重新连接在一起。你可以这样做：

source.connect(filter1);
source.connect(filter2);
source.connect(filter3);
source.connect(filter4);
source.connect(filter5);

filter1.connect(context.destination);
filter2.connect(context.destination);
filter3.connect(context.destination);
filter4.connect(context.destination);
filter5.connect(context.destination);

这里的关键见解是多次调用 .connect 不会将输出切换到不同的节点，而只会添加额外的输出连接。换句话说，它是一个“扇出/扇入”系统。

【讨论】：

当规范说：numberOfInputs: 1. numberOfOutputs: 1. 当1 他们的意思是many 时，这似乎是糟糕的文档。
我承认它可能更清楚，但该文档仍然是正确的。一个输出可以连接到多个输入。把它想象成输出端口的数量而不是输出。

【解决方案2】：

正如 Matt D 所说，将过滤器连接到同一目的地应该没有问题。

但是，我会说您可能希望使用类型 5（峰值）的滤波器，它允许所有频率通过，并且仅在您设置相应 filter.frequency.value 的频率处放大/降低。这使您可以串联过滤器，因此您不需要 10 个单独的音频路径。您还可以考虑将低架滤波器用作第一个滤波器，将高架滤波器用作第十个滤波器，这在均衡器中相当常见。不过，我不记得这是否是 winamp 所做的。

最后，如果您串联使用峰值滤波器，则不需要为每个频率设置单独的增益节点，只需为特定滤波器设置 filter.gain.value。

【讨论】：

除非我弄错了，否则所有图形均衡器都使用带通滤波器。请参阅第 4 页的此处：rs6.eporia.com/company_38/techpaper106.pdf 低架/高架/峰值滤波器允许您直接在滤波器节点上调整增益，而不是带通滤波器……
我不确定是否所有图形均衡器都使用带通滤波器，但我确信串联使用峰值滤波器会更容易获得您所追求的行为。
过滤器应该串联，就像 Jagi 提到的那样。
是的，我也是。:)

【解决方案3】：

通过将每个过滤器与目的地连接，您将创建 5 条路径（路线），这样您将听到源声音的五倍放大。这不是正确的方法。您必须将每个过滤器连接成一行。

source.connect(filter1);
filter1.connect(filter2);
filter2.connect(filter3);
filter3.connect(filter4);
filter4.connect(filter5);
filter5.connect(context.destination);

【讨论】：