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

Question

我正在尝试使用Web Audio API来重新创建像 Winamp的10频段均衡器。

根据我的收集，我必须创建10个Biquad Filters，将type设置为2 (for a Bandpass filter)并将frequency分别设置为[60, 170, 310, 600, 1000, 3000, 6000, 12000, 14000, 16000]。一旦我完成了这个（这里我有点困惑）我会为每个频率“band”创建一个单独的Gain Node并将其值绑定到滑块。

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

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

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

Answer 1

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

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

Answer 2

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

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

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

Answer 3

  

我感到困惑的主要问题是我如何将源“连接”到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不会将输出切换到不同的节点，而只是添加额外的输出连接。换句话说，它是一个“扇出/扇入”系统。