Firefox does NOT fire 'play' or 'playing' event for the first time/on page load

Question

I cannot seem to get Firefox v20.0 to fire the "play" or "playing" event for the first time when the audio player plays an audio file on page load.

If I click pause, and then click play, both the "play" and "playing" events fire, but not on the initial page load.

I've tried binding to the "play"/"playing" event using vanilla JS as below and even tried using jQuery's bind() method, but to no avail.

The seems to work fine in Chrome v26.0.1410.64 and in IE 10. Is this a bug in Firefox?

// HTML
// ---------------------------------------------------
<audio controls="" preload="auto" autobuffer autoplay>
    <source src="bc.ogg" type='audio/ogg'>
</audio>


// JS
// --------------------------------------------
// Assume player is <audio>

player.addEventListener('playing', function() {
    console.log('PLAY');
});

My end goal is to replace a custom PLAY button with a PAUSE button when audio is playing.

Answer 1

The audio element is probably starting to play before the listener gets bound. This can happen in some browsers and not in others due to internal differences in how the DOM is built and processed. The best solution would be to bind the listener once the page has completely loaded and play the audio element then instead of relying on the browser to start it when it wants to.