Creating a 10-Band Equalizer Using Web Audio API

Question

I'm trying to wrap my head around using the Web Audio API to recreate something like
Winamp's 10-band equalizer.

_{(source: head-fi.org)}

From what I can gather, I have to create 10 Biquad Filters, set their type to 2 (for a Bandpass filter) and set their frequency to [60, 170, 310, 600, 1000, 3000, 6000, 12000, 14000, 16000] respectively. Once I have done that (and here's where I'm getting a little confused) I would then create a separate Gain Node for each frequency "band" and bind its value to a slider.

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

Assuming all of that is correct, then the only remaining step is to connect all 10 gain nodes to the Audio Context destination (which I imagine will take all 10 frequency "bands" and mix/sync them back together). Is this the right way to go about creating a Web Audio 10-band equalizer?

The major thing I'm confused about is how I go about "connecting" the source to the 10 frequency band filters (+ associated gain node) since all the nodes only have a single input or output (including the destination).

Answer 1

As Matt D said, there should be no problem connecting the filters to the same destination.

I would however say that you probably want to use filters with type 5 (peaking), which lets all frequencies through and only amplifies/reduce at the frequency at which you've set the respective filter.frequency.value. That lets you connect the filters in series so you don't need 10 separate audio paths. You could also consider using a low-shelf filter as the first filter, and a hi-shelf filter as the tenth, which is rather common in equalizers. I can't remember if that's what winamp does, though.

Finally, if you go with the peaking filters in series, you don't need a separate gain node for each frequency, you just set the filter.gain.value for the specific filters.