Play Next Html5 Audio When One Above It Finishes

Hello I have a series of audio clips.

Solution 1:

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()
  }
})

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="audio-wrapper"><audiocontrols></audio></div><divclass="audio-wrapper"><audiocontrols></audio></div><divclass="audio-wrapper"><audiocontrols></audio></div><divclass="audio-wrapper"><audiocontrols></audio></div>

Share