I have multiple audio files that I need to be played, and only when all audio has been played completely the next section is supposed to show.
The code that I've written fires automatically without playing any audio; how should I do it? Here's my code:
<!DOCTYPE html>
<html>
<body>
<p>Press play and wait for the audio to end.</p>
<audio id="myAudio" controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<audio id="myAudio2" controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<section id='asd'>
Hsfdads
</section>
<script>
var e= document.getElementById("asd");
console.log(e.style.display);
e.style.display='none';
</script>
<script>
var count=0;
function IncrementCount() {
count+=1;
console.log(count);
if (count ==2){
var e= document.getElementById("asd");
e.style.display='block';
alert("The audios has ended");
count=0;
}
};
var aud = document.getElementById("myAudio");
aud.onended = IncrementCount()
var aud2 = document.getElementById("myAudio2");
aud2.onended = IncrementCount()
</script>
</body>
</html>
I've got it to work.