Question

我试图让html5音频播放器播放歌曲列表，但它只播放两首歌曲，然后停在那里。

我用这个来让它在一个结束后播放下一首歌：

SharedPreferences

无法找出问题所在。

修改

整个代码：

JS

$(audio).on("ended", function() {
audio.pause();
var next = $('#playlist li.active').next();
if (next.length == 0) {
    next = $('#playlist li:first-child');
}
initAudio(next);
audio.play();
showDuration();
});

HTML

var audio;

$('#pause').hide();

initAudio($('#playlist li:first-child'));

function initAudio(element){
var song = element.attr('song');
var title = element.attr('songtitle');
var artist = element.attr('artist');

audio = new Audio('audio/' + song);

if(!audio.currentTime){
    $('#duration').html('0:00');
}

$('#audio-player .title').text(title);
$('#audio-player .artist').text(artist);

$('#playlist li').removeClass('active');
element.addClass('active');
}

$('#play').click(function(){
audio.play();
$('#play').hide();
$('#pause').show();
showDuration();
});

$('#pause').click(function(){
audio.pause();
$('#pause').hide();
$('#play').show();
});

$(audio).on("ended", function() {
audio.pause();
var next = $('#playlist li.active').next();
if (next.length == 0) {
    next = $('#playlist li:first-child');
}
initAudio(next);
audio.play();
showDuration();
});

Answer 1

移动此代码：

$(audio).on("ended", function() {
audio.pause();
var next = $('#playlist li.active').next();
if (next.length == 0) {
    next = $('#playlist li:first-child');
}
initAudio(next);
audio.play();
showDuration();
});

在initAudio函数中，如下所示：

function initAudio(element){
    var song = element.attr('song');
    var title = element.attr('songtitle');
    var artist = element.attr('artist');

    audio = new Audio('audio/' + song);

    if(!audio.currentTime){
        $('#duration').html('0:00');
    }

    $('#audio-player .title').text(title);
    $('#audio-player .artist').text(artist);

    $('#playlist li').removeClass('active');
    element.addClass('active');

    $(audio).on("ended", function() {
        audio.pause();
        var next = $('#playlist li.active').next();
        if (next.length == 0) {
            next = $('#playlist li:first-child');
        }
        initAudio(next);
        audio.play();
        showDuration();
    });
}

这将确保为所有ended元素触发audio调用，而不仅仅是第一个元素。

目前，ended事件仅被触发一次。因此，代码播放第一首歌曲，触发ended事件，播放第二首歌曲，然后不再触发ended。

这是因为$(audio)是指在执行initAudio时销毁并重新创建的音频元素。这一行：

audio = new Audio('audio/' + song);

在调用initAudio时创建一个新的audio元素。这个新的audio元素不会附加相同的回调。

$(audio).on("ended", ...);只附加一次，如果代码创建了相同类型的新元素，则不会重新附加它们。因此，每次重新创建音频元素时都需要重新附加事件回调，这可以在initAudio中完成。如果你使用了选择器，一个常见的方法就是使用$(document).on("ended", selector, ...);来实现这一点，但是在你的例子中它不起作用，因为audio不是选择器。

用jquery和html5音频播放歌曲列表

1 个答案: