playback - HTML Audio Play/Stop -
i'm making chat application , 1 of features sending sound. html gets sent following:
<p> <audio autoplay> <source src="sounds/lol.mp3" type="audio/mpeg"> </audio> lol <a href="#" id="soundstop">stop</a> <a href="#" id="soundplay" style="display:none;">play</a> </p>
the 'autoplay' works fine when sent first time. need play/stop link hear sound again many times want. have following javascript:
$(document).on('click', '#soundstop', function(e) { $(this).hide(); $(this).next("a").show(); $('audio').each(function(){ this.pause(); this.currenttime = 0; }); e.preventdefault(); }); $(document).on('click', '#soundplay', function(e) { $(this).hide(); $(this).prev("a").show(); $(this).closest("audio").play(); //alert("play sound again!"); e.preventdefault(); });
the stop function works (although i'm not sure targeting 'audio' elements idea). i'm stuck @ how target audio element .play() in second function. might going @ wrong way?
any or advice appreciated.
edit: clarify, there might multiple instances of these sounds sent why need way target specific 'audio' each.
why dont use ready use controls of audio tag. it'll serve purpose.
try code :
<!doctype html> <html> <body> <audio autoplay controls> <source src="horse.ogg" type="audio/ogg"> </audio> </body> </html>
customer controls
<!doctype html> <html> <body> <audio id="player" src="horse.ogg"></audio> <div> <button onclick="document.getelementbyid('player').play()">play</button> <button onclick="document.getelementbyid('player').pause()">pause</button> <button onclick="document.getelementbyid('player').volume+=0.1">volume up</button> <button onclick="document.getelementbyid('player').volume-=0.1">volume down</button> </div> </body> </html>
Comments
Post a Comment