Writing an equalizer using biquad filters

Example 1: an audio equalizer with an <audio> element

Example at JSBin, or you can try it in your browser:

This example uses six BiquadFilter nodes with type=”peaking”.

If you read the description of this filter type: “Frequencies inside the range get a boost or an attenuation; frequencies outside it are unchanged.” This is exactly what we need to write a multi band equalizer! We’re going to use several sliders, each of which boosts one range of frequency values.

The definition says that:

• the frequency property value of a filter will indicate the middle of the frequency range getting a boost or an attenuation, each slider corresponds to a filter whose frequency will be set to 60Hz, 170Hz, 350Hz, 1000Hz, 3500Hz, or 10000Hz.
• the gain property value of a filter corresponds to the boost, in dB, to be applied; if negative, it will be an attenuation. We will code the sliders’ event listeners to change the gain value of the corresponding filter.
• the Q property values control the width of the frequency band. The greater the Q value, the smaller the frequency band. We’ll ignore it for the purposes of this example.

HTML code extract:

  

 class=“controls”>

   170Hz

    type=“range”

          value=“0” step=“1” min=“-30” max=“30”

          oninput=“changeGain(this.value, 1);“>

   

    id=“gain1”>0 dB