Search code examples
jplayer

How to handle song removal event in jPlayer with jPlayerPlaylist add-on


This is my code:

var myPlaylist = new jPlayerPlaylist({
        jPlayer: "#jquery_jplayer_1",
        cssSelectorAncestor: "#jp_container_1"
    }, [
        {
            title:"Right Now(Na Na Na)",
            artist:"akon",
            mp3: "http://7xiaao.com1.z0.glb.clouddn.com/Akon - Right Now(Na Na Na).mp3"
            //oga: "/music/",
            //poster: "images/m0.jpg"
        }
    ], {
        playlistOptions: {
            enableRemoveControls: true,
            autoPlay: false
        },
        swfPath: "/res/plugin/jPlayer/dist/jplayer",
        supplied: "mp3",
        smoothPlayBar: true,
        useStateClassSkin: true,
        keyEnabled: true,
        audioFullScreen: false,
});

Solution

  • jPlayerPlaylist add-on doesn't seem to provide a way to handle song removal event.

    The workaround is to handle click events on x yourself, for example:

    $('.jp-playlist').on('click', '.jp-playlist-item-remove', function(){
        // Determine song index if necessary
        var index = $(this).parents('li').index('.jp-playlist li');
    
        // Retrieve song information, if necessary
        var song = myPlaylist.playlist[index];
    });