Write a "preamp" with HTML5 Audio API

Question

I'm writing an 10-band equalizer with HTML5 Audio API and JavaScript. From what I researched online, the 10 bands can be created as BiquadFilterNode and connected one after another for the final effect:

var AudioContext = new AudioContext();
var filter = context.createBiquadFilter(); // create the filter node
filter.type = 'peaking';
filter.gain.value = 0; // Default gain value
filter.Q.value = 1;
filter.frequency.value = 60; // and 170, 310, 600, 1000, 3000, 6000, 12000, 14000, 16000 for the rest 9 bands

(A very similar set up can be seen here).

So far so good. But now I'm stuck at the so-called "preamp" that's always seen on a standard equalizer. For example, this is Winamp's:

This is VOX's:

This is VLC's:

etc. you get the idea. My question is: What exactly does this "preamp" do, and how would I program it into my application?

To what factor? Do they add/subtract the dB value of each next band (like in the screen shots above)? — An Phan, Jan 19 '16 at 01:25
I read the article, still don't get how a GainNode is a preamp. A gain is a unitless value, when a preamp value (like above screenshots) seems to be measured in dB. The link also doesn't seem to answer my question regarding the calculation applied from the preamp to subsequent bands. And thanks for your help, but your sascasm is not really necessary. — An Phan, Jan 19 '16 at 01:42

score 1 · Answer 1 · answered Jan 23 '20 at 14:13

There is a 10 band Equalizer within the waveform project https://wavesurfer-js.org/example/equalizer/index.html

try on codepen

// Equalizer
    wavesurfer.on('ready', function() {
        var EQ = [
            {
                f: 32,
                type: 'lowshelf'
            },
            {
                f: 64,
                type: 'peaking'
            },
            {
                f: 125,
                type: 'peaking'
            },
            {
                f: 250,
                type: 'peaking'
            },
            {
                f: 500,
                type: 'peaking'
            },
            {
                f: 1000,
                type: 'peaking'
            },
            {
                f: 2000,
                type: 'peaking'
            },
            {
                f: 4000,
                type: 'peaking'
            },
            {
                f: 8000,
                type: 'peaking'
            },
            {
                f: 16000,
                type: 'highshelf'
            }
        ];

        // Create filters
        var filters = EQ.map(function(band) {
            var filter = wavesurfer.backend.ac.createBiquadFilter();
            filter.type = band.type;
            filter.gain.value = 0;
            filter.Q.value = 1;
            filter.frequency.value = band.f;
            return filter;
        });

score 0 · Answer 2 · answered May 04 '18 at 15:52

I did something very similar to this for my project https://webamp.org. The relvant code looks something like this:

const BANDS = [60, 170, 310, 600, 1000, 3000, 6000, 12000, 14000, 16000];
let output = context.createGain();
const bands = {};

BANDS.forEach((band, i) => {
const filter = context.createBiquadFilter();

bands[band] = filter;

if (i === 0) {
    // The first filter, includes all lower frequencies
    filter.type = "lowshelf";
} else if (i === band.length - 1) {
    // The last filter, includes all higher frequencies
    filter.type = "highshelf";
} else {
    filter.type = "peaking";
}
filter.frequency.value = band;
filter.gain.value = 0;

output.connect(filter);
output = filter;
});

output.connect(context.destination);

You can find the full source code here: https://github.com/captbaritone/webamp/blob/master/js/media/index.js

Write a "preamp" with HTML5 Audio API

2 Answers2