jQuery event handling for HTML5 media events

I wan开发者_如何转开发t to listen to some of the events fired by HTML5 <audio> element. Some of event attributes for <audio> element are : onplaying, onprogress, onseeked, onseeking etc.,

I tried to listen to these events in jquery using conventional live() function like below, but it didn't work.

        $('audio#voice').live('progress', function(){
            $('a#play').replaceWith("Playing...")
        });

I also tried with

        $('audio#voice').live('onprogress', function(){
            $('a#play').replaceWith("Playing...")
        });

Is there any other way I can listen to these HTML5 media events in jQuery?

You can only use live() and delegate() for events that bubble. The audio events probably don't so you can only bind() them on existing elements.

I was trying to listen to onloadedmetadata, $('audio').bind('onloadedmetadata', function(){....});, but it was not working. At least for that I had to use 'loadedmetadata' in bind and then it worked. $('audio').bind('loadedmetadata', function(){....}); just a heads up for other events.

This may also be helpful. I quote from the jQuery bind api doc:

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.

live() didn't work. bind() worked.

$('audio#voice').bind('progress', function(){
  $('a#play').replaceWith("Playing...")
});