如何使用javascript使三个html音频元素按顺序重复工作

Question

How can i make three HTML audio elements work sequentially repeated each one three times or more.

means I will make the first audio work three times, then the second work three times, then the third three times

I have this code, but i don't have an idea to make the audio elements repeated:

HTML & JavaScript:

 function play(j){ var audio = document.getElementById('audio'+j); //declaring audio audio.play(); //playing audio audio.addEventListener('ended', function (){ //after audio ends, it will check weather it will play again or no j++; if(j<=3){ play(j); } }) } 

 <audio controls id="audio1"> <source src="http://learn.shayhowe.com.s3-website-us-east-1.amazonaws.com/assets/misc/courses/html-css/adding-media/jazz.ogg" type="audio/mpeg"> your browser doesn't support audio </audio><br/> <audio controls id="audio2"> <source src="http://learn.shayhowe.com.s3-website-us-east-1.amazonaws.com/assets/misc/courses/html-css/adding-media/jazz.ogg" type="audio/mpeg"> your browser doesn't support audio </audio><br/> <audio controls id="audio3"> <source src="http://learn.shayhowe.com.s3-website-us-east-1.amazonaws.com/assets/misc/courses/html-css/adding-media/jazz.ogg" type="audio/mpeg"> your browser doesn't support audio </audio> <button onclick="play(1)">run audio</button> 

Answer 1

function play(j){
  var audio = document.getElementById('audio'+Math.floor(j)); //declaring audio
  audio.play();                                 //playing audio
  audio.addEventListener('ended', function (){  //after audio ends, it will check weather it will play again or no 
     j+=1/3;
     if(j<=3){
       play(j);
     }
   })   
 }

Simply just increase by a third (and round the number if you use it), so that it plays three times...

Or more beautiful (using an double-recursive approach ;)):

function playthree(i){
  (function play(c){
     var audio = document.getElementById('audio'+i); //declaring audio
     audio.play();                                 //playing audio
     audio.addEventListener('ended', function (){  //after audio ends, it will check weather it will play again or no 
        if(c>=3 ){//if more than three per audio
            if(i<3){//and not reached the last audio
              playthree(i+1);//play next audio
            }//else end all
        }else{//we didnt reached the third play, lets keep going...
         play(c+1);  
        }
     });
  })(1)//start with 1
}