触发音频事件而不播放音频

onended audio event firing without playing the audio

本文关键字:音频 播放 事件      更新时间:2023-09-26

我需要播放多个音频文件,只有当所有音频都完全播放时,下一部分才应该显示。

我编写的代码会自动触发,无需播放任何音频;我应该怎么做?这是我的代码:

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

我已经让它工作了。

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