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

Popular posts from this blog

Ansible - ERROR! the field 'hosts' is required but was not set -

customize file_field button ruby on rails -

SoapUI on windows 10 - high DPI/4K scaling issue -