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"选择器，使用$(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>

当一个上面的html5音频结束时播放

1 个答案: