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

Question

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

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

Answer 1

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

但是，它没有必要，因为您可以使用DOM告诉jPlayer新的情况。您需要添加一些关于每个播放列表项的额外信息才能使其工作，因此这个解决方案有点像黑客。

更改next对象的previous和myPlaylist方法

<强> 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 Sortable插件：

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