A while ago I made this, which uses the browser's AudioContext
to create an Analyser
and give me audio data so that I can animate the music being played.
When I finished this at the time it worked perfectly in both Chrome and Firefox. When I tried it recently it still worked in Chrome but didn't work correctly in Firefox.
Whenever I try to skip through the song or change the source in Firefox the audio stops playing and I stop receiving Analyser data.
Initialization
//Creating audio
this.audio = document.createElement("audio");
this.audio.setAttribute("loop", true);
this.audio.volume=1;
//Important part
var audioctx = new AudioContext();
var audioSrc = audioctx.createMediaElementSource(this.audio);
var analyser = audioctx.createAnalyser();
var gainNode = audioctx.createGain();
var fakeGainNode = audioctx.createGain();
analyser.smoothingTimeConstant=0.5;
analyser.minDecibels=-100;
analyser.maxDecibels=0;
analyser.fftSize=2048;
//Connecting audioSrc to gainNode
audioSrc.connect(fakeGainNode);
audioSrc.connect(gainNode);
//Connecting gainNode to analyser
gainNode.connect(audioctx.destination);
//Connecting analyser to destination
//analyser.connect(gainNode);
//connect fake gain to analyser
fakeGainNode.connect(analyser);
gainNode.gain.value=0.3;
fakeGainNode.gain.value=0.05;
var size=analyser.frequencyBinCount;
var frequencyData = new Uint8Array(size);
Changing source
this.next = function(){
var next = ml.next();
this.songName.innerHTML=next.name;
this.changeSrc(next.url);
if(playing)
this.play();
}
this.prev = function(){
var prev = ml.prev();
this.songName.innerHTML=prev.name;
this.changeSrc(prev.url);
if(playing)
this.play();
}
this.changeSrc = function(src){
this.audio.src=src;
}
So the question is. Can I do anything to fix this on Firefox or is this just a bug and I should just stick to Chrome?
Edit: I have put console logs throughout the functions that were problematic but all the logs come through and no errors are thrown