Is it possible to check if jPlayer is playing right now? I have several players per page and I need to change some classes, depending on which jPlayer is currently playing. The most obvious check for me is to see if the player I'm checking is currently in playing state. I found something about the playing event in the documentation, but don't get how to use it.
For now I have the following, and this works in my situation, but a better solution would be to check which player is playing when the button (which fired the play function) was clicked:
// Shows in what player the song is currently playing.
var currentSongId;
function play(songId) {
$(".playing").removeClass("playing");
$(".stop").removeClass("stop").addClass("play");
// If some song is playing-stop it and resets current song so that on next play-it starts playing again
if (songId == currentSongId) {
currentSongId = null;
return;
}
// some other logic where I set currentSongId1 or 2, depending on what player's play is fired.
}
Answer
Example binding for play event:
$(id).bind($.jPlayer.event.play, function(event) {
if (event.status.currentTime>0 && event.status.paused===false) {
// Its playing right now
}
});
also check for : http://www.jplayer.org/latest/developer-guide/#jPlayer-event-type
MP3 list with jPlayer:
var srcvalue = "";
var songName = "";
function play(songId) {
srcvalue = $(songId).attr('src');
songName = $(songId).attr('title');
// Show the new song's title
$(".jp-title ul li").text(songName);
// Then add the new song
$("#jquery_jplayer_1").jPlayer("setMedia", {
oga: srcvalue
}
// Play from the begining
).jPlayer("playHead", 0).jPlayer("play");
}
$(document).ready(function() {
// Get first song
srcvalue = $(".song:first-child").attr('src');
songName = $(".song:first-child").attr('title');
// Then show the first song's title
$(".jp-title ul li").text(songName);
// Bind click event to playlist
$(".song").each(function() {
$(this).click(function() {
play($(this));
});
});
// Starting value
$("#jquery_jplayer_1").jPlayer({
ready: function(event) {
$(this).jPlayer("setMedia", {
oga: srcvalue
});
},
supplied: "oga"
});
});
fiddle: http://jsfiddle.net/BerkerYuceer/JX2B3/
Multiple jPlayer instance:
html:
<div class="player" src="http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg" title="Cro Magnon Man"></div>
<div class="player" src="http://www.jplayer.org/audio/ogg/Miaow-01-Tempered-song.ogg" title="Tempered Song"></div>
<div class="player" src="http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg" title="Bubble"></div>
<div class="player" src="http://www.jplayer.org/audio/ogg/Miaow-06-Beside-me.ogg" title="Beside Me"></div>
<div class="player" src="http://www.jplayer.org/audio/ogg/Miaow-10-Thin-ice.ogg" title="Thin Ice"></div>
jQuery:
$(document).ready(function() {
var i = 0;
var srcvalue = "";
var songName = "";
// For each player
$(".player").each(function(){
srcvalue = $(this).attr('src');
songName = $(this).attr('title');
// Add html elements
$(this).after(
'<div id="jp_container_' + i + '" class="jp-audio">' +
'<div class="jp-type-single">' +
'<div class="jp-gui jp-interface">' +
'<ul class="jp-controls">' +
'<li> <a class="jp-play" tabindex="1" href="javascript:;">play</a> </li>' +
'<li> <a class="jp-pause" tabindex="1" href="javascript:;" style="display: none;">pause</a> </li>' +
'<li> <a class="jp-stop" tabindex="1" href="javascript:;">stop</a> </li>' +
'<li> <a class="jp-mute" title="mute" tabindex="1" href="javascript:;">mute</a> </li>' +
'<li> <a class="jp-unmute" title="unmute" tabindex="1" href="javascript:;" style="display: none;">unmute</a> </li>' +
'<li> <a class="jp-volume-max" title="max volume" tabindex="1" href="javascript:;">max volume</a> </li>' +
'</ul>' +
'<div class="jp-progress">' +
'<div class="jp-seek-bar" style="width: 100%;">' +
'<div class="jp-play-bar" style="width: 0%;"> </div>' +
'</div>' +
'</div>' +
'<div class="jp-volume-bar">' +
'<div class="jp-volume-bar-value" style="width: 80%;"></div>' +
'</div>' +
'<div class="jp-time-holder">' +
'<div class="jp-current-time">00:00</div>' +
'<div class="jp-duration">00:00</div>' +
'<ul class="jp-toggles">' +
'<li> <a class="jp-repeat" title="repeat" tabindex="1" href="javascript:;">repeat</a> </li>' +
'<li> <a class="jp-repeat-off" title="repeat off" tabindex="1" href="javascript:;" style="display: none;">repeat off</a> </li>' +
'</ul>' +
'</div>' +
'</div>' +
'<div class="jp-title">' +
'<ul>' +
'<li>' + songName + '</li>' +
'</ul>' +
'</div>' +
'<div class="jp-no-solution" style="display: none;">' +
'<span>Update Required</span> To play the media you will need to either update your browser to a recent version or update your <a target="_blank" href="http://get.adobe.com/flashplayer/">Flash plugin</a>.' +
'</div>' +
'</div>' +
'</div>');
$(this).jPlayer({ // Create player
// The $.jPlayer.event.ready event
ready: function(event) {
// Set media
$(this).jPlayer("setMedia", { oga: srcvalue });
},
/* This is the playing state and if im not mistaken
* you were looking for this.
* playing: function() { },
* pause: function() { },
*/
// On each play disable others
play: function() {
// Pause all except this one
$(this).jPlayer("pauseOthers");
/* This means start from 0
* when used in play even after pause event
* it will start from begining
*/
$(this).jPlayer("playHead", 0);
},
// The $.jPlayer.event.ended event
ended: function() {
// Repeat the media
$(this).jPlayer("playHead", 0);
},
// Supplied MIME types
supplied: "oga",
// Css Ancestor
cssSelectorAncestor: '#jp_container_' + i,
// Css Selector
cssSelector: {
videoPlay: '.jp-video-play',
play: '.jp-play',
pause: '.jp-pause',
stop: '.jp-stop',
seekBar: '.jp-seek-bar',
playBar: '.jp-play-bar',
mute: '.jp-mute',
unmute: '.jp-unmute',
volumeBar: '.jp-volume-bar',
volumeBarValue: '.jp-volume-bar-value',
volumeMax: '.jp-volume-max',
currentTime: '.jp-current-time',
duration: '.jp-duration',
fullScreen: '.jp-full-screen',
restoreScreen: '.jp-restore-screen',
repeat: '.jp-repeat',
repeatOff: '.jp-repeat-off',
gui: '.jp-gui',
noSolution: '.jp-no-solution'
},
// Warning Alerts
warningAlerts: false
});
i = i + 1;
});
});