document.getElementById(‘audio_2′).addEventListener(‘ended’, function(){
2
this.currentTime = 0;
3
}, false);

I want to use this script to redirect the browser to another web page, after the music has played. Can someone kindly show me the specific way I would do this, if the target web page was “http://mypage.com/abc.html” ?

From what I understand you can’t easily remove an EventListener that was defined with an anonymous function like in the example above. You can however do something like this (try it via the Chrome Inspector Console)…

var bork = function() { alert(‘bork bork bork’) };
document.getElementById(‘audio_3′).addEventListener(‘ended’, bork, false);

Now play audio_3 and you’ll get a special message from the Swedish Chef.

document.getElementById(‘audio_3′).removeEventListener(‘ended’, bork);

Now play audio_3 again and no more Swedish Chef. *sniff*

So as long as you create your EventLister non-anonymously you should be set.

More info at http://www.quirksmode.org/js/events_advanced.html and http://stackoverflow.com/questions/4950115/removeeventlistener-on-anonymous-functions-in-javascript.

I also added ‘autoplay’ to the list of options after ‘controls’ and ‘preload’.

Thanks for the examples!

Of course none of this would be necessary if Firefox would support the loop option in HTML5.

Oh and lots of juicy information. Good read.

Thanks!

I read the discussion on Mozilla bug https://bugzilla.mozilla.org/show_bug.cgi?id=654787 (posted by @Hay who commented above). The conclusion I can draw from that discussion is that your Loop Method 1 would be great if browsers supported it (but FF still doesn’t to this day). Loop Methods 2 and 3 work, but *can never be* seamless.

Basically, if Loop Method 1 was supported, then the browser implementor would be able to program it to loop seamlessly by buffering the data from the start of the track in advance and having it loop seamlessly (down to the sample level).

With Methods 2 and 3 (where JavaScript is involved), at the very best you will have to wait until the audio buffer clears and start a new buffer. But it’s much worse than that, because what is going to happen when the audio ends is that it pushes a new event handler on the browser’s main event loop, waits for the event loop to pump again, executes some JavaScript code, which then starts up the audio system again. So the seamlessness of those approaches will vary from browser to browser and from system to system, but it will never actually be seamless. Also I wouldn’t expect there to be any real difference between Methods 2 and 3.

So I’d stick with Method 2 for now (and not expect seamless playback), and go over to Method 1 when browsers are ready. One suggestion (http://stackoverflow.com/questions/3273552/html-5-audio-looping) is to check whether typeof new Audio().loop == ‘boolean’, which will tell you whether the browser supports Method 1. If so, use that. If not, fall back to Method 2.