Jplayer播放列表添加選中複選框

Question

我想添加播放列表到jplayer使用複選框，當我點擊複選框的url必須添加到jplayer播放列表，我有網址時，我點擊複選框我得到特定的網址，但我無法添加到myplaylist請任何一個幫助我，當我添加它告訴我不確定

//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> 

Answer 1

請閱讀http://jplayer.org/latest/demo-02-jPlayerPlaylist/。

你爲什麼要在每次添加時創建一個新的播放列表？這是非常昂貴的，只會覆蓋你的另一個。

在頁面加載時創建播放列表，並勾選複選框添加到播放列表。

看起來你像一個網址到播放列表，然後將每個網址添加到播放列表，這是不正確的。

爲jPlayerPlaylist的add()方法採用一個對象，而不是一個字符串作爲它的參數：

例如

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" 
}); 

而且item是在你的函數使用。

試試這個：

$(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, 
     }); 
    } 
}); 

問我，如果你需要更多的幫助。