accessing jplayer instance throughout page to load data based on user clicks

Question

I'd like to be able to use a $("#audio_2ndplaylist").click(function(){ to allow users to exchange the src="" data that jPlayer is using (i.e., the JSON formatted data containing the source URLs). I think my main issue is that i'm not sure how to reference this jPlayer object outside of where I initialized it. The jPlayer site documentation says to use $("#jplayer_id").data("jPlayer") but this has not worked for me so far.

Here's my code for the initializing the jPlayer:

var data= [ {title:"Cro Magnon Man",
    artist:"The Stark Palace",
    mp3:'http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3'            
                },
    {title:"Your Face",
    artist:"The Stark Palace",
    mp3:"http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3",
                }];

    new jPlayerPlaylist({
    jPlayer: "#jplayer_id",
}, data,
 {
    supplied: "webmv, ogv, m4v, oga, mp3, mov, mp4" 
}); // end of jPlayerPlaylist instance

And here's my code for the click.(function(){ //which immediately follows the above code in my script:

$('audio_2ndplaylist').click(function() {

var data2=[ {title:"Hidden",
    artist:"Miaow",
    mp3:"http://www.jplayer.org/audio/mp3/Miaow-02-Hidden.mp3",
    },
            {title:"Tempered Song",
    artist:"Miaow",
    mp3:"http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3",
    }]; 

var jplay=$("#jplayer_id").data("jPlayer");
jplay.load(data2); 

}); // end of click function

Any help one might have for switching the JSON object this jPlayer is using from "data" with "data2" would be greatly appreciated,

Answer 1

There are several things I think :

1. You don't name your jPlayerPlaylist (like var jplay = new jPlayerPlaylist(); for instance). Like this your may access your jPlayerPlaylist instance as in your second script.
2. The right function to add some tracks is add() or setPlaylist()

Csq : jplay is the only public var, you don't have to instance it in your 2nd script.

Your two scripts are now :

var data= [ {title:"Cro Magnon Man",
    artist:"The Stark Palace",
    mp3:'http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3'            
                },
    {title:"Your Face",
    artist:"The Stark Palace",
    mp3:"http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3",
                }];

var jplay = new jPlayerPlaylist({
    jPlayer: "#jplayer_id",
    }, data,
    {
        supplied: "webmv, ogv, m4v, oga, mp3, mov, mp4" 
}); // end of jPlayerPlaylist instance

And the second one :

$('audio_2ndplaylist').click(function() {

var data2=[ {
    title:"Hidden",
    artist:"Miaow",
    mp3:"http://www.jplayer.org/audio/mp3/Miaow-02-Hidden.mp3",
    },
    {
    title:"Tempered Song",
    artist:"Miaow",
    mp3:"http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3",
}]; 

jplay.add(data2); 

}); // end of click function

Hoping this will help :-)