johndyer/mediaelement — Issue #321: Unneeded Flash element is created in FF 3.6, ending up with double elements.
Author: mitchdesign
Created: 2011-12-08 22:47:25+00:00
State: open

I create an audio tag from code, and then make a Mediaelement from it :

// url is an mp3 file, chosen by the user
$('body').append($(''));

new MediaElement($('audio').get(0), {

success: function(media) {

// this variable is stored for access from other code
audition = media;

// and I use some events
$(audition).bind('timeupdate', audition_timeupdate);
$(audition).bind('canplay', audition_canplay);
$(audition).bind('ended', audition_stop);

}
});

In Safari this all works fine. I can play the file by calling
audition.play();
but when I do that in Firefox, strange things happen. There are TWO instances of the music!

The first time I call
audition.play();
it seems okay, but when I call
audition.pause();
one of the two will pause and the other continues to play (effectively, the sound becomes weaker). And then, if I call
audition.play();
again, the one will continue again, playing right through the other one!

Looking in the DOM, I see that there's an audio element (the one I put there) and a Flash element (class me-plugin). It seems to me that both are started when I first call them. I can't figure out how to resolve this. The Flash element shouldn't be there in the first place, of course. But when the script thinks the browser can't handle the audio tag, I would think it bypasses it, and doesn't try playing it out of my control after all?

Any insight into a solution would be welcome!