jplayer multiple mp3 file links in one page

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 p

Answer 1

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 2

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 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 reproduccopm
    e.preventDefault();


    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 el url y reproduzo la cancoon

    console.log("ffffd");


    jQuery("#jquery_jplayer_1").jPlayer("setMedia", {
        mp3:url_destino
      });

      jQuery("#jquery_jplayer_1").jPlayer("play");
    
        
});