如何在不影响播放的情况下更改 jPlayer 播放列表的顺序？

Question

设置新的播放列表对象会导致我的 jPlayer 停止播放音乐。我也尝试重新排序播放列表数组，但 jPlayer 似乎保留了两个数组（当前和原始）并且它似乎没有更正其播放索引。这意味着如果您更改 JavaScript 中的数组，播放列表将不再正常运行。

有没有办法在不重置播放列表对象的情况下更改播放列表的项目顺序？

Answer 1

jPlayer 使用 JavaScript 对象来跟踪您的播放列表。但它也代表它在DOM。如果您在 DOM 中对其重新排序（例如，使用 jQuery UI 可排序），它不会与 JavaScript 对象同步。

但是，不必这样做，因为您可以使用 DOM 将新情况告知 jPlayer。您将需要添加一些关于每个播放列表项目的额外信息才能使其正常工作，因此该解决方案有点麻烦。

---

更改 myPlaylist 对象的 next 和 previous 方法

jplayer.playlist.min.js

改变

next:function(){var a=this.current+1<this.playlist.length?this.current+1:0;this.loop?0===a&&this.shuffled&&this.options.playlistOptions.shuffleOnLoop&&this.playlist.length>1?this.shuffle(!0,!0):this.play(a):a>0&&this.play(a)}

进入

next:function(){$(this).trigger("playlist_next")}

---

改变

previous:function(){var a=this.current-1>=0?this.current-1:this.playlist.length-1;(this.loop&&this.options.playlistOptions.loopOnPrevious||a<this.playlist.length-1)&&this.play(a)}

进入

previous:function(){$(this).trigger("playlist_previous")}

---

为每个播放列表项插入一个 script 标签

改变

_createListItem:function(b){var c=this,d="<li><div>";

进入

_createListItem:function(b){var c=this,d='<li><script class="jp-json" type="application/json">'+JSON.stringify(b)+'</script><div>';

---

跟踪您的 DOM 播放列表更改

例如，使用 jQuery UI 可排序插件：

var playlistChanged = false;

$('.jp-playlist ul').sortable({
    update    : function( e, ui ) {
        playlistChanged = true;
    }
});

---

为播放列表行为创建处理程序

function getCurrentPlaylistIndex() {
    var index = 0;
    $( '.jp-playlist ul li' ).each( function(){
        if( $( this ).hasClass( 'jp-playlist-current' ) ) {
            return false;
        }
        ++index;
    });
    return index;
}

function playNextJpItem() {
    var index = getCurrentPlaylistIndex();
    if( index == $( '.jp-playlist ul li' ).length ) {
        return false; // end of playlist reached, use index = 0 to cycle to beginning
    }
    if( playlistChanged ) {
        resetJpPlaylist();
    }
    myPlaylist.play( ++index );
}

function playPreviousJpItem() {
    var index = getCurrentPlaylistIndex();
    if( index == 0 ) {
        return false; // beginning of playlist reached, use index = length to cycle to end
    }
    if( playlistChanged ) {
        resetJpPlaylist();
    }
    myPlaylist.play( --index );
}

---

将处理程序绑定到 previous 和 next 事件

$( myPlaylist ).bind( 'playlist_next', function(e){
    playNextJpItem();
});
$( myPlaylist ).bind( 'playlist_previous', function(e){
    playPreviousJpItem();
});

---

如果播放列表 DOM 已更改，请重新设置 myPlaylist 的播放列表数组

由于这仅在调用 previous 或 next 方法时发生，因此用户希望音频无论如何都会停止播放。这是您重建数组以再次匹配您的 DOM 并指示 jPlayer 从先前已知的索引开始播放的机会，加 1 或减 1。注意： 此功能仅重建数组，要播放的新索引在 previous 和 next 处理程序中计算，如前所示。

function resetJpPlaylist() {
    var playlist = new Array();
    $( '.jp-playlist ul li .jp-json' ).each( function( index, element ){
        playlist[ index ] = JSON.parse( $( element ).html() );
    });
    myPlaylist.setPlaylist( playlist );
    playlistChanged = false;
}

Answer 2

我写了一个 jPlayer 2.9.2 的分支，可以在不影响播放功能的情况下启用可排序的播放列表。

jQuery UI Sortable support for jPlayer Playlists add-on