Jplayer Playlist add on check box selected

I want to add playlist to jplayer using checkbox and when i click the checkbox the url has to get added to jplayer playlist,i am having url when i click the checkbox i am getting particular url but i am unable to add to myplaylist please any one help me, when i add it show me undefined

 //This array object      
var playList = new Array();

//this check box selected event, when i click on checkbox i am having item which bring the url "http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
self.Selected= function (item) {
 var url = Voiceurl();
 playList.push(url);
 console.log(playList);
 //this function i am calling to add to playlist
JplayerWithPlaylist(playList)
}


function JplayerWithPlaylist(playList) {
console.log(playList);
var cssSelector = {
    jPlayer: "#jquery_jplayer_1", 
    cssSelectorAncestor: "#jp_container_1"
};
var options = {
    swfPath: "./js", 
    supplied: "oga"
};
var myPlaylist = new jPlayerPlaylist(cssSelector, playList, options);
for (i = 0; i < playList.length; i++) {

    myPlaylist.add(playList[i])
};
};

 <div id="jquery_jplayer_1" class="jp-jplayer"></div>
  <div id="jp_container_1" class="jp-audio">
  <div class="jp-type-playlist">
  <div class="jp-gui jp-interface">
  <div class="my-row btn-group jp-controls">
   <button href="javascript:;" class="btn btn-default glyphicon glyphicon-step-backward jp-previous" tabindex="1"></button>
    <button href="javascript:;" class="btn btn-default glyphicon glyphicon-play jp-play" tabindex="1"></button>
    <button href="javascript:;" class="btn btn-default glyphicon glyphicon-pause jp-pause" tabindex="1"></button>
    <button href="javascript:;" class="btn btn-default glyphicon glyphicon-step-forward jp-next" tabindex="1"></button>
   <button href="javascript:;" class="btn btn-default glyphicon glyphicon-stop jp-stop" tabindex="1"></button>
    <button href="javascript:;" class="btn btn-default glyphicon glyphicon-volume-off jp-mute" tabindex="1" title="mute"></button>
  <button href="javascript:;" class="btn btn-default glyphicon glyphicon-volume-down jp-unmute" tabindex="1" title="unmute"></button>
  <button href="javascript:;" class="btn btn-default glyphicon glyphicon-volume-up jp-volume-max" tabindex="1" title="max volume"></button>
   </div>
  </div>
  <div class="jp-playlist">
    <ul class="list-unstyled">
  <li></li>
  </ul>
 </div>
 </div>

Solution

Please read http://jplayer.org/latest/demo-02-jPlayerPlaylist/.

Why are you creating a new Playlist on each add? This is very expensive and will just overwrite your other one.

Create the playlist on page load and add to the playlist on checkbox ticked.

It seems like you push a url onto playlist and then add each url to the playlist which is incorrect.

The add() method for jPlayerPlaylist takes an object and not a string as it's parameter:

E.g.

myPlaylist.add({
  title:"Your Face",
  artist:"The Stark Palace",
  mp3:"http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3",
  oga:"http://www.jplayer.org/audio/ogg/TSP-05-Your_face.ogg",
  poster: "http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png"
});

Also item is unused in your function.

Try this:

$(function() {
    var jPlayerPlaylistConfig = {
        cssSelector: {
            jPlayer: "#jquery_jplayer_1", 
            cssSelectorAncestor: "#jp_container_1"
        },
        options: {
            swfPath: "./js", 
            supplied: "oga"
        },
        playlist: []
    };

    var myPlaylist = new jPlayerPlaylist(jPlayerPlaylistConfig.cssSelector, jPlayerPlaylistConfig.playList, jPlayerPlaylistConfig.options);

    //this check box selected event, when i click on checkbox i am having item which bring the url "http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
    self.Selected = function () {
         var url = Voiceurl();
         console.log(url); //Make sure URL actually exists

         myPlaylist.add({
            mp3: url,
         });
    }
});

Ask me if you need more help.