how can i play the linked-to audio file in jPlayer, on click?

问题

I've tried to resolve this by looking at the user guide for jPlayer and via answers to a similar question on Stackoverflow, but unfortunately my ability with javascript is such that I can't implement the suggested answer.

I've successfully placed jplayer on my site, styled it and implemented a playlist no sweat. Here's the javascript (snippet - removed extraneous extra songs):

$(document).ready(function(){

        new jPlayerPlaylist({
            jPlayer: "#jquery_jplayer_1",
            cssSelectorAncestor: "#jp_container_1"
        }, [
            {
                title:"Opening (The Crows)",
                mp3:"../../audio/mp3/01-Opening_The Crows.mp3",
                oga:"../../audio/ogg/01-Opening_The Crows.ogg"
            }       
        ], {
            swfPath: "js",
            supplied: "oga, mp3",
            wmode: "window"
        });

    });

As well as the automatically-generated playlist, I also want the same audio files to be playable via separate text links elsewhere on the page. Here's the HTML (again, snipped just to refer to one song):

<a class="track" href="../../audio/mp3/01-Opening_The Crows.mp3">Opening (The Crows)</a>

I understand that I have to call the jplayer play function using a click on '.track' as the event, as in the example linked already, but I'm unable to include this code in the jplayer script I've already setup without breaking the player.

Any suggestions much appreciated (those which explain the reasoning behind the solution are preferred, so I can learn from the problem).

回答1:

i think the neatest way would be to include URLs to both MP3 and OGG files in your markup, like:

<a class="track" 
   href="javascript:;" 
   data-mp3="../../audio/mp3/01-Opening_The Crows.mp3" 
   data-ogg="../../audio/ogg/01-Opening_The Crows.ogg">
   Opening (The Crows)</a>

then your javascript could pass both formats, for maximum browser compatibility:

$("a.track").live("click", function(e) {
    e.preventDefault();

    $("#jquery_jplayer_1").jPlayer("setMedia", 
        { 
            mp3: $(this).attr("data-mp3"), 
            oga: $(this).attr("data-ogg") 
        })
        .jPlayer("play");
});

回答2:

        mp3: $(this).attr("data-mp3"), 
        oga: $(this).attr("data-ogg")

would be a little nicer as

        mp3: $(this).data("mp3"), 
        oga: $(this).data("ogg")

来源：https://stackoverflow.com/questions/9167305/how-can-i-play-the-linked-to-audio-file-in-jplayer-on-click

标签

jquery

audio

mp3

jplayer

playlist