I made and equalizer for a dj app using javascript audio API that was working for a couple months and then suddenly stopped working. The code hasn't changed so I am at a bit of a loss explaining what went wrong. I am manipulating the audio in real time and here is what is actually going on.

HTML

<!-- this is the equalizer -->
<div id="fx" style="display: none;">
<div class="lmhdiv">
<!-- when the range value is changed onmousemove call the equalizer function and pass in lo mid or hi --> 
<input id="lo" class="lmh" onmousemove="eq('lo');" type="range">
<input id="mid" class="lmh" onmousemove="eq('mid');" type="range">
<input id="hi" class="lmh" onmousemove="eq('hi');" type="range">
</div>
</div> 

<!-- this is the audio -->
<audio id="leftdisc" controls="" name="media" autoplay="" format="mpeg"><source id="song" src=".m4a" audio.type="audio/ogg"></audio>

Javascript

//This block resets the equalizer when a new song es on
// Resets the equilizer
function reset(){
mediaElement = document.getElementById('leftdisc');
document.getElementById('hi').value=50;
document.getElementById('mid').value=50;
document.getElementById('lo').value=50;
sourceNode = context.createMediaElementSource(mediaElement);

lofilter = context.createBiquadFilter();
midfilter = context.createBiquadFilter();
hifilter = context.createBiquadFilter();

// Low-pass filter. See BiquadFilterNode docs /
lofilter.type = 3; 
// high-pass filter. See BiquadFilterNode docs /
midfilter.type = 4; 
hifilter.type = 4; 


lofilter.frequency.value = 800; // Set cutoff to 440 HZ
midfilter.frequency.value = 3000; // Set cutoff to 440 HZ
hifilter.frequency.value = 5000; // Set cutoff to 440 HZ

sourceNode.connect(lofilter);
sourceNode.connect(midfilter);
sourceNode.connect(hifilter);

lofilter.connect(context.destination);
midfilter.connect(context.destination);
hifilter.connect(context.destination);
leftdisc.volume=1-document.getElementById('xfade').value/100; 
};

//when changing the equalizer

function eq(str){
  console.log(str);
  //since range is defaulted at 50 we need to default at 0
  strval = (document.getElementById(str).value-50)*0.8; // Set hi mid low db from -40 to 40


switch(str) {
case "lo":
// disconnect the filter
lofilter.disconnect(0);
// create new filter
lofilter = context.createBiquadFilter();
// create the audio graph connect filter to source
sourceNode.connect(lofilter);
// connect destination to filter
lofilter.connect(context.destination);

// specify parameters
lofilter.type = 3; // Low-shelf filter. See BiquadFilterNode docs
console.log(strval);
lofilter.gain.value = strval;
lofilter.frequency.value = 800;


console.log(lofilter);

    break;

case "mid":    
midfilter.disconnect(0);
midfilter = context.createBiquadFilter();
midfilter.type = 4; // high-shelf filter. See BiquadFilterNode docs
midfilter.gain.value = strval;
midfilter.frequency.value = 3000;
sourceNode.connect(midfilter);
midfilter.connect(context.destination);
    break;

case "hi":    
hifilter.disconnect(0);
hifilter = context.createBiquadFilter();
hifilter.type = 4; // high-shelf filter. See BiquadFilterNode docs
hifilter.gain.value = strval;
hifilter.frequency.value = 5000;
sourceNode.connect(hifilter);
hifilter.connect(context.destination);
    break;

default:
    console.log('default');
}


}

My lo filter is different because I went back to / to get an idea of what was going wrong and they were saying to set the parameters after connecting the filter to the destination, but that didn't seem to help. The mid and hi filters are written the same as they were when it was working, however, it isn't work now.

I made and equalizer for a dj app using javascript audio API that was working for a couple months and then suddenly stopped working. The code hasn't changed so I am at a bit of a loss explaining what went wrong. I am manipulating the audio in real time and here is what is actually going on.

HTML

<!-- this is the equalizer -->
<div id="fx" style="display: none;">
<div class="lmhdiv">
<!-- when the range value is changed onmousemove call the equalizer function and pass in lo mid or hi --> 
<input id="lo" class="lmh" onmousemove="eq('lo');" type="range">
<input id="mid" class="lmh" onmousemove="eq('mid');" type="range">
<input id="hi" class="lmh" onmousemove="eq('hi');" type="range">
</div>
</div> 

<!-- this is the audio -->
<audio id="leftdisc" controls="" name="media" autoplay="" format="mpeg"><source id="song" src="http://www.example./song.m4a" audio.type="audio/ogg"></audio>

Javascript

//This block resets the equalizer when a new song es on
// Resets the equilizer
function reset(){
mediaElement = document.getElementById('leftdisc');
document.getElementById('hi').value=50;
document.getElementById('mid').value=50;
document.getElementById('lo').value=50;
sourceNode = context.createMediaElementSource(mediaElement);

lofilter = context.createBiquadFilter();
midfilter = context.createBiquadFilter();
hifilter = context.createBiquadFilter();

// Low-pass filter. See BiquadFilterNode docs http://www.html5rocks./en/tutorials/webaudio/intro/
lofilter.type = 3; 
// high-pass filter. See BiquadFilterNode docs http://www.html5rocks./en/tutorials/webaudio/intro/
midfilter.type = 4; 
hifilter.type = 4; 


lofilter.frequency.value = 800; // Set cutoff to 440 HZ
midfilter.frequency.value = 3000; // Set cutoff to 440 HZ
hifilter.frequency.value = 5000; // Set cutoff to 440 HZ

sourceNode.connect(lofilter);
sourceNode.connect(midfilter);
sourceNode.connect(hifilter);

lofilter.connect(context.destination);
midfilter.connect(context.destination);
hifilter.connect(context.destination);
leftdisc.volume=1-document.getElementById('xfade').value/100; 
};

//when changing the equalizer

function eq(str){
  console.log(str);
  //since range is defaulted at 50 we need to default at 0
  strval = (document.getElementById(str).value-50)*0.8; // Set hi mid low db from -40 to 40


switch(str) {
case "lo":
// disconnect the filter
lofilter.disconnect(0);
// create new filter
lofilter = context.createBiquadFilter();
// create the audio graph connect filter to source
sourceNode.connect(lofilter);
// connect destination to filter
lofilter.connect(context.destination);

// specify parameters
lofilter.type = 3; // Low-shelf filter. See BiquadFilterNode docs
console.log(strval);
lofilter.gain.value = strval;
lofilter.frequency.value = 800;


console.log(lofilter);

    break;

case "mid":    
midfilter.disconnect(0);
midfilter = context.createBiquadFilter();
midfilter.type = 4; // high-shelf filter. See BiquadFilterNode docs
midfilter.gain.value = strval;
midfilter.frequency.value = 3000;
sourceNode.connect(midfilter);
midfilter.connect(context.destination);
    break;

case "hi":    
hifilter.disconnect(0);
hifilter = context.createBiquadFilter();
hifilter.type = 4; // high-shelf filter. See BiquadFilterNode docs
hifilter.gain.value = strval;
hifilter.frequency.value = 5000;
sourceNode.connect(hifilter);
hifilter.connect(context.destination);
    break;

default:
    console.log('default');
}


}

My lo filter is different because I went back to http://www.html5rocks./en/tutorials/webaudio/intro/ to get an idea of what was going wrong and they were saying to set the parameters after connecting the filter to the destination, but that didn't seem to help. The mid and hi filters are written the same as they were when it was working, however, it isn't work now.

• javascript
• audio
• html5-audio
• web-audio-api

• first ment : the url example./song.m4a leads to an error page. All other bugs might have their origin here. – GameAlchemist Commented Jul 22, 2014 at 18:40
• @GameAlchemist It's clearly an example URL... – Brad Commented Jul 22, 2014 at 18:40
• @JoshuaW What browsers did this stop working in? The Web Audio API isn't all that stable, but if it suddenly stopped working in Firefox, Opera, and Chrome, then I'd suggest that something in your code changed. – Brad Commented Jul 22, 2014 at 18:41
• @Brad : so ? I assume the example provided 'should' be working, otherwise we're just talking non-sense... The O.P. claim it was working, so i wonder here if a change in site policy wouldn't be the origin of the issue. – GameAlchemist Commented Jul 22, 2014 at 18:44
• @Brad: It was working in Chrome originally – Joshua W Commented Jul 23, 2014 at 15:11

1 Answer 1

The numeric constant types for biquadfilter are no longer supported (removed in Chrome 36, never present in Firefox IIRC). Also, you have two highpass filters, when I expect you wanted a peaking filter for the mid.

You should say:

// Low-pass filter. See BiquadFilterNode docs 
lofilter.type = "lowpass"; 
// Peaking (boost a single band) filter. See BiquadFilterNode docs
midfilter.type = "peaking"; 
// high-pass filter. See BiquadFilterNode docs
hifilter.type = "highpass"; 

My code from wubwubwub creates a low/mid/high control set too:

this.low = audioCtx.createBiquadFilter();
this.low.type = "lowshelf";
this.low.frequency.value = 320.0;
this.low.gain.value = 0.0;
this.low.connect( ***[output node here]*** );

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 );

// connect input to this.high