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

时间:2017-10-12 05:29:04

标签: javascript jquery html5 audio media-player

您好我有一系列音频片段。

<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场将开始比赛。

感谢您的帮助!

(想想播客网站)

1 个答案:

答案 0 :(得分: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>