onended audio event firing without playing the audio

Question

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>

Answer 1

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>

onended audio event firing without playing the audio

Question

1 answers

solution1
1 ACCPTED 2015-06-15 22:39:57

onended audio event firing without playing the audio

Question

1 answers

solution1 1 ACCPTED 2015-06-15 22:39:57

solution1
1 ACCPTED 2015-06-15 22:39:57