BryanWheelock BryanWheelock - 4 months ago 10
jQuery Question

How do I play an audio file with jQuery?

I'm having a difficult time getting audio to work with jQuery. I've tried this with both .wav and .ogg formats. (Firefox 19.0.2)

Clicking the Start button yields:


TypeError: buzzer.play is not a function


I'm not sure if jQuery selectors return an array, but I've tried the capture the audio file with both:

var buzzer = $('buzzer');


and

var buzzer = $('buzzer')[0];


Regardless, I can't get the audio elements to play.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
</head>

<body>

<audio id="buzzer" src="buzzer.ogg" type="audio/ogg">Your browser does not support the &#60;audio&#62; element.</audio>
<form id='sample' action="#" data-ajax="false">
<fieldset>
<input value="Start" type="submit">
</fieldset>
</form>
<script type="text/javascript">

var buzzer = $('buzzer')[0];

$(document).on('submit', '#sample', function() {
buzzer.play();
return false;
});

</script>
</body>
</html>

Answer

You forgot the hash # in your ID selector :

var buzzer = $('#buzzer')[0];  

$(document).on('submit', '#sample', function()  {     
    buzzer.play();    
    return false;    
});    

And document.getElementById('buzzer') does seem more appropriate!

I'd change the HTML to:

<audio id="buzzer" src="buzzer.ogg" type="audio/ogg"></audio>    
<input type="button" value="Start" id="start" />

and do:

$('#start').on('click', function() {
    $('#buzzer').get(0).play();
});
Comments