jplayer multiple mp3 file links in one page - jplayer

Question

I use jplayer in my page and when clicked a link I want to play the clicked one. However every time test1.mp3 is played. How can I solve it? The code is below:
the page is as follows if needed:
http://www.dilyurdu.com/audio.htm
function listen(mp3_index){
var mp3_file;
mp3_file="test"+mp3_index+".mp3";
$("#jquery_jplayer_1").jPlayer({
ready: function(event) {
$(this).jPlayer("setMedia", {
mp3: mp3_file,
});
},
swfPath: "http://www.jplayer.org/2.1.0/js",
supplied: "mp3"
});
}
links are as follows:
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<a href="javascript:listen(1);" class="jp-play" >play 1</a><br /><br />
<a href="javascript:listen(2);" class="jp-play" >play 2</a><br /><br />
<a href="javascript:listen(3);" class="jp-play" >play 3</a>

Answer 1

Hey you can do the following.
I instantiate the player on page load:
jQuery("#jquery_jplayer_1").jPlayer({
swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf",
supplied: "mp3",
wmode: "window",
preload:"auto",
autoPlay: true,
errorAlerts:false,
warningAlerts:false
});
Then inside a listener, which will be unique for every item,
you need to:
A) Fetch track name/URL, I guess you should be able to figure this out.
B) Pass the track to the setMedia
jQuery("#jquery_jplayer_1").jPlayer("setMedia", {
mp3: "http:xxxx.rackcdn.com/"+track+".MP3"
});
C) Play the track
jQuery("#jquery_jplayer_1").jPlayer("play");
To get the track Id you need to install listeners on your playable items(maybe a a playable class?) and get the track from that one.

Answer 2

i am also looking for a solution for this.
Just created it in jsfiddle visit http://jsfiddle.net/vijayweb/A5LQF/2/
It plays only one song. any help will be grateful.
I found a relevant solution...still play only the first default song.
multiple mp3 links in a single page with jplayer

Answer 3

HTML:
<a class="ChangePath" data-key="1" href="javascript:void(0);">Song1</a>
<a class="ChangePath" data-key="2" href="javascript:void(0);">Song1</a>
<a class="ChangePath" data-key="3" href="javascript:void(0);">Song1</a>
jQuery:
$(function () {
$('.ChangePath').on('click', function () {
$("#jquery_jplayer_1").jPlayer("destroy");
var link = "test" + $(this).data('key') + ".mp3";
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: link
});
},
swfPath: "~/Scripts/jplayer",
supplied: "mp3"
});
player.jPlayer("play", 0);
});
});
If you are using ajax:
$(function () {
$('.ChangePath').on('click', function () {
$.ajax({
$("#jquery_jplayer_1").jPlayer("destroy");
var link = "test" + $(this).data('key') + ".mp3";
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: link
});
},
swfPath: "~/Scripts/jplayer",
supplied: "mp3"
});
player.jPlayer("play", 0);
});
});
});
Depending on your project you might need to change the hyperlinks to something else, but the jQuery will work.

Answer 4

$('.reproducirContenedor').on('click',function(e){// click en el elento a reproducir
e.preventDefault();//para que cuando el usuario haga click en el icono de play no salte la pagina
jQuery("#jquery_jplayer_1").jPlayer({
swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf",
supplied: "mp3",
wmode: "window",
preload:"auto",
autoPlay: true,
errorAlerts:false,
warningAlerts:false
});
var url_destino=$(this).attr('data-demo');// obtengo la ubicacion del archivo de audio para reproducirlo
jQuery("#jquery_jplayer_1").jPlayer("setMedia", {
mp3:url_destino
});
jQuery("#jquery_jplayer_1").jPlayer("play");
});