jquery - Playing audio on page load and pausing it onClick -

jquery - Playing audio on page load and pausing it onClick -

i creating page, onload, plays sound , when user listening track, can pause whenever want on click.

below code.

the html:

<audio id="player" src="http://www.soundjay.com/ambient/check-point-1.mp3"></audio> <a class="soundicnplay" title="button" id="button">&nbsp;</a>

the jquery code:

$(document).ready(function() { var playing = false; $('a#button').click(function() { $(this).toggleclass("down"); if (playing == false) { document.getelementbyid('player').play(); playing = true; $(this).removeclass('soundicnplay'); $(this).addclass('soundicnpause'); } else { document.getelementbyid('player').pause(); playing = false; $(this).removeclass('soundicnpause'); $(this).addclass('soundicnplay'); } }); });

the css:

.soundicnplay { background: none repeat scroll 0 0 red; cursor: pointer; display: block; height: 100px; width: 100px; } .soundicnpause { background: none repeat scroll 0 0 blue; cursor: pointer; display: block; height: 100px; width: 100px; }

the jsfiddle link:

live jsfiddle demo

what have done created play effect onclick , similar pause effect on it. need reverse making sound play on page load , should pause on click , resume when clicked again.

working demo

try snippet,

$(document).ready(function() { var playing = true; var audioel = $('#player')[0] audioel.play(); $('a#button').click(function() { if(playing){ playing = false; audioel.pause(); $(this).removeclass('soundicnplay').addclass('soundicnpause'); }else{ playing = true; audioel.play(); $(this).removeclass('soundicnpause').addclass('soundicnplay'); } }); });

other alternative add together autoplay attribute <audio> tag.

<audio id="player" src="http://www.soundjay.com/ambient/check-point-1.mp3" autoplay></audio>

jquery