Equalizer Web Audio API

Question

I searched to create a sound equalizer using the web audio API: http://webaudio.imtqy.com/web-audio-api/

I found many threads about creating a visualizer, but this, of course, is not what I want to do. I just want to be able to change the sound with the help of frequency sliders. I found that biquadFilter should do the job, but I cannot get a good result. Sound changes sequentially when I change any frequency value, but it just reduces the sound quality while it needs to change frequencies.

First I load the sound:

Audio.prototype.init = function(callback){ var $this = this; this.gainScale = d3.scale.linear().domain([0,1]).range([-40,40]); this.context = new AudioContext(); this.loadSounds(function(){ $this.loadSound(0); $this.play(); callback.call(); }); }; 

Everything works well, sound is played when ready.

I have 10 sliders for frequencies [32,64,125,250,500,1000,2000,4000,8000,16000]. For each slider, I create a filter, and I connect it to the source, as described here: Creating a 10-band equalizer using the Web Audio API :

 Audio.prototype.createFilter = function(index,frequency){ if(this.filters == undefined) this.filters = []; var filter = this.context.createBiquadFilter(); filter = this.context.createBiquadFilter(); filter.type = 2; filter.frequency.value = frequency; // Connect source to filter, filter to destination. this.source.connect(filter); filter.connect(this.context.destination); this.filters[index] = filter; }; 

Finally, when I change the value of the slider, I update the filter:

 Audio.prototype.updateFilter = function(index,newVal){ this.filters[index].frequency.gain = this.gainScale(newVal); }; 

NB: my function this.gainScale takes the value in [0,1] as the value and returns the value in [-40,40] to set the gain from -40 to 40 for each frequency.

Would thank for any help!

Answer 1

A few things here.

1) You should not use bandpass filters in parallel to implement an equalizer. Among other problems, biquad filtering changes the phase of different parts of the signal, and therefore different bands will work in different phases, and you will have some potentially good effects on your sound when it recombines.

2) The approach you want has a lower shelf filter at the lower end, a high shelf filter at the upper end, and any number of peak filters in the middle. They must be connected in series (i.e., the input signal is connected to one filter, which is connected to another filter, which is connected to another filter, etc., and only the last filter should be connected to the audio context. (See below), and the gain on the filter determines the gain / cut. (For a flat response, all filter gains must be set to zero.)

3) filter.type is an enumerated type that you must specify as a string, not as a number. "lowshelf", "highshelf" and "peaking" are the ones you are looking for here.

In my DJ application, you can see an example of a simple three-band equalizer - https://github.com/cwilso/wubwubwub/blob/MixTrack/js/tracks.js#L189-L207 . To change this to a multi-band equalizer, you need to adjust the Q value of each filter so that the bands do not overlap too much (not bad if they overlap, but your bands will be more accurate if you adjust them), you can use http: // googlechrome. imtqy.com/web-audio-samples/samples/audio/frequency-response.html to examine the frequency response for a given Q type and filter.

Answer 2

One problem is that you want your sliders to control the gain of the filter at a given frequency, not the filter frequency. According to the specification, the gain of the bandpass filter is not controlled, which is a bit limiting. Fortunately, you can put the node gain at the end of each filter.

 var filter = this.context.createBiquadFilter(); filter = this.context.createBiquadFilter(); filter.type = 2; filter.frequency.value = frequency; var gain = this.context.createGainNode(); // Connect source to filter, filter to the gain, gain to destination. this.source.connect(filter); filter.connect(gain); gain.connect(this.context.destination); this.filters[index] = filter; this.gains[index] = gain; 

Then you will need to connect your slider to the gain parameter of the gain control. I really don't know web audio, so I will leave it to you. The last thing you need to specify is a Q filter. I get the impression of your list of frequencies that you are trying to create octave filters, so the Q factor is likely to be around 1.414. You really need to do a little research if you want to do it right.