Display Current Song in a Div

[Tom]

Hello,

I'm a javascript user, not a "write code from scratch" person. I'm using jPlayer as an audio only player with a playlist. I would like the current song to display in a div, you can see what I've got so far here:

http://www.ferguson-photo-design.com/temp/burk/

Pretty standard: modified css on the jplayer.blue.monday.css and added a show/hide javascript for the playlist (line 173 of the index page)

I've done a fair bit of searching on this group, and frankly came away confused. I think a lot of the replies are for V1. I "assume" what I need to do is somehow use _highlight function and get .jp-playlist-current or function(a) into my div (I want the title in <div id="divSongInfo" class="currentSong"> line 155 of the index page). Currently I'm using jquery.jplayer.min.js and jplayer.playlist.min.js, but could easily change to the larger jplayer.playlist.js if it helps.

Thanks,

Tom

[Crazy Zurfer]

I've got the same question here, lol.

[Tom]

Arrrgggg..... I just discovered that my test page (above) isn't working in Internet Exploer. It is fine in Firefox (Mac or PC), Chrome (Mac or PC), Opera (Mac or PC) and Safari (Mac or PC) .... but not Internet Exploer. Probably my show/hide mod, as the playlist is absent in internet explorer. I'll find some time latter today to look into this, any thoughts are most welcome.

Tom

[Crazy Zurfer]

If you find out, please tell me! :P

[Dustin Blake]

Alright, so lets look at this.  You want to access the title and maybe the artist items you set in the playlist as they change.

To access those items directly from the Playlist, you have to look into the Playlist object created when the player is instanced.  (i.e. myPlaylist = new jPlayerPlaylist)

$('jplayer-id').bind($.jPlayer.event.play, function(event) { // binding to the play event so this runs every time media is played

          var current = myPlaylist.current; //This is an integer which represents the index of the array object currently being played.

          var playlist = myPlaylist.playlist //This is an array, which holds each of the set of the items youve defined (e.q. title, mp3, artist etc...)

          $.each(playlist, function(index, object) { //$.each is a jQuery iteration method which lets us iterate over an array(playlist), so we actually look at playlist[index] = object

                  if(index == current) {   

                           alert(object.artist);

                           alert(object.title);

                  }

            });

});

[Tom]

Dustin, thanks so much for the help. I've fixed the Internet Explorer issue (a poorly written path to the jplayer.playlist.min.js file) and have tried to implement your coding.

You can see it here

http://www.ferguson-photo-design.com/temp/burk/

You code is (I hope) intended to go in the div that should display the title, you can see it at line 154. I'm not use I've done line #155 correctly (should I be customizing that for my page?) and I have customized line #155 with (I hope) my jplayer ID. No luck getting it to work :-(

If I'm reading your code correctly, wouldn't this trow up an alert box? I'm not looking for an alert box floating above the page, I'm trying to get the song title where "Song title should go here" is shown in blue text.

Once again, thanks for the help!

Tom

[Dustin Blake]

Yes, $('jplayer-id') in my code needs to be the selector you used for your jplayer instance.

The reason I put alert boxes there is only as an example, for your code you could do something like $('.currentSong p').text(object.title); instead.

Remove the code I provided from where you put it on the page.

I've attached an HTML file that includes what you need.

   

[Tom]

Thank you, thank you! That worked great, just what I needed. I'll leave the updated example at the same spot: 

http://www.ferguson-photo-design.com/temp/burk/

in case others want to see the whole test.

Tom

[Crazy Zurfer]

Thanks!! you did it LIKE A BOSS!!!

>  changesong.html
> 2 KVerDescargar

[Bobk]

John:

You assign the div the class referenced in the jQuery code:

In Dustin's changesong.html, near the end you'll see this:

     $('.currentSong p').text(object.title);

I'm new to this, and I don't know what the 'p' means, but I replaced '.currentSong p' with '.current_track_title', then in the html created a div with that class:

<div class=".current_track_title"></div>

and styled it in CSS.

Where you place the div is up to you. I'm using a heavily-modified version of Blue Monday, and placed the new div inside this one:

<div class="jp-gui jp-interface">

And it worked.

Hope this helps.

Bob 

 

 

On Friday, December 21, 2012 6:42:57 PM UTC-8, John Harby wrote:

i understand the extra code binded to the player. How do i call out the class in a div to show the current song?

[John Harby]

I dont know what im doing wrong but its still not working. Can you post a file with an example code that works. including what dustin gave as an example.

thank you

John

[Marc Dingena]

If your jplayer instance DIV is called id="jquery_jplayer_1", and your elements holding the music info are as follows:

<div class="jp-track-info">

<span class="jp-track-title"></span> <small><span class="jp-track-artist"></span></small>

</div>

You can insert the music's info into these elements with the following code:

$("#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-track-title').text(obj.title);

$('.jp-track-artist').text('by ' +  obj.artist);

}

});

});

Of course, you need to save this info in your playlist in order to be able to retrieve it later. You can set the info statically per page, but in this day and age most sites are driven by dynamic content management systems, so you probably want to load the info dynamically as well.

In my site setup (www.tjoonz.com) you can browse mixtapes. The buttons to play a mixtape look the same on every page, but the code behind it inserts that mixtape's title, artist, url and genre into the jPlayer playlist. I use the following code:

$("body").on("click", ".jplayer-playnow", function (e) {

e.preventDefault();

myPlaylist.add({

title: $(".single-title-mixtape").text(),

artist: $(".single-title-artist").text(),

genre: $(".jplayer-playnow span").attr("class"),

mp3: $(this).attr("href"),

poster: $(".wp-post-image").attr("src")

}, true); // true value here makes the newly added track play immediately

} );

As you can see in the example above, the "title: <title>" is dynamically taken from the page the user is currently on. You can change this to something hard-coded if you want that instead.