Search code examples
javascripthtmlaudioweb-audio-api

Build audio mixer in HTML5


I am developing audio mixer in html5. Requirement is it should have following controls. All controls will be simple sliders and on slide change values of controls will change.

  1. Volume
  2. Pitch correction
  3. Filters(High & low pass)
  4. Reverb
  5. High, Mid, Low
  6. Tempo

I understand how to implement #1,3,4. On #2 I am bit confused, I found that it is not provided in HTML5 web audio API and only way is to use playBackRate. Any inputs on this?

No. 5 - It seems to be similar to High & Low pass filter. What is the difference between #3 & 4?

No. 6 - is there any control to change Tempo? or is it same as playBackRate?

I have no knowledge of music terminologies and so any help on understanding overall perspective will be appreciated.


Solution

  • I'm not sure how to put this. "Pitch correction" is a hugely deep topic, and not something you can really reduce to a single slider; it's also quite complex to implement.

    Similarly, tempo and reverb are complex topics; a lot of this also depends on what your sound source is. For example, you typically don't set "tempo" on an audio mixer; it's set on some kind of sequencer, e.g. a drum machine.

    High and low pass filters are pretty straightforward in Web Audio, but again, it depends on precisely how you want to implement them and what musical controls you're looking to offer.

    Reverb is moderately easy to implement using a ConvolverNode, but again, there are a lot of potential controls (e.g. what size room/impulse response?).

    High/mid/low control is pretty straightforward - I used the following code in my wubwubwub DJ mixer (http://github.com/cwilso/wubwubwub/):

        this.low = audioCtx.createBiquadFilter();
        this.low.type = "lowshelf";
        this.low.frequency.value = 320.0;
        this.low.gain.value = 0.0;
        this.low.connect( this.xfadeGain );
    
        this.mid = audioCtx.createBiquadFilter();
        this.mid.type = "peaking";
        this.mid.frequency.value = 1000.0;
        this.mid.Q.value = 0.5;
        this.mid.gain.value = 0.0;
        this.mid.connect( this.low );
    
        this.high = audioCtx.createBiquadFilter();
        this.high.type = "highshelf";
        this.high.frequency.value = 3200.0;
        this.high.gain.value = 0.0;
        this.high.connect( this.mid );