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">▶</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?
I tested it like you suggested, but the song at the end is repeating itself...
– João Paulo Saragossa
actually the element with this class is added via jQuery, as it is in my script: "<button class="control play">▶</button>"
– João Paulo Saragossa
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ão Paulo Saragossa
@Joãopaulosaragossa put this in the answer now
– Sergio