Question

我正在使用JPlayer作为HTML5音频播放器。在它的jQuery的一部分中，它在其播放列表中取一首歌的名称并将其显示为列表元素。我想把这个名字显示功能重定向到另一个地方。

@ Bender的答案在通过点击缩略图播放歌曲时起作用，但如果使用播放器的控件跳过上一首或下一首歌曲，或者让播放器循环播放播放列表，则不会更新名称。首次加载页面时，它也不会显示名称。

在JPlayer的代码中，有一节将一个类（.jp-playlist-current）添加到提示并激活（播放或暂停）的歌曲中。我认为利用那将是最好的..但我不确定如何去做，因为JPlayer的控制的“名称”部分没有特别提到。

{
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"
}

那就是..将名称移动到一个名为#name的段落，并始终显示当前的歌曲名称..无论你如何到达那里。

无论如何，不确定究竟在哪里或如何做到这一点。有什么建议吗？

谢谢！

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]);
            },

Answer 1

在你的jplayer.playlist.js文件中，为_highlight函数添加一行代码，并为你想要打印标题的div添加正确的my_jquery_selector：

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

这是从该方法的当前最后一行中获得的，该方法在播放器本身中设置标题div（this.cssSelector.title）。每次调用歌曲/媒体更改时都会调用_highlight函数，因此我认为每次都应该为您执行此操作。

Answer 2

我不确定你的意思，所以这就是我的解释。看看我修改了什么，因为这没什么难的。你知道怎么用JavaScript / jQuery编写代码吗？

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

Answer 3

我知道如何。

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"
},

...

]);

从JPlayer HTML5音频播放器重定向歌曲名称

3 个答案: