accessing jplayer instance throughout page to load data based on user clicks
I'd like to be able to use a $("#audio_2ndplaylis开发者_Go百科t").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,
There are several things I think :
- 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.
- 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 :-)
精彩评论