CODEWITHSUNDEEP
jqueryhtml5-audio
BryanWheelock
BryanWheelock

Reputation: 12244

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>

Upvotes: 7

Views: 49135

Answers (3)

athanzhang
athanzhang

Reputation: 122

You are using the id to mark your audio tag in your HTML. So,you should add # when your are using the selector.

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

besides, you are using id to identify your audio, you can also define your valuable like this:

var buzzer = $('#buzzer');

don't have to add the [0],[0] means you get the first element.

Upvotes: 0

Adil Shaikh
Adil Shaikh

Reputation: 44740

var buzzer = document.getElementById("buzzer");

You can also do this:

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

And if id buzzer is unique (As it should) you can also do this - no need of [0]

var buzzer = $('#buzzer');

Upvotes: 1

adeneo
adeneo

Reputation: 318162

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();
});

Upvotes: 16

Related Questions