mardi 5 mai 2015

Web audio API equalizer

I have been looking around for creating an audio equalizer using the Web audio API: http://ift.tt/1cWsEta

I found a lot of threads about creating a visualizer, but that is of course not what I want to do. I simply want to be able to alter the sound using frequency sliders. I found that the biquadFilter should do the work, but I can't get a good result. The sound is altered consistently when I change any frequency value, but it just lowers the quality of the sound while it should alter the frequencies.

I first load a 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, the sound plays 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 is described here: Creating a 10-Band Equalizer Using 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 a slider I update the filter:

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

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

Would appreciate any help !




Aucun commentaire:

Enregistrer un commentaire