Skip to content Skip to sidebar Skip to footer

Html5 Audio Multiple Play

I'am programming a Javascript game and I want to use one sound in multiple times. I can do it with loading one sound more times to an array. But I want to load one sound once and '

Solution 1:

My experience :

it is better to create more audio html tags with the same source . I 'm a fan of js but this time it is better to have html audio tags in html form.

I made a duplicate audio tags and I adorned my needs. If you want to play the same sound several times in one second , then add more clones.

also you can fix the autoplay bug ( instead of EXE_JUST_ONE_TIME you can use override click event , not important now ) :

<audiocontrolsid="LaserShot" ><sourcesrc="LaserShot.mp3"type="audio/mpeg"><sourcesrc="LaserShot.ogg"type="audio/ogg"></audio><audiocontrolsid="LaserShot_CLONE" ><sourcesrc="LaserShot.mp3"type="audio/mpeg"><sourcesrc="LaserShot.ogg"type="audio/ogg"></audio><script>varEXE_JUST_ONE_TIME = false;

  document.addEventListener("click" , function(e) {

    if (EXE_JUST_ONE_TIME == false){

      EXE_JUST_ONE_TIME = true;

      document.getElementById("LaserShot").play();
      document.getElementById("LaserShot").pause();

      document.getElementById("LaserShot_CLONE").play();
      document.getElementById("LaserShot_CLONE").pause();

      // Buffering in progress // now you can play programmability from code// One click or touch can prepare max 6 audios 

    }
 }


Last part (need to be handled) this handler works only for one clone:


    var play_shoot = function(){

     if (document.getElementById('LaserShot').duration > 0 &&
       !document.getElementById('LaserShot').paused) {

      document.getElementById('LaserShot_CLONE').play();

     } else {

      document.getElementById('LaserShot').play();

     }

    }

Post a Comment for "Html5 Audio Multiple Play"