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">▶</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?