HTML Audio - How to automatically go to the next song in a jQuery playlist

Asked

Viewed 1,948 times

1

I’m creating a playlist with HTML5 and jQuery. My appointment:

<ol class="playlist">
  <li>
    audio 1
    <audio class="track" preload="none">
      <source src="<?php echo $siteroot; ?>/audio/joao/docevapor/audio1.ogg" type="audio/ogg">
    </audio>
  </li>
  <li>
    audio 2
    <audio class="track" preload="none">
      <source src="<?php echo $siteroot; ?>/audio/joao/docevapor/audio2.ogg" type="audio/ogg">
    </audio>
  <li>
    audio 3
    <audio class="track" preload="none">
      <source src="<?php echo $siteroot; ?>/audio/joao/docevapor/audio3.ogg" type="audio/ogg">
    </audio>
  </li>
</ol>

And my script:

$(function() {

  if($('.playlist')) {

    $('.playlist').find('li').prepend('<button class="control play">&#9654;</button>');

    $('.playlist li').on('click', '.play', function() {

      var index = $(this).parent().index();

      var track = $(this).parent().find('.track').eq(0);

      $('.playlist .track').trigger('pause');
      $('.playlist .play').removeClass('active');

      $(this).addClass('active');
      track.trigger('load').trigger('play');

    });
  }
});

I need that when a playlist song finishes running the next playlist song to run, until the last one. How to do this?

jquery html5 html5-audio

2 answers

1


You gotta spot the event ended and then start the next song.

$('#myAudio').on('ended', function() {
   // correr código aqui
});

In your specific code you can do so (untested):

var atual = 0,
    next = 0;

function tocador(playlist, tracks) {
    $('.playlist .track').trigger('pause');
    $('.playlist .play').removeClass('active');
    tocando = true;
    $(playlist).addClass('active');
    tracks.on('ended', function () {
        next = atual == tracks.length ? 0 : atual + 1;
        tracks.eq(next).trigger('load').trigger('play');
    });
    tracks.eq(atual).trigger('load').trigger('play');
}
$('.playlist').on('click', '.play', function (e) {
    atual = 0;
    var tracks = $(this).closest('ol').find('.track');
    tocador(this, tracks);
});

$('.playlist audio').on('play', function () {
    var index = $(this).closest('li').index() - 1;
    if (atual == index || next == index) return;
    atual = next = index;
    var tracks = $(this).closest('ol').find('.track');
    var playlist = $(this).closest('playlist').find('.play');
    tocador(playlist, tracks);
});

Example: http://jsfiddle.net/445y2vkt/

  • I tested it like you suggested, but the song at the end is repeating itself...

  • actually the element with this class is added via jQuery, as it is in my script: "<button class="control play">&#9654;</button>"

  • She’s moving on to the next one as I expected, so I’m going to mark your answer as correct, but when I play another track on the playlist she plays the first one, then move on. Is there a way to make her play the one that was played to then continue? Thank you!

  • @Joãopaulosaragossa put this in the answer now

0

Add an eventListener to the "ended" of the current song and then start the next song.

Here’s a good working example:

http://jsfiddle.net/HxhGp/

Browser other questions tagged jquery html5 html5-audio

You are not signed in. Login or sign up in order to post.