从JPlayer HTML5音频播放器重定向歌曲名称 [英] Redirect song name from JPlayer HTML5 audio player

问题描述

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

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的答案如果通过点击他们的缩略图播放歌曲有效，但是如果使用播放器的控件跳到上一首或下一首歌曲，或让播放器循环播放播放列表，则不会更新名称。首次加载页面时，它也不会显示名称。

@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.

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

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

这就是..将名称移到名为#name的段落中总是显示当前的歌曲名称..无论你如何到达那里。

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?

谢谢！

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

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

推荐答案

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

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);

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

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.

这篇关于从JPlayer HTML5音频播放器重定向歌曲名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！