HTML5 Audio and jQuery

Question

I am trying to use a button to start a track in an HTML5 audio tag using jQuery, but I keep getting an error.

var song = $('#audio');

$('#play').click(function() {
song.play();
});

When I use document.getElementById('audio'), it works, but when using the jQuery selector I get the following error:

Uncaught TypeError: Object [object Object] has no method 'play'

Thanks for any help.

Answer 1

Try getting the native DOM element as jQuery knows nothing about .play method on the wrapped array returned by the $('#audio') selector:

song.get(0).play();

Answer 2

You can also write it like song.trigger('play');. That will allow you to use the $('#audio'); selector.

Answer 3

Instead of .get() just use object notation:

var song = $('#audio');

$('#play').click(function() {
    song[0].play();
});

It's less to type :)