jPlayer 2.6.0 - Repeat current song playing? Display current song playing?

[SeiRruf MalaWolSki]

Hello,

I am a new user to jPlayer, and am starting with v2.6.0.

I had two questions that are probably relatively simple, however no matter how hard I've tried to find the answers, I've failed terribly.

= = = = = = =

#1: How do you get the current song playing to repeat when the repeat/loop button is activated?

- - - - - - - - - -

This thread was able to get me some where, but now when the song ends and repeat is on, it freezes and does not replay the song.

https://groups.google.com/forum/#!topic/jplayer/iL2KkGboMMo

in jplayer.playlist.min.js,

replacing this: b(this.cssSelector.jPlayer).bind(b.jPlayer.event.ended,function(){e.next()});

with this: b(this.cssSelector.jPlayer).bind(b.jPlayer.event.ended,function(){e.loop==1?e.play():e.next()});

did not work. It only causes the player to go back to 00:00, and freeze after the song ends (play button is stuck on pause, and has no effect)

= = = = = = =

= = = = = = =

#2: How do you display what song it is currently playing? In my case, I have a massive playlist, so the user would have to scroll down to see the song currently playing. It would be nice to have it displayed beside the player or something.

- - - - - - - - - -

It would also be nice to know if it is possible to have a player appear in place of the song clicked on the playlist, instead of having a fixed player at the top of the list. Ultimately, fix the player at the top of the page/list so even while scrolling through the list, the player remains visible for long playlists.

= = = = = = =

Thank you!~

[Jonathan2]

On Saturday, 19 April 2014 22:24:36 UTC+1, SeiRruf MalaWolSki wrote:

= = = = = = =

#2: How do you display what song it is currently playing? In my case, I have a massive playlist, so the user would have to scroll down to see the song currently playing. It would be nice to have it displayed beside the player or something.

- - - - - - - - - -

It would also be nice to know if it is possible to have a player appear in place of the song clicked on the playlist, instead of having a fixed player at the top of the list. Ultimately, fix the player at the top of the page/list so even while scrolling through the list, the player remains visible for long playlists.

= = = = = = =

Same problem here! This works for me:

In your html, add

<div class = "nowPlaying"></div> 

In your playlist constructor, find "play" and make it look like this:

 play: function (event) {

            $('.nowPlaying').html($('li.jp-playlist-current').text());

        },

You might want to tweak it, but it works for me!

[SeiRruf MalaWolSki]

Excellent, that worked for me as well Jonathan2. :) I was considering a method this way, but was curious if the player had a built-in feature that did the same thing. You'd think a media player would be programmed out of the box to display what it is playing, and have three repeat functions. 

1. Repeat playlist.

2. Repeat song.

3. No repeat.

But I guess that's not the case. lol

So now I just need to figure out the fix to repeat the current song playing. I'd also like to find a better way to manage the player for larger playlists.

The idea:

Make each item on the playlist have it's own player, *however*, they will display as links, and when clicked, the player will pop up in place of the link, and any other players would stop. There was an existing library that did this. I think it was called 'SoundManager'.

I have it set up here: http://server.SeiRruf.com:528/music/

Think this could be replicated for the next version of jPlayer? Notice what happens when you click on a song. Currently, I have my jPlayer set up so the player stays staticly at the top of the page, with a few CSS tweaks. This is nice and works (should be a default feature as well, if enabled), however I miss a player popping up right where the current song was playing.

[Jonathan2]

On Thursday, 24 April 2014 01:48:05 UTC+1, SeiRruf MalaWolSki wrote:

Excellent, that worked for me as well Jonathan2. :) I was considering a method this way, but was curious if the player had a built-in feature that did the same thing. You'd think a media player would be programmed out of the box to display what it is playing, and have three repeat functions. 

1. Repeat playlist.

2. Repeat song.

3. No repeat.

But I guess that's not the case. lol

I'm not from jPlayer, just a user, but to be fair to it, everything is possible and everything is there, you just need to bring it out!

There are several other ways I could have achieved what I did. Here are some snippets I've picked up from the group which Mark and others have posted:

Info

$("#jquery_jplayer_1").data("jPlayer").status.media.artist

$("#jquery_jplayer_1").data("jPlayer").status.media.title

You could add more info

 name:"Tempered Song",

 desc: "The description of the song",

$("#jquery_jplayer_1").data("jPlayer").status.media.desc

Then you would need a div somewhere in your HTML to output the information:

<div id="song_description"></div>

You'd end up with something like:

$("#song_description").html($("#jquery_jplayer_1").data("jPlayer").status.media.desc));

If you had a playlist, you could add extra info too:

{

 name:"Tempered Song",

 desc: "The description of the song",

 mp3:"http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3",

 oga:"http://www.jplayer.org/audio/ogg/Miaow-01-Tempered-song.ogg"

}, 

Then you would need a div somewhere in your HTML to output the information:

You can add a bit of JavaScript to the Playlist object definition that uses jQuery to output the description.

In:

playlistConfig: function(index) {

After line:

this.current = index;

Add:

$("#song_description").html(this.playlist[this.current].desc);

Events - repeat, loop etc.

You can also make things happen on an event at a certain time:

$('#jp').jPlayer({

   timeupdate: function(event) { // 4Hz

      // Restrict playback to first 60 seconds.

      if (event.jPlayer.status.currentTime > 60) {

         $(this).jPlayer('stop');

      }

   }

   // Then other options, such as: ready, swfPath, supplied and so on.

});

So you could detect when one track has finished playing, and then issue

$("#jquery_jplayer_1").jPlayer("play");

To start it over again.

Have another look at http://jplayer.org/latest/developer-guide/

 

:)

[SeiRruf MalaWolSki]

Excellent :) Thank you!

Though your first fix to play for what is playing works great. I may just stick with that one so that it may not break in future updates (unless of course the CSS structure changes). :)

Anyhows, I also found a way to alter the main playlist.js code to repeat when the repeat button is ticked. I ended up adding some code of my own after studying a bit more how it ticked, then it became relatively easy. :D

Now my next main question. Why doesn't seeking through a song work in the latest version of google chrome? The whole player doesn't work in Safari either. :( I also still wish there were an option to spawn a player in place of a song clicked on in the playlist. lol But a static one at top is great too, as long as the seek bar actually works. D: My volume bar works, just not the seek bar. Pretty odd.

[mergatroid]

Hi - thanks so much for this post. I'm wondering how the code needs to change in order to implement this on a page with multi-instanced playlists. I have a page with two playlists and song titles are displaying from both playlists (because each playlist has a current song selected). Any insight that you have would be greatly appreciated.