Question

让我从头开始吧。下面是将html识别为播放列表的脚本：

var audio;
var library;
var tracks;
var current;
init();
function init() {
    current = 0;
    audio = $('.player');
    library = $('.album_tracks_container');
    tracks = library.find('.span-link');
    len = tracks.length;
    var playlist;
    library.find('.span-link').click(function(e) {
        e.preventDefault();
        link = $(this);
        current = link.parent().index();
        playlist = link.closest('.album_tracks_container');
        run(link, audio[0]);
    });
    audio[0].addEventListener('ended',function(e) {
        current++;
        if(current == len){
            current = 0;
            link = playlist.find('.span-link')[0];
        } else {
            link = playlist.find('.span-link')[current];   
        }
        run($(link),audio[0]);
    });
}
function run(link, player) {
    player.src = link.attr('data');
    audio[0].load();
    audio[0].play();
}

使用下面这样的html很有效，当播放完当前的一首歌后，它会播放列表中的下一首曲目：

<div class="album_container">
    <div class="album_tracks_container">
        <div class="album_tracks_light">
            <span class="span-link" data="media/album1/01.wav"></span>
        </div>
        <div class="album_tracks_dark">
            <span class="span-link" data="media/album1/02.wav"></span>
        </div>
        <div class="album_tracks_light">
            <span class="span-link" data="media/album1/03.wav"></span>
        </div>
        <div class="album_tracks_dark">
            <span class="span-link" data="media/album1/04.wav"></span>
        </div>
    </div>
</div>

如果我有这样的html，它似乎工作正常，它将跳过第三个容器并开始播放第四个：

<div class="album_container">
    <div class="album_tracks_container">
        <div class="album_tracks_light">
            <span class="span-link" data="media/album2/01.wav"></span>
        </div>
        <div class="album_tracks_dark">
            <span class="span-link" data="media/album2/02.wav"></span>
        </div>
        <div class="album_tracks_light">
            <span class="span-not-link"></span>
        </div>
        <div class="album_tracks_dark">
            <span class="span-link" data="media/album2/04.wav"></span>
        </div>
    </div>
</div>

但是我说下面有一个像这样的HTML，它似乎不起作用。播放音轨02后，它不会切换到音轨03：

<div class="album_container">
    <div class="album_tracks_container">
        <div class="album_tracks_light">
            <span class="span-not-link"></span>
        </div>
        <div class="album_tracks_dark">
            <span class="span-link" data="media/album2/02.wav"></span>
        </div>
        <div class="album_tracks_light">
            <span class="span-link" data="media/album2/03.wav"></span>
        </div>
        <div class="album_tracks_dark">
            <span class="span-link" data="media/album2/04.wav"></span>
        </div>
    </div>
</div>

有什么想法吗？

-edit -

我仍然遇到麻烦，但是在之前的编辑中，我发现它与缺失的音轨没什么关系，但更多的是与第一首音轨是否存在有关。如果有01.wav，则播放列表可以正常工作，但如果不是，则播放列表会中断。

Answer 1

您可以检查它是否有文件链接：

 playlist.find('.span-link').click(function(e) {
    if($(this).attr("data").length>0){
            e.preventDefault();
            link = $(this);
            current = link.parent().index();
            currentplaylist = link.closest('.album_tracks_container');
            run(link, audio[0]);
       } });

Answer 2

我认为问题出在你最后的听众身上。

我们应该检查这里的数据链接，如果它不存在，只需转到下一个。

也许是这样的：

audio[0].addEventListener('ended',function(e) {
    current++;
    while(current < len){
        link = playlist.find('.span-link')[current];
        if(!link.attr("data").length) current++;
    }

    if(current == len) {
        current = 0;
        link = playlist.find('.span-link')[0];
    }

    run($(link),audio[0]);
});

另一件事是，如果您的播放列表没有更改，则最好缓存 playlist.find（'。span-link'），然后每次都使用它。

玩得开心。：）

如何让这个javascript播放列表跳过丢失的曲目？

2 个答案: