播放带有 jquery 和 html5 音频的歌曲列表

Question

我正在尝试让 html5 音频播放器播放歌曲列表，但它只播放前两首并停在那里。

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

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

找不到这里的问题。

编辑

完整代码：

JS

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

HTML

<div id="audio-player">
    <button id="play"></button>
    <button id="pause"></button>
    <ul id="playlist">
        <li song="song1.wav" songtitle="Song1" artist="Artist1"></li>
        <li song="song2.wav" songtitle="Song2" artist="Artist2"></li>
        <li song="song3.wav" songtitle="Song3" artist="Artist3"></li>
        <li song="song4.wav" songtitle="Song4" artist="Artist4"></li>
    </ul>
    <div id="audio-info">
    <span class="artist"></span>&nbsp;&nbsp;<span class="title"></span>
    </div>
</div>

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

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

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

这是因为 $(audio) 指的是当您执行 initAudio 时被破坏并重新创建的音频元素。该行：

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

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

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

播放带有 jquery 和 html5 音频的歌曲列表

Playing song list with jquery and html5 audio

html

audio

jquery

html5-audio