Dynamically populate playlist with JSON from PHP in jPlayer

问题

I have a PHP that create a JSON array of mp3 files in a directory. The JSON array output from PHP is :

[{"title":"Kalimba","mp3":"/path/to/mydirectory/Kalimba.mp3"},{"title":"Maid with  the Flaxen Hair","mp3":"/path/to/mydirectory/Maid with the Flaxen Hair.mp3"},{"title":"Sleep Away","mp3":"/path/to/mydirectory/Sleep Away.mp3"}]

Fine, it seems to be what is expected by JQuery.jPlayer.

Now in a basic jplayer.js file I have :

$(document).ready(function(){

new jPlayerPlaylist({
    jPlayer: "#jquery_jplayer_1",
    cssSelectorAncestor: "#jp_container_1"
}, [
    //I guess my JSON array should come here
    // but no idea on how I put it in...
], {
    swfPath: "../js",
    supplied: "mp3",
    wmode: "window"
});
});

My problem is I can't put my JSON array in the place it should be (see comments in js code)

Any help would be very appreciate ! Forgive my english it's not my native tongue Thanks in advance

EDIT & SOLVED

Hi all, For those who are interested I find a solution : My JS file is :

$(document).ready(function(){
    var cssSelector = {
        jPlayer: "#jquery_jplayer_1", 
        cssSelectorAncestor: "#jp_container_1"
    };
    var playlist = []; // Empty playlist
    var options = {
        swfPath: "./js", 
        supplied: "mp3"
    };
    var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);
    $.getJSON("../PHP/radio.php",function(data){  // get the JSON array produced by my PHP
        $.each(data,function(index,value){
            myPlaylist.add(value); // add each element in data in myPlaylist
        })
    }); 
});

回答1:

Why dont you just put in javascript:

var playlist = [{"title":"Kalimba","mp3":"/path/to/mydirectory/Kalimba.mp3"},{"title":"Maid with  the Flaxen Hair","mp3":"/path/to/mydirectory/Maid with the Flaxen Hair.mp3"},{"title":"Sleep Away","mp3":"/path/to/mydirectory/Sleep Away.mp3"}];

$(document).ready(function(){

  new jPlayerPlaylist({
    jPlayer: "#jquery_jplayer_1",
    cssSelectorAncestor: "#jp_container_1"
  },
  playlist,
  {
    swfPath: "../js",
    supplied: "mp3",
    wmode: "window"
  });
});

You can even use PHP to generate your playlist var.

回答2:

change your

 myPlaylist.add(value);

myPlaylist.add({title:$(this).attr("title"),mp3:$(this).attr("mp3")});

before that check that you have passed the values correctly using alert(), or console.log()

来源：https://stackoverflow.com/questions/8393273/dynamically-populate-playlist-with-json-from-php-in-jplayer

标签

jquery

jplayer