Redirect song name from JPlayer HTML5 audio player

问题

I'm using JPlayer as an HTML5 audio player. In part of it's jQuery, it takes the name of a song in it's playlist and displays it as a list elemnt. I'd like to take that name-displaying function and redirect it to a different place.

@Bender's answer below works when playing the songs via clicking on their thumbnails, but does not update the name if using the player's controls to skip to the previous or next song, or letting the player cycle through the playlist. It also doesn't display the name when the page is first loaded.

In JPlayer's code there's a section that adds a class (.jp-playlist-current) to the song that's cued up and active (either played or paused). I think utilizing that would be best.. But am unsure how to go about it, as the "name" section of JPlayer's control isn't specifically called out.

{
name:"Paparazzi",
mp3:"http://www.minimalpluscreative.com/newclients/fernandogaribay/audio/fernando_garibay_paparazzisnlmix.mp3",
oga:"http://www.minimalpluscreative.com/newclients/fernandogaribay/audio/fernando_garibay_paparazzisnlmix.ogg",
wav:"http://www.minimalpluscreative.com/newclients/fernandogaribay/audio/fernando_garibay_paparazzisnlmix.wav"
}

That is.. move the name to a paragraph called #name and always display the current songs name.. no matter how you get there.

Anyway, not sure exactly where or how to do this. Any advice?

Thank you!

jsFiddle: http://jsfiddle.net/danielredwood/MmvJX/7/

           playlistConfig: function(index) {
                $(this.cssSelector.playlist + "_item_" + this.current).removeClass("jp-playlist-current").parent().removeClass("jp-playlist-current");
                $(this.cssSelector.playlist + "_item_" + index).addClass("jp-playlist-current").parent().addClass("jp-playlist-current");
                this.current = index;
                //Line below this
                $('#name').text(this.playlist[this.current].name);
                $(this.cssSelector.jPlayer).jPlayer("setMedia", this.playlist[this.current]);
            },

回答1:

In your jplayer.playlist.js file add a line like the following to the _highlight function with the correct my_jquery_selector for the div you'd like the title to be printed in:

$(my_jquery_selector).html(this.playlist[index].title);

This is jacked from the current final line of that method that sets the title div (this.cssSelector.title)in the player itself. The _highlight function is called any time a song/media change is called so I think that should do it for you every time.

回答2:

I'm not sure what you mean, so here's what I interpreted. Look what I modified, as it's nothing hard to do. Do you know how to code in JavaScript/jQuery, by any chance?

http://jsfiddle.net/MmvJX/5/

回答3:

I know how.

CODE:

...

var cssSelector = {
    jPlayer: "#jquery_jplayer_1",
    cssSelectorAncestor: "#jp_container_1"
};
var playlist = [];

var options = {
    swfPath: "http://www.jplayer.org/2.1.0/js", 
    supplied: "oga, mp3", 
    volume: 0.6,
    // <<< HERE <<< Set up "on play" event of jPlayer
    play: function(event) { // Add a listener for anything we want when play began
        var cur_media = event.jPlayer.status.media;
        // ... ENTER YOUR CODE HERE
        // cur_media.author - Thats my handwrited Author, see below
        // cur_media.title - Song title
        // Another cur_media.xxxxxxxx - Other data fields that we typed (see below)
    },
    _:''
};

var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);

...

var listSitePrefix = 'http://www.example.com/';

myPlaylist.setPlaylist([
{
    author: "John Connor",
    title: "Ultimate Artist - Brand New Song",
    mp3: listSitePrefix + "music/01.mp3",
    oga: listSitePrefix + "music/01.ogg"
},

...

]);

来源：https://stackoverflow.com/questions/5739803/redirect-song-name-from-jplayer-html5-audio-player

标签

jquery

css

html5

jplayer