Search code examples
jqueryajaxjplayer

adding a next button onto jplayer


I'm trying to add a next button on jplayer. I already try using the click function but it didn't work.

The way the player is setup it's by using ajax to get it's songs and information about the songs. When the song ends it will get another song by using ajax also. The thing what trying to do is adding a next button but i don't know how to. Any ideas?

$(document).ready(function () {
    $("#jquery_jplayer_1").jPlayer({
        ready: function () {
            var data = $.ajax({
                url: "getsong.php",
                async: false
            }).responseText;
            var string = data.split('|');
            $(this).jPlayer("setMedia", {
                mp3: string[0]
            }).jPlayer("play");
            $('#artist').html(string[1]);
            $('#songname').html(string[2]);
            $('#album').html("<img src='" + string[3] + "' width='250' height='250' />");
        },
        ended: function (event) {
            var data = $.ajax({
                url: "getsong.php",
                async: false
            }).responseText;
            var string = data.split('|');
            $(this).jPlayer("setMedia", {
                mp3: string[0]
            }).jPlayer("play");
            $('#artist').html(string[1]);
            $('#songname').html(string[2]);
            $('#album').html("<img src='" + string[3] + "' width='250' height='250' />");
        },
        swfPath: "js",
        supplied: "mp3"
    });
});

Solution

  • As you said when one song ends your code will fetch next song. So in rough way you can create a button on your own and define a click event on it and when you click, it should trigger the ended event of jplayer.

    For example:

    <input type='button' id='next-song' />
    

    script:

    $('#next-song').click(function(){
      $("#jquery_jplayer_1").trigger($.jPlayer.event.ended);
    })
    

    You can also see documentation where you have to use Playlist add-on. It will have a list of songs in playlist and you can perform next(), previous() and other opertion on playlist.