onended audio event firing without playing the audio

166 views Asked by At

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>
1

There are 1 answers

0
mhmsa On BEST ANSWER

I've got it to work.

<!DOCTYPE html> 
<html> 
<body> 
<script>
var count=0;
</script>
<p>Press play and wait for the audio to end.</p>

<audio id="myAudio" onended='IncrementCount()' 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 onended='IncrementCount()'>
  <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>
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;}
};
</script>

</body> 
</html>