I have 3 jPlayer instances on a single page. By default only the play and stop buttons are visible. When you click play the rest of the player slides out using jQuery UI.
I'll just start by saying I have my progress on a jsfiddle available here: http://jsfiddle.net/adbakke/ooLj5h6j/
What I want to have happen is when you click on play, it opens the player controls (other than play/stop), and when you pause, stop, or track ends it collapses the player controls (other than play/stop).
The other players pause when one is played, and when this happens I want the UI elements associated with those other players to collapse as if the pause/stop buttons were being pressed.
One thing I tried in my example on JSFiddle is to have the init function for the first player also hide a different and specific player's elements, but it causes problems when someone clicks multiple times on a play button, or clicks them too quickly, et cetera.
How can I change this to hide elements from each player when that player pauses or stops, whether or not it was paused due to pause being clicked, or if another player's "pauseOthers" function was called?
Here's some code reference, also check out above linked JSFiddle:
The jPlayer HTML I have looks like so:
<!-- jPlayer Start -->
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<div class="jp-controls">
<button class="jp-play" role="button" tabindex="0">play</button>
<button class="jp-stop" role="button" tabindex="0">stop</button>
</div>
<div class="jp-progress hideme">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-controls hideme">
<button class="jp-mute" role="button" tabindex="0">mute</button>
<button class="jp-volume-max" role="button" tabindex="0">max volume</button>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
</div>
<div class="jp-time-holder hideme">
<div class="jp-current-time" role="timer" aria-label="time"> </div>
<div class="jp-duration" role="timer" aria-label="duration"> </div>
</div>
</div>
</div>
</div>
<!-- End Player 1 -->
This script runs from the bottom of the page and hides our player elements that aren't the play or stop buttons, then uses a click function to show the player and other elements when you click play, and hide them when you click stop:
<script>
$(document).ready( function () {
$('.hideme').hide();
$('.jp-play').click(
function() {
$(this).parent().parent( '.jp-interface' ).toggleClass( 'showme' , 1000, 'easeInOutExpo' );
$(this).parent().siblings( '.hideme' ).toggle('slide', 'easeInOutExpo', 1000);
});
$('.jp-stop').click(function() {
$(this).closest( '.jp-interface' ).removeClass('showme', 1000, 'easeInOutExpo');
$(this).parent().siblings( '.hideme' ).hide('slide', 'easeInOutExpo', 1000);
});
});
</script>
Edit: Here's my full init (before was just a snippet from the init):
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
title: "Stirring of a fool",
mp3: "http://mindevo.com/geewhiz/audio/comps-mixes/Gee-Whiz_-_Funky-Little-Party.mp3",
m4a: "http://www.jplayer.org/audio/m4a/Miaow-08-Stirring-of-a-fool.m4a",
oga: "http://www.jplayer.org/audio/ogg/Miaow-08-Stirring-of-a-fool.ogg"
});
},
play: function() {
$(".jp-jplayer").not(this).jPlayer("stop");
$('#jp_container_2 .jp-interface').removeClass('showme', 1000, 'easeInOutExpo');
},
swfPath: "../../js",
supplied: "mp3,m4a, oga",
wmode: "window",
globalVolume: true,
useStateClassSkin: true,
autoBlur: false,
smoothPlayBar: true,
keyEnabled: true,
ended: function(event) {
$('.jp-interface').removeClass('showme', 1000, 'easeInOutExpo');
$('.hideme').hide('slide', 'easeInOutExpo', 1000);
}
});
$("#jquery_jplayer_2").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
title: "Hidden",
mp3: "http://mindevo.com/geewhiz/audio/comps-mixes/DJ-Biscuit-&-Doc-Brown---New-Magic-In-A-Dusty-World.mp3",
m4a: "http://www.jplayer.org/audio/m4a/Miaow-02-Hidden.m4a",
oga: "http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg"
});
},
play: function() { // To avoid multiple jPlayers playing together.
$(this).jPlayer("pauseOthers");
},
swfPath: "../../js",
supplied: "mp3,m4a, oga",
cssSelectorAncestor: "#jp_container_2",
wmode: "window",
globalVolume: true,
useStateClassSkin: true,
autoBlur: false,
smoothPlayBar: true,
keyEnabled: true,
ended: function(event) {
$('.jp-interface').removeClass('showme', 1000, 'easeInOutExpo');
$('.hideme').hide('slide', 'easeInOutExpo', 1000);
}
});
$("#jquery_jplayer_3").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
title: "Bubble",
mp3: "http://mindevo.com/geewhiz/audio/comps-mixes/Gee-Whiz---Jazz.mp3",
m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
});
},
play: function() { // To avoid multiple jPlayers playing together.
$(this).jPlayer("pauseOthers");
},
swfPath: "../../js",
supplied: "mp3,m4a, oga",
cssSelectorAncestor: "#jp_container_3",
wmode: "window",
globalVolume: true,
useStateClassSkin: true,
autoBlur: false,
smoothPlayBar: true,
keyEnabled: true,
ended: function(event) {
$('.jp-interface').removeClass('showme', 1000, 'easeInOutExpo');
$('.hideme').hide('slide', 'easeInOutExpo', 1000);
}
});
});
You can handle this case on the click event of the jp-play button.
So , I have done it using following steps,
jp-audio except the current onejp-state-playing classSo, the code goes as follows,
$('.jp-play').click(
function () {
$(".jp-audio").not($(this).closest(".jp-audio")).each(function () {
if($(this).hasClass("jp-state-playing")){
$(this).find('.jp-interface').toggleClass('showme', 1000, 'easeInOutExpo');
$(this).find('.hideme').toggle('slide', 'easeInOutExpo', 1000);
}
});
$(this).parent().parent('.jp-interface').toggleClass('showme', 1000, 'easeInOutExpo');
$(this).parent().siblings('.hideme').toggle('slide', 'easeInOutExpo', 1000);
});
And, you could do the same for stop case.
Here is the Demo Fiddle