Воспроизведение аудио через некоторое время после окончания другого аудио в цикле for

Насколько я понимаю, когда звук закончил воспроизведение, возникает событие "закончено".

http://forestmist.org/blog/html5-audio-loops/

Вы можете использовать это, чтобы сделать так, чтобы этап 2 запускал этап 3, а этап 4 запускал этап 5.

при воспроизведении первого аудио вы должны выполнить каждый второй шаг обратного вызова, и если вам нужно снова подождать в другой раз, вам нужно передать вызов обратно в setTimeout, следующий код немного упрощен:

// on Global scope 
var audioName = "something";
var img = document.getElementById("image_id");

showImage ();
playAudio(audioName, function () {
   playBell (); 
   hideImage ();
});

Теперь определение функций будет таким:

function showImage () {
    if (img && img.style) {
        img.style.height = screen.height;
        img.style.width = screen.width;
        img.style.visibility = "visible";
    } else {
        console.log("exercise(): error in setting image");
    }
}
function playAudio (audioName, callback) {
    try {
        myAudio = document.getElementById(audioName);
        myAudio.play();
        myAudio.onended = function() {
            setTimeout(callback, 5000); // after 5 seconds
        };
    } catch (error) {
        console.error("exercise(): " + error.message);
    }
}
function playBell () {
     try {
         console.log("playing bell");
        document.getElementById("bell").play();
    } catch (error) {
        console.error("bell: " + error.message);
    }
}
function hideImage() {
    img.style.visibility = "hidden";
}

Здесь у меня есть два примера addEventListener('ended'). Этот прослушиватель событий должен нормально работать для того, что вы просите.

Первый метод: вызывает другую функцию ChangeSrc() и использует тот же проигрыватель.

Первый метод получит игрока по идентификатору, скажет игроку играть и добавит прослушиватель событий. Это прослушает завершившееся событие, а затем вызовет ChangeSrc(). Когда вызывается ChangeSrc, прослушиватель событий удаляется, а проигрыватель src заменяется на следующую дорожку, а затем сообщается о воспроизведении.

HTML:

<b>Method One</b><button onclick="MethodOne()">Start</button><br>
<img id="DemoImg" src="sample1.png"/><br/>
<audio id="DemoAud" controls>
  <source src='sample1.mp3' type="audio/mpeg" />
Your browser does not support the audio element.
</audio>

JavaScript

 function MethodOne(){
    var a=document.getElementById("DemoImg");
    var b=document.getElementById("DemoAud");
    b.play();
    b.addEventListener('ended',ChangeSrc,false);
}
function ChangeSrc(){
    var a=document.getElementById("DemoImg");
    var b=document.getElementById("DemoAud");
    b.removeEventListener("ended",ChangeSrc);
        a.src="sample2.png";
        b.src="sample2.mp3";
        b.play();
}

Второй метод: использует одну функцию и два проигрывателя (как и ваш исходный код)

Этот метод очень похож на первый метод, но имеет функцию в прослушивателе событий, которая сообщает другому игроку, что нужно играть, поскольку эта функция запускается только после окончания первого аудиоклипа. Это также отобразит контейнер для изображения/проигрывателя.

HTML

<b>Method Two</b><button onclick="MethodTwo()">Start</button><br>
<div id="Demo2"  class="DemoBlock">
<img id="DemoImg2" src="sample1.png"/><br/>
<audio id="DemoAud2" controls>
  <source src='sample1.mp3' type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</div><div id="Demo3" class="DemoBlock">
<img id="DemoImg3" src="sample2.png"/><br/>
<audio id="DemoAud3" controls>
  <source src='sample2.mp3' type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</div>

JavaScript:

function MethodTwo(){
    var a=document.getElementById("DemoAud2");
    var b=document.getElementById("DemoAud3");
    a.play();
    a.addEventListener('ended',function(){
    document.getElementById("Demo3").style.display="inline-block";
    b.play();
    },false);   
}

Этот пример просто показывает вам два разных метода использования прослушивателя событий, остальное зависит от вас, чтобы интегрировать его в ваш существующий исходный код.

Исходный код демо

function MethodOne(){
	var a=document.getElementById("DemoImg");
	var b=document.getElementById("DemoAud");
	b.play();
	b.addEventListener('ended',ChangeSrc,false);
}
function ChangeSrc(){
	var a=document.getElementById("DemoImg");
	var b=document.getElementById("DemoAud");
	b.removeEventListener("ended",ChangeSrc);
		a.src="http://coded4u.com/28831485/sample2.png";
		b.src="http://coded4u.com/28831485/sample2.mp3";
		b.play();
}
function MethodTwo(){
	var a=document.getElementById("DemoAud2");
	var b=document.getElementById("DemoAud3");
	a.play();
	a.addEventListener('ended',function(){
	document.getElementById("Demo3").style.display="inline-block";
	b.play();
	},false);	
}

.DemoBlock{display:inline-block;}
#Demo3{display:none;}

<b>Method One</b><button onclick="MethodOne()">Start</button><br>
<img id="DemoImg" src="http://coded4u.com/28831485/sample1.png"/><br/>
<audio id="DemoAud" controls>
  <source src='http://coded4u.com/28831485/sample1.mp3' type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
<hr/>
<b>Method Two</b><button onclick="MethodTwo()">Start</button><br>
<div id="Demo2"  class="DemoBlock">
<img id="DemoImg2" src="http://coded4u.com/28831485/sample1.png"/><br/>
<audio id="DemoAud2" controls>
  <source src='http://coded4u.com/28831485/sample1.mp3' type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</div><div id="Demo3" class="DemoBlock">
<img id="DemoImg3" src="http://coded4u.com/28831485/sample2.png"/><br/>
<audio id="DemoAud3" controls>
  <source src='http://coded4u.com/28831485/sample2.mp3' type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</div>

Надеюсь, это поможет. Удачного кодирования!