have this in application.js ... they work, but only for the first song.
first one is on song play, and the second is at 5% (which will eventually be 75%, to count as a song play).
$(document).ready(function(){
$("#jquery_jplayer_1").bind($.jPlayer.event.play, function(event) {
$("#jquery_jplayer_1").unbind($.jPlayer.event.play)
var band = event.jPlayer.status.media.band;
var song = event.jPlayer.status.media.song;
$.get("/playlists/song_display?song=" + song + "&band=" + band);
});
$("#jquery_jplayer_1").bind($.jPlayer.event.timeupdate, function(event) {
if (parseInt(event.jPlayer.status.currentPercentAbsolute) >= 5 ) {
$("#jquery_jplayer_1").unbind($.jPlayer.event.timeupdate)
var band = event.jPlayer.status.media.band;
var song = event.jPlayer.status.media.song;
$.get("/playlists/song_counter?song=" + song + "&band=" + band);
}
});
});
EDIT:
thanks to Ivan, ended up with this code:
$(document).ready(function(){
$("#jquery_jplayer_1").bind($.jPlayer.event.play, function(event) {
debugger
var band = event.jPlayer.status.media.band;
var song = event.jPlayer.status.media.song;
$.get("/playlists/song_display?song=" + song + "&band=" + band);
$("#jquery_jplayer_1").bind($.jPlayer.event.timeupdate, function(event) {
if (parseInt(event.jPlayer.status.currentPercentAbsolute) >= 5 ) {
debugger
$("#jquery_jplayer_1").unbind($.jPlayer.event.timeupdate)
var band = event.jPlayer.status.media.band;
var song = event.jPlayer.status.media.song;
$.get("/playlists/song_counter?song=" + song + "&band=" + band);
}
});
});
});
Looks like you are selecting your elements using element ids
$("#jquery_jplayer_1").bind(...)
This will only apply to the first element matching the id jquery_jplayer_1
.
If you want to bind events to multiple elements, you could use a class selector instead.
$(".jquery_jplayer").bind(...)