Adding event listener to audio HTML5 tag in javascript

Question

Hi I'm creating a new audio tag element in Javascript this is the code:

var audio = document.createElement("audio");
audio.setAttribute("id","myid");
audio.setAttribute("autoplay","autoplay");
document.body.appendChild(audio);

before appending it to the body, I'd like to place an onended event handler, I tried something like this:

audio.onended = foo;

where foo is something like: function foo(){alert('Hola')}

and

audio.setAttribute("onended","foo()");

in both case it didn't work. In the first case the audio tag is appended without any onended event handler; while in the second case the audio tag is appended, the onended event is on the attributes but it does not fire.

does someone have any idea?

thanks in advance.

-z-

Answer 1

try:

audio.addEventListener('ended', foo);

This is the correct and standard method to add event listeners.

Answer 2

First, make sure whether audio element has the event before you use it, suppose the HTMLAudioElement is audio, you can test it like this audio.hasOwnProperty('onended')

Based on my browser, it doesn't support.

Answer 3

I found this very helpful jsfiddle from Google: http://jsfiddle.net/aarongloege/fzXsT/light/

{Code on /*jsFiddle*/}