1

Estou criando uma playlist com HTML5 e jQuery. Minha marcação:

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

E meu 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');

    });
  }
});

Preciso que quando uma música da playlist terminar sua execução a próxima música da playlist seja executada, até a última. Como fazer isso?

2 Respostas 2

1

Tens de detetar o evento ended e aí iniciares a proxima musica.

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

No teu código específico podes fazer assim (não testado):

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

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

4
  • Eu testei como você sugeriu, mas a música ao terminar está repetindo ela mesma... 29/05/2015 às 16:25
  • na verdade o elemento com essa classe é adicionado via jQuery, como está em meu script: "<button class="control play">&#9654;</button>" 29/05/2015 às 16:59
  • Ela está passando para a próxima como eu esperava, por isso vou marcar tua resposta como correta, porem quando eu dou play em outra track da playlist ela toca a primeira, para então seguir a diante. Há um modo de fazer ela tocar aquela que se deu play para então continuar? Obrigado! 29/05/2015 às 17:21
  • @JoãoPauloSaragossa juntei isso na resposta agora
    – Sergio
    29/05/2015 às 18:26
0

Adicionas um eventListener para o "ended" da musica atual e então depois inicias a próxima musica.

Tens aqui um bom exemplo funcional:

http://jsfiddle.net/HxhGp/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .