BryanWheelock BryanWheelock - 1 year ago 67
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: 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');


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

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

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src=""></script>


<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">
<input value="Start" type="submit">
<script type="text/javascript">

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

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


Answer Source

You forgot the hash # in your ID selector :

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

$(document).on('submit', '#sample', function()  {;    
    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() {
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download