multiple mp3 links in a single page with jplayer

问题

In my page there are a number of mp3 links and I use jplayer. How can I update jplayer function to play when clicked the seperate links?

$(document).ready(function() {

 $("#jquery_jplayer_1").jPlayer({

    ready: function(event) {
        $(this).jPlayer("setMedia", {
            mp3: "test_1.mp3",   //my mp3 file

        });
    },
    swfPath: "http://www.jplayer.org/2.1.0/js",
    supplied: "mp3"
  });
});

my mp3 links :

<a href="javascript:listen(1);" class="jp-play" ></a>
<a href="javascript:listen(2);" class=" jp-play" ></a>
<a href="javascript:listen(3);" class=" jp-play" ></a>
<a href="javascript:listen(4);" class=" jp-play" ></a>
<a href="javascript:listen(5);" class=" jp-play" ></a>

回答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.

回答2:

html:

<a href="test_1.mp3" class="jp-play"></a>
<a href="test_2.mp3" class="jp-play"></a>

js:

$(document).ready(function() {
   readMP3("test_1.mp3");// play one mp3 if document is loaded

    $(".jp-play").click(function(event){
        event.preventDefault();
        readMP3($(this).attr("href"));
    })

});

function readMP3(_src){
 $("#jquery_jplayer_1").jPlayer({
    ready: function(event) {
        $(this).jPlayer("setMedia", {
            mp3: _src,
        });
    },
    swfPath: "http://www.jplayer.org/2.1.0/js",
    supplied: "mp3"
  });
}

来源：https://stackoverflow.com/questions/10471327/multiple-mp3-links-in-a-single-page-with-jplayer

标签

jquery

jplayer