当其中一个结束时播放下一个html5音频 [英] Play next html5 audio when one above it finishes

问题描述

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

<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个将开始比赛.

感谢您的帮助！

(想想播客网站)

解决方案

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

Hello I have a series of audio clips.

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

In my actual code the audio is spread out through a large wordpress page.

I was wondering if it was possible to play the next one after one above it finishes? For example if one near the top of html is played then it will find the next down and play that, and so one.

For example if someone pressed play on the first one and it finished till the end. The one below it would start playing, and so on.

Another example if someone hit play on the 3rd one and that one finished, Then the 4th one would start playing.

Thanks for any help!

(think podcast site)

解决方案

You can attach ended event to ".audio-wrapper audio" selector, check if $(this).parent(".audio-wrapper").next(".audio-wrapper") exists using .is(), if true, call .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音频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！