1

我使用 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]);
            },
4

3 回答 3

2

在您的 jplayer.playlist.js 文件中_highlight，使用正确的 my_jquery_selector 为您希望打印标题的 div 的函数添加如下所示的行：

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

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

于 2012-09-20T23:02:57.703 回答
1

我知道该怎样。

代码：

...

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

...

]);
于 2012-11-23T18:19:41.743 回答
1

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

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

于 2011-04-21T05:17:44.600 回答