HTML-аудио плеер Javascript зацикливается непреднамеренно

Question

HTML-аудио плеер Javascript зацикливается непреднамеренно

Я использую ссылку JavaScript, расположенную в <head> раздел моего сайта WP. Это очень просто и работает хорошо, за исключением случая, когда проигрыватель заканчивает последний трек - он начинает воспроизводить первый трек снова.

Я пытался использовать loop="false" но он запускает другую ошибку, перезапуская ту же самую последнюю дорожку. Я не знаком с кодированием JavaScript, но я думаю, что должно быть возможно создать класс, что-то вроде class="last-song" и поиграй с этим.

Пример можно увидеть здесь, где HTML может быть проверен:

Javascript можно найти здесь

Я был бы очень признателен, если бы кто-то мог получить некоторую помощь.

1

javascript html avaudioplayer

Источник

user9448669 06 мар '18 в 02:01

2 ответа

Другие вопросы по тегам javascript html avaudioplayer

user3221841 06 мар '18 в 02:22 2018-03-06 02:22 · Answer 1 · 2018-03-06 02:22

        $("#audioPlayer")[0].src = $("#playlist li a")[currentSong].href;
        $("#audioPlayer")[0].play();

это говорит, что играть первым в последовательности массива

Меня смущает утверждение if, так как оно, похоже, ничего не делает

if(currentSong == $("#playlist li a").length)

поскольку нет фигурных скобок {}, чтобы указать, что нужно делать с IF и ELSE

function audioPlayer(){
var currentSong = 0;
$("#audioPlayer")[0].src = $("#playlist li a")[0];
$("#audioPlayer")[0].play();
$("#playlist li a").click(function(e){
    e.preventDefault(); 
    $("#audioPlayer")[0].src = this;
    $("#audioPlayer")[0].play();
    $("#playlist li").removeClass("current-song");
    currentSong = $(this).parent().index();
    $(this).parent().addClass("current-song");
});

$("#audioPlayer")[0].addEventListener("ended", function(){
    currentSong++;
    if(currentSong == $("#playlist li a").length){
        currentSong = 0;
        $("#audioPlayer")[0].src = $("#playlist li a")[currentSong].href;
        $("#audioPlayer")[0].pause();
    }else{
        $("#audioPlayer")[0].src = $("#playlist li a")[currentSong].href;
        $("#audioPlayer")[0].play();
    }
    $("#playlist li").removeClass("current-song");
    $("#playlist li:eq("+currentSong+")").addClass("current-song");
}
);
}

user1121957 06 мар '18 в 02:13 2018-03-06 02:13 · Answer 2 · 2018-03-06 02:13

Ваш код

$("#audioPlayer")[0].addEventListener("ended", function(){
currentSong++;
if(currentSong == $("#playlist li a").length)
currentSong = 0;
$("#playlist li").removeClass("current-song");
$("#playlist li:eq("+currentSong+")").addClass("current-song");
$("#audioPlayer")[0].src = $("#playlist li a")[currentSong].href;
$("#audioPlayer")[0].play();
});
}

когда вы устанавливаете currentSong = 0; после вашего if(currentSong... Скажите, что вы говорите это петле По сути, вы сбрасываете его обратно к первой песне в массиве каждый раз, когда он достигает конца.

Если вы изменили это на что-то вроде:

if (currentSong == $("#playlist li a").length) {
    $("#audioPlayer")[0].pause() // maybe .stop()
    // Do more stuff here for your UI
}

Похоже, что вы ничего не могли сделать (просто закомментируйте currentSong = 0 линия). Например:

$("#audioPlayer")[0].addEventListener("ended", function(){
    currentSong++;
    if(currentSong == $("#playlist li a").length)
    //currentSong = 0;
    $("#playlist li").removeClass("current-song");
    $("#playlist li:eq("+currentSong+")").addClass("current-song");
    $("#audioPlayer")[0].src = $("#playlist li a")[currentSong].href;
    $("#audioPlayer")[0].play();
});