当上面的一个完成时播放下一个 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 顶部附近的一个，那么它会找到下一个并播放它，依此类推。

例如，如果有人在第一个按钮上按了播放，并且它一直播放到最后。它下面的一个将开始播放，依此类推。

另一个例子，如果有人在第 3 个播放器上播放并且那个播放器完成了，那么第 4 个将开始播放。

感谢您的帮助！

（想想播客网站）

Answer 1

您可以将ended事件附加到".audio-wrapper audio"选择器，使用.is()检查$(this).parent(".audio-wrapper").next(".audio-wrapper")是否存在，如果为真，则调用.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>