jPlayer 2.2.0: display track title in separate div on page load

问题

I'm working with jPlayer directly since the mp3-jplayer plugin for WordPress broke with the WP 3.5 update, and it seems to be abandoned by the developer.

One of the nice features of the plugin is that it displays the title of the current track in a div above the control bar. Also, if there's only a single song in the playlist, there's a script to hide the playlist, so you only have the track title above the control bar. I'm trying to add this functionality to the regular (non-plugin) jPlayer.

I can display the title in a new div with this code, from the jPlayer forum:

$("#jquery_jplayer_1").bind($.jPlayer.event.play, function (event) {
    var current = myPlaylist.current,
        playlist = myPlaylist.playlist;
    $.each(playlist, function (index, obj) {
        if (index == current) {
            $('.jp_current_track_title').text(obj.title);   
        }
    });
});

However, this does not load the track title when the page loads - it only displays after you press 'play.' Note that when the player loads, the first track in the playlist is highlighted (selected).

So my question is: how can I get the track title to load when the page loads?

Test page is here.

I'm new to javascript/jQuery.

Thanks in advance.

回答1:

Jplayer also provides a ready event: $.jPlayer.event.ready. It should be possible to use this to do the same thing once the player has loaded.

回答2:

change the line:

 $("#jquery_jplayer_1").bind($.jPlayer.event.play, function (event) {

 $("#jquery_jplayer_1").bind($.jPlayer.event.ready, function (event) {

so that the div is updated once the player is ready.

来源：https://stackoverflow.com/questions/14298432/jplayer-2-2-0-display-track-title-in-separate-div-on-page-load

标签

javascript

jquery

jplayer