Performance issues with Web Audio API

Question

I have created a simple Web Audio API script that streams a local mp3 and has a gain control and 3 band equalizer.

The nodes are setup such that the source is connected to a gain node and then slit to a lowpass, bandpass, and highpass node. Each of those node is connect to a gain before being connected to the destination. This is a simple EQ. (diagrams and code below)

This work fine on my Windows 8 Deskop with an i7 and 16GB RAM however when I try to run this on my Acer C7 Chromebook with a Celeron processor and 2GB RAM the audio becomes garbled. It sounds as if each of the split paths are out of sync. It also sounds like the tempo has increased. You can see/hear this in the youtube video below.

http://youtu.be/mB3gdjUwQfw

A Celeron Processor should easily be able to handle a 3 band EQ. Is there anything that I can do to prevent this from happening? Has anyone experienced similar problems on low end hardware?

As always thank you for your responses. Keep being awesome.

Note:If I do not split the audio source the audio plays fine.

---

function setupChain(outNode) {
        soundSource = context.createBufferSource();
        soundSource.buffer = audioBuffer;

        volumeNode = context.createGainNode();
        volumeNode.gain.value = gainValue;

        highPassFilter = context.createBiquadFilter();
        highPassFilter.type = 1;
        highPassFilter.frequency.value = 4000;
        highPassGain = context.createGainNode();
        highPassGain.gain.value = highValue;

        medPassFilter = context.createBiquadFilter();
        medPassFilter.type = 2;
        medPassFilter.frequency.value = 2125;
        medPassFilter.Q = 1.1333333333333333;
        medPassGain = context.createGainNode();
        medPassGain.gain.value = medValue;

        lowPassFilter = context.createBiquadFilter();
        lowPassFilter.type = 0;
        lowPassFilter.frequency.value = 250;
        lowPassGain = context.createGainNode();
        lowPassGain.gain.value = lowValue;

        // Wiring
        volumeNode.connect(lowPassFilter);
        lowPassFilter.connect(lowPassGain);
        lowPassGain.connect(outNode);

        volumeNode.connect(medPassFilter);
        medPassFilter.connect(medPassGain);
        medPassGain.connect(outNode);

        volumeNode.connect(highPassFilter);
        highPassFilter.connect(highPassGain);
        highPassGain.connect(outNode);

        return volumeNode;
    }

function stopSound() {
  if (source) {
    source.noteOff(0);
  }
}

function playSound() {
  // source is global so we can call .noteOff() later.
  source = context.createBufferSource();
  source.buffer = audioBuffer;
  source.loop = false;
  source.connect(setupChain(context.destination));
  source.noteOn(0); // Play immediately.
}

function initSound(arrayBuffer) {
  context.decodeAudioData(arrayBuffer, function(buffer) {
    // audioBuffer is global to reuse the decoded audio later.
    audioBuffer = buffer;
    var buttons = document.querySelectorAll('button');
    buttons[0].disabled = false;
    buttons[1].disabled = false;
  }, function(e) {
    console.log('Error decoding file', e);
  }); 
}


var fileChangeEventListener = function(e) {  
  var reader = new FileReader();
  reader.onload = function(e) {
    initSound(this.result);
  };
  reader.readAsArrayBuffer(this.files[0]);
}

Answer 1

For a simple 3-band EQ, I might suggest trying lowshelf, peaking, and highshelf for your biquad filters. This way, you can eliminate all those extra gain nodes, since these filter types accept a gain value - and you won't have to split your signal. The filters can just be connected in series.

By eliminating all those splits and maintaining a single signal path, you guarantee that nothing can get out of sync.

Plus, when you connect in parallel, you're more likely to get phase weirdness. biQuad 1 is trying to remove your lows, but they're still present in biQuad 2 and biQuad 3. So your filters are sort of fighting eachother.