Count total number of plays for each song in playlist

[rushme]

Hi! Just getting into the Jplayer, trying to figure out if it will
suite my needs.

I need to be able to count the total number of plays for each song, so
that I can display a total number of plays next to it like so:

SONG 1 - 345 plays
SONG 2 - 2039 plays
SONG 3 - 229 plays

is there a way to accomplish that? I tried adding a onClick even to
the song title through Javascript, but that only executes my onclick
event but stops the actual playing of the track when I click on it.

any ideas, or a place to start would be very welcome!!!

thanks!

rushme

[joe]

You can use jquery to make an ajax call to inc the number and/or
display the totals.

jplayer has its own events which you can use to fire this off. like
for example when a file starts playing, or when the file finishes if
you really wanna be critical.

http://www.happyworm.com/jquery/jplayer/latest/developer-guide.htm#jPlayer-event-type

[rushme]

Hey Joe! Great. So maybe I'll be able to bind the
"$.jPlayer.event.play" event to a custom function that will look in
the "event.jPlayer.status.src" event object for the url that is being
played. then use an AJAX call within the function to increment my
database record with another play...

sounds about right? I'm am just a beginner in JS/jQuery :)

rushme

On Dec 26, 3:34 am, joe <pen...@gmail.com> wrote:
> You can use jquery to make an ajax call to inc the number and/or
> display the totals.
>
> jplayer has its own events which you can use to fire this off. like
> for example when a file starts playing, or when the file finishes if
> you really wanna be critical.
>

> http://www.happyworm.com/jquery/jplayer/latest/developer-guide.htm#jP...

[Mark Panaghiston]

@rushme: I'd suggest using the ended event to capture when a song has been played.

In the future I expect to add in expanded features that use the HTML5 played info. Using it, you can determine exactly what has been played, however, I was planning to do something a little more relaxed, where you got a playedPercent instead. ie., so if ended and playedPercent =100 then they listened to the whole track. If playedPercent is < 20% you could ignore that in your stats or something. It is just an idea at this point.

Best regards,
Mark P.

[rushme]

Hey Mark. Ok trying to implement what you suggested above. So I got
it working good now firing off an event each time a track is played.
I can capture that event and figure out the URL of the media being
played. all good. but for some reason firing off an event when the
play stops is not working.

I was hoping to be able to fire off an event when a track stops then
read the % complete to figure out how much of the track got played (if
over 50% then count as a play).

This bit of code is not working:

$("#jquery_jplayer_1").bind($.jPlayer.event.ended, function(event) {
alert('you have played this percentage of the file:
'+event.jPlayer.status.currentPercentAbsolute);
});

This works:

$("#jquery_jplayer_1").bind($.jPlayer.event.play, function(event) {
alert('you have played this percentage of the file:
'+event.jPlayer.status.currentPercentAbsolute);
});

only difference is using play instead of ended...

any ideas?

thanks!

rushme



On Dec 29 2010, 7:56 am, Mark Panaghiston <mark.panaghis...@gmail.com>
wrote:

[Mark Panaghiston]

The ended event occurs when the media has ended. x-browser the behaviour varies for this html event. Some raise it after the media values are reset to the beginning, while others like Firefox 3.6 behaved in an annoying manner. Firefox 3.6 would raise the ended event and stop playback, but if you changed surrent time, the media would play. This was different to all other browsers, which appeared to use the correct condition of only seeking to the new currentTime.

To sum up, jPlayer does some tweaks in the ended event to normalize the effect of the html ended event and reset jPlayer's media to the beginning and pause the playback.

After that brain dump.... To your problem.

In the ended event, the event object value for:
event.jPlayer.status.currentPercentAbsolute

...Should be zero for all browsers. However, I admit that I have not been able to test the millions of permutations of events and their differences x-browser. This ended event might give different values for that property x-browser, but I was aiming at it giving zero for the property you are using, regardless of browser.

The thing to note is that... When the ended event occurs, the media has played the bit at the end. I was suggesting that you only took the ended event into your logic and when ended occurred, you assumed that the entire track played.

You could keep your code to test where play started, but when ended occurred, you'd just pass in the value of 100%, becuase you know it only happens when currentPercentAbsolute equals 100%, despite that the event object itself has already been reset to the start.

Best regards,
Mark P.

[rushme]

Hey Mark. I figured something like that, since the event did fire off
today (by mistake) when I let one track play to the end :)

so what I am looking for is not a event (ENDED), but actually an event
(STOPPED). Then I would calculate how much of the track has been
played and if > 50% then count it as a play.

For the time being I will use track play, as I believe only a very
small percentage of the people would listen to the entire track till
the end. I am afraid I would not be capturing a good majority of the
"plays"

hm... any other way off the top of your head for me to get what I am
looking for? (a way to capture when %50 of the track has been played)

thanks Mark!

p.s. If I had not said it already, you have created a very fantastic
cross/browser player!!

On Jan 2, 6:37 pm, Mark Panaghiston <mark.panaghis...@gmail.com>
wrote:

[Mark Panaghiston]

So... You wanted the pause event?

$.jPlayer.event.pause

constructor option:
pause: handler()

It works pretty well for html and flash fallback.

Generally x-browser, if the media is paused and you play it, the play event occurs. If the media was already playing, the event does not occur when you try and play it. The same goes for pause... You only get the event when the state changes.

There might be a spurious pause event around the ended event too because of the fix to reset the media and stop plaback on currentTime changes.

So erm.. I hope English is not your 1st language... The ended event occurs when the media has played to the end.

<mutters "muppet" under his breath>

The jPlayer events are listed here:
http://www.jplayer.org/latest/developer-guide/#jPlayer-events

Not all of them work in the Flash, and they vary cross browser a bit, but the W3C HTML5 Media docs on events is here:
http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#mediaevents

Best regards,
Mark P.

[rushme]

Hey Mark!!! thanks for the reply. So I think I will stay with play
event for now, since the pause does not fire off an event if the user
switches from song to song without hitting stop (or pause) first.
Eventually when you've had a chance to flesh out the %played thing we
discussed earlier it would be an amazing feature and will give a
better indication of how the user interacted with the media and for
how long.

I will be starting a new thread (if none already exist) about adding a
download/purchase button to each track. Hope there is an easy
way...

btw. English is my first language, but reading documentation is my
last resort! :)

thanks again!!!

rushme

On Jan 3, 1:51 pm, Mark Panaghiston <mark.panaghis...@gmail.com>
wrote:

> the W3C HTML5 Media docs on events is here:http://www.whatwg.org/specs/web-apps/current-work/multipage/video.htm...
>
> Best regards,
> Mark P.

[Herter]

hi

I try to do the same, count the plays and show it in the playlist. Unfortunately I'm pretty new to that stuff and can't get it to work.
Can you give me some hints how you did it with jquery ajax and so on?

thx in advance

[Marcus Vinicius GT]

Also had the same doubt
and after many hours I came to this code:

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

if (parseInt (event.jPlayer.status.currentPercentAbsolute)> = 50) {

$ ("# jquery_jplayer_1.") unbind ($. jPlayer.event.timeupdate) / / Remove all event listeners

alert ("Play Began at time =" + parseInt (event.jPlayer.status.currentPercentAbsolute));

/ *
  * Ajax code here ...
  * /

}

});

The code performs an action when the tempo of the music exceeds half (50%) of the time.

The code works fine ... if anyone has another suggestion ...

[Dennis Wallace]

In my implementation, I'm not allowed the luxury of waiting until 50% (or waiting at all actually - damn BMI/ASCAP), so I make the AJAX call to my tracking code at the same time as firing off the play event.

      var mp3 = "url_goes_here";

      var oog = "url_goes_here";

      $("#jquery_jplayer").jPlayer("setFile",mp3,oog);

      $("#jquery_jplayer").jPlayer("load");

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

      pageTracker._trackPageview("/page_track_for_google_goes_here");

      $.get("tracker_url_goes_here",{"track_id":trackid});

Probably could be cleaned up a bit, but it works for me.  This has the benefit of filling in my own tracker (for invoicing purposes) as well as in Google Analytics for a quick dashboard view.

= dw =

On Sun, Oct 14, 2012 at 10:07 AM, James Margetts <giga...@googlemail.com> wrote:

Marcus,

You seem to be the person to ask.

I too am using jplayer with a playlist which is dynamically populated via a database.

I have tried to enter examples of code in various places and had no success at all.

I haven't even got an alert working when the play reached 2% (don't want to wait that long)

Can you help. I could post the static version of the code (static playlist - no database to confuse things)

Thank in advance

--
You received this message because you are subscribed to the Google Groups "jPlayer: HTML5 Audio & Video for jQuery" group.

To view this discussion on the web visit https://groups.google.com/d/msg/jplayer/-/zqBBfjEqdlUJ.

To post to this group, send email to jpl...@googlegroups.com.
To unsubscribe from this group, send email to jplayer+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/jplayer?hl=en.

[Rafael]

Hello

i have try to add it to the script but the playlist is not loading.

can u plz show me where to add the script to in the script

my script looks like that:

$(document).ready(function(){

new jPlayerPlaylist({

jPlayer: "#jquery_jplayer_1",

cssSelectorAncestor: "#jp_container_1"

}, [

/* PLAYLIST */

], {

playlistOptions: { 

    enableRemoveControls: true, 

  },

swfPath: "js/player",

solution: "html, flash",

supplied: "webmv, ogv, m4v, oga, mp3"

});

});

plz help me.

Thank u.