I am building a webpage which has two music players for sampling preferences. I am having trouble with making the music stop for both music player as the cursor leaves the division both players are in. (I have already made the first music player pause the second music player when played and vice versa.)
I used:
play: function() { //** added script from demo to pause other players **//
$(this).jPlayer("pauseOthers");
},
It is meant to prevent multiple players from playing at the same time using .jplayer("pauseOthers")
Should I edit the (head)[tag] javascript for jplayer to listen for .mouseleave so to pause both music players? (I have the normal layout for jplayer in HTML)
EDIT:
Head: javascript
25 <script type="text/javascript">
26 //<![CDATA[
27 $(document).ready(function(){
28
29 $("#jquery_jplayer_1").jPlayer({
30 ready: function () {
31 $(this).jPlayer("setMedia", {
32 title: "sample 1",
33 mp3: "Music/sample1.mp3"
34 });
35 },
36 play: function() { //** added script from demo **//
37 $(this).jPlayer("pauseOthers");
38 },
// add .mouseleave code
pause: function() {
$("#containerjplayer").mouseleave("pauseOthers");
},
39 swfPath: "swf/",
40 supplied: "mp3",
41 globalVolume: true,
42 smoothPlayBar: true,
43 keyEnabled: true
44 });
45
46 $("#jquery_jplayer_2").jPlayer({
47 ready: function () {
48 $(this).jPlayer("setMedia", {
49 title: "Sample 2",
50 mp3: "http://jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3"
51 });
52 },
53 play: function() { // To avoid multiple jPlayers playing together.
54 $(this).jplayer("pauseOthers");
55 },
pause: function() {
$("#containerjplayer").mouseleave("pauseOthers");
},
56 swfPath: "swf/",
57 supplied: "mp3",
58 cssSelectorAncestor: "#jp_container_2",
59 globalVolume: true,
60 smoothPlayBar: true,
61 keyEnabled: true
62 });
63
64 });
65 //]]>
66 </script>
Adding to both:
// jquery_jplayer_1
pause: function() {
$("#containerjplayer").mouseleave("stop");
}
or
// jquery_jplayer_1
pause: function() {
$("#containerjplayer").mouseleave("pauseOthers");
}
I added "play: function" in the top script and it did as the demo displayed after looking at the DOM and instructions. Shouldn't adding "pause: function" with .mouseleave work?
If not, is there a different way to do that?
(I have the normal layout for jplayer in HTML)
EDIT: added the HTML file
1<!DOCTYPE html>
2 <html><head>
3 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
4 <title>Web testing</title>
5
6 <script type="text/javascript" src="js/jquery.min.js"></script> <!--- Goes to js files -->
7
8 <link rel="stylesheet" type="text/css" href="css/normalize.css">
9 <link rel="stylesheet" type="text/css" href="css/custom.css">
10
11
12 <link rel="stylesheet" type="text/css" href="css/bluemonday.css"> <!-- Works: Goes to CSS file and gets JPEG and gif -->
13
14
15
16 <script type="text/javascript" src="js/jquery.jplayer.min.js"></script> <!-- Jplay er Jquery -->
17
18
19 <style type="text/css">
20
21 </style>
22
23 <!-------------------- Script for Playing music and stopping multi ple music playback ------------>
24
25 <script type="text/javascript">
26 //<![CDATA[
27 $(document).ready(function(){
28
29 $("#jquery_jplayer_1").jPlayer({
30 ready: function () {
31 $(this).jPlayer("setMedia", {
32 title: "sample 1",
33 mp3: "Music/sample1.mp3"
34 });
35 },
36 play: function() { // To avoid multiple jPlayers playing together.
37 $(this).jPlayer("pauseOthers");
38 },
// add pause function and .mouseleave
pause: function() {
$("#containerjplayer").mouseleave("pauseOthers");
},
39 swfPath: "swf/",
40 supplied: "mp3",
41 globalVolume: true,
42 smoothPlayBar: true,
43 keyEnabled: true
44 });
45
46 $("#jquery_jplayer_2").jPlayer({
47 ready: function () {
48 $(this).jPlayer("setMedia", {
49 title: "Sample 2",
50 mp3: "http://jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3"
51 });
52 },
53 play: function() { // To avoid multiple jPlayers playing together.
54 $(this).jPlayer("pauseOthers");
55 },
// add pause function and .mouseleave
pause: function() {
$("#containerjplayer").mouseleave("pauseOthers");
},
56 swfPath: "swf/",
57 supplied: "mp3",
58 cssSelectorAncestor: "#jp_container_2",
59 globalVolume: true,
60 smoothPlayBar: true,
61 keyEnabled: true
62 });
63
64 });
65 //]]>
66 </script>
67
68
69 <!----------------- END OF SCRIPT -------------------->
70
71 <style type="text/css"></style></head>
72 <body>
73 Which song do you like
74
75 <div id="containerjplayer">
76
77
78 <div id="blcoloredcontainer" href="javascript:;" class="jp-pause">
79 <!--------------- First Container ------------------ >
80
81
82 <div id="jquery_jplayer_1" class="jp-jplayer" style="width: 0px; height: 0px;"><img st yle="width: 0px; height: 0px; display: none;" id="jp_poster_0"><audio title="Where Money Flows Like Water" src="http://jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3" preload= "metadata" id="jp_audio_0"></audio></div> <!-- Made an edit to music -->
83
84 <div id="jp_container_1" class="jp-audio">
85 <div class="jp-type-single">
86 <div class="jp-gui jp-interface">
87 <ul class="jp-controls">
88
89 <!-- comment out any of the following <li>s to remove these buttons -->
90
91 <li><a href="javascript:;" class="jp-play" tabindex="1" style="display: none;">play</a></li>
92 <li><a href="javascript:;" class="jp-pause" tabindex="1" style="display: block;">pause</a></li>
93 <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
94 <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mut e</a></li>
95 <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute" style="display: none;">unmute</a></li>
96 <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
97 </ul>
98
99 <!-- you can comment out any of the following <div>s too -->
100
101 <div class="jp-progress">
102 <div class="jp-seek-bar" style="width: 100%;">
103 <div class="jp-play-bar" style="width: 2.81491%;"></div>
104 </div>
105 </div>
106 <div class="jp-volume-bar">
107 <div class="jp-volume-bar-value" style="width: 80%;"></div>
108 </div>
109 <div class="jp-current-time">00:16</div>
110 <div class="jp-duration">09:45</div>
111 </div>
112 <div class="jp-details">
113 <ul>
114 <li><span class="jp-title">Sample 1</span></li>
115 </ul>
116 </div>
117 <div class="jp-no-solution" style="display: none;">
118 <span>Update Required</span>
119 To play the media you will need to either update your browser to a recent ve rsion or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash p lugin</a>.
120 </div>
121 </div>
122 </div>
123
124 </div>
125
126 <!--- ***blue color container script*** ------>
127 <script type="text/javascript">
128 $(document).ready(function(){
129 $("#blcoloredcontainer").mouseleave(function(event){
130 alert("Thanks");
131 });
132 });
133 </script>
134
135 <!--- blue color container script ------>
136 <div id="recoloredcontainer">
137
138
139 <!----------------- Break to second container ---------------->
140
141 <div id="jquery_jplayer_2" class="jp-jplayer" style="width: 0px; height: 0px;"><img st yle="width: 0px; height: 0px; display: none;" id="jp_poster_0"><audio title="Battle" src ="http://jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3" preload="metadata" id="jp_audi o_0"></audio></div> <!-- Made an edit to music -->
142
143 <div id="jp_container_2" class="jp-audio">
144 <div class="jp-type-single">
145 <div class="jp-gui jp-interface">
146 <ul class="jp-controls">
147
148 <!---- comment out any of the following <li>s to remove these buttons -- >
149
150 <li><a href="javascript:;" class="jp-play" tabindex="1" style="display: none;">play</a></li>
151 <li><a href="javascript:;" class="jp-pause" tabindex="1" style="display: block;">pause</a></li>
152 <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
153 <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mut e</a></li>
154 <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute" style="display: none;">unmute</a></li>
155 <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
156 </ul>
157
158 <!-- you can comment out any of the following <div>s too -->
159
160 <div class="jp-progress">
161 <div class="jp-seek-bar" style="width: 100%;">
162 <div class="jp-play-bar" style="width: 2.81491%;"></div>
163 </div>
164 </div>
165 <div class="jp-volume-bar">
166 <div class="jp-volume-bar-value" style="width: 80%;"></div>
167 </div>
168 <div class="jp-current-time">00:16</div>
169 <div class="jp-duration">09:45</div>
170 </div>
171 <div class="jp-details">
172 <ul>
173 <li><span class="jp-title">Sample 2</span></li>
174 </ul>
175 </div>
176 <div class="jp-no-solution" style="display: none;">
177 <span>Update Required</span>
178 To play the media you will need to either update your browser to a recent ve rsion or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash p lugin</a>.
179 </div>
180 </div>
181 </div>
182
183
184 </div>
185
186
187 </div>
188 </body></html>
OK. So I found out the answer with more research and another stackoverflow question. What I needed to do to pause all music player with .mouseleave was:
<script type="text/javascript">
$(document).ready(function(){
$("#blcoloredcontainer").mouseleave(function(event){
$.jPlayer.pause();
});
$("#recoloredcontainer").mouseleave(function(event){
$.jPlayer.pause(); // this will turn off every music player
});
});
</script>
This would stop the music inside both the blue container and red container.