播放下一个html5音频时，其上面有一个完成

Question

您好，我有一系列音频剪辑。

<div class="audio-wrapper"> 
    <audio controls> 
     <source src="aduio1.mp3" type="audio/mpeg"> 
    </audio> 
</div> 

<div class="audio-wrapper"> 
    <audio controls> 
     <source src="aduio2.mp3" type="audio/mpeg"> 
    </audio> 
</div> 

<div class="audio-wrapper"> 
    <audio controls> 
     <source src="aduio3.mp3" type="audio/mpeg"> 
    </audio> 
</div> 

<div class="audio-wrapper"> 
    <audio controls> 
     <source src="aduio4.mp3" type="audio/mpeg"> 
    </audio> 
</div> 

在我的实际代码中，音频是通过一个大的wordpress页面传播出去的。

我想知道是否可以在完成一个之后播放下一个？例如，如果播放HTML附近的某个播放器，则它会找到下一个并播放该内容，然后播放该内容。

例如，如果有人按下第一个玩游戏，它完成到结束。它下面的那个会开始玩，等等。

另一个例子，如果有人在第三个人上打了一场比赛，那个人就完成了，然后第四个人开始打球。

感谢您的帮助！

（认为播客网站）

Answer 1

您可以将ended事件".audio-wrapper audio"选择，检查是否$(this).parent(".audio-wrapper").next(".audio-wrapper")存在使用.is()如果属实，请拨打.play()

const src = "https://upload.wikimedia.org/wikipedia/commons/4/4d/%22Pollinate%22-_Logic_Synth_and_Effects_Demonstration.ogg"; 
 

 
$(".audio-wrapper audio") 
 
.each(function() { 
 
    this.src = src; 
 
}) 
 
.on("ended", function(event) { 
 
    let next = $(this).parent(".audio-wrapper") 
 
      .next(".audio-wrapper").find("audio"); 
 
    console.log(next) 
 
    if (next.is("*")) { 
 
    next[0].play() 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="audio-wrapper"> 
 
    <audio controls> 
 
    </audio> 
 
</div> 
 

 
<div class="audio-wrapper"> 
 
    <audio controls> 
 
    </audio> 
 
</div> 
 

 
<div class="audio-wrapper"> 
 
    <audio controls> 
 
    </audio> 
 
</div> 
 

 
<div class="audio-wrapper"> 
 
    <audio controls> 
 
    </audio> 
 
</div>