CODEWITHSUNDEEP
javascripthtmldom-eventsaudio-player
mhmsa
mhmsa

Reputation: 475

onended audio event firing without playing the audio

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>

Upvotes: 1

Views: 148

Answers (1)

mhmsa
mhmsa

Reputation: 475

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>

Upvotes: 1

Related Questions