42 <!--this div empty allows the element content_vcentering to be vertically aligned --> |
42 <!--this div empty allows the element content_vcentering to be vertically aligned --> |
43 <div class="strut"></div><!-- |
43 <div class="strut"></div><!-- |
44 this comment corrects the white-space (display: inline); |
44 this comment corrects the white-space (display: inline); |
45 --><div class="fullScreen_vcentering white big_txt"> |
45 --><div class="fullScreen_vcentering white big_txt"> |
46 <article class="boxAudio"> |
46 <article class="boxAudio"> |
47 <audio id="audio1" ontimeupdate="update()"> |
47 <audio id="audio1" preload="metadata"> |
48 <source src="audio.ogg" type="audio/ogg"> |
48 <source src="audio.ogg" type="audio/ogg"> |
49 <source src="http://clients.incandescence.com/theend/MP3/MARSEILLAISE-CHANT_3.mp3" type="audio/mpeg"> |
49 <source src="http://clients.incandescence.com/theend/MP3/MARSEILLAISE-CHANT_3.mp3" type="audio/mpeg"> |
50 <p>Audio non supportée </p> |
50 <p>Audio non supportée </p> |
51 </audio> |
51 </audio> |
52 <button id="playpause1" onClick="play(1)" class="btnPlayPause txt_hidden">Play</button> |
52 <button id="playpause1" onClick="play(1)" class="btnPlayPause txt_hidden">Play</button> |
54 <!-- class="txt_white" can be used to color current time in white --> |
54 <!-- class="txt_white" can be used to color current time in white --> |
55 <p id="current1" class="time">0'00''</p> |
55 <p id="current1" class="time">0'00''</p> |
56 <p id="title1">LA MARSEILLAISE</p><br> |
56 <p id="title1">LA MARSEILLAISE</p><br> |
57 |
57 |
58 |
58 |
59 <audio id="audio2" ontimeupdate="update()"> |
59 <audio id="audio2" preload="metadata"> |
60 <source src="audio.ogg" type="audio/ogg"> |
60 <source src="audio.ogg" type="audio/ogg"> |
61 <source src="http://clients.incandescence.com/theend/MP3/IDEE-CHANT_5.mp3" type="audio/mpeg"> |
61 <source src="http://clients.incandescence.com/theend/MP3/IDEE-CHANT_5.mp3" type="audio/mpeg"> |
62 <p>Audio non supportée </p> |
62 <p>Audio non supportée </p> |
63 </audio> |
63 </audio> |
64 <button id="playpause2" onClick="play(2)" title="play" class="btnPlayPause txt_hidden">Play</button> |
64 <button id="playpause2" onClick="play(2)" title="play" class="btnPlayPause txt_hidden">Play</button> |
65 |
65 |
66 <p id="current2" class="time">0'00''</p> |
66 <p id="current2" class="time">0'00''</p> |
67 <p id="title2">L'IDÉE</p><br> |
67 <p id="title2">L'IDÉE</p><br> |
68 |
68 |
69 <audio id="audio3" ontimeupdate="update()"> |
69 <audio id="audio3" preload="metadata"> |
70 <source src="audio.ogg" type="audio/ogg"> |
70 <source src="audio.ogg" type="audio/ogg"> |
71 <source src="http://clients.incandescence.com/theend/MP3/INTERNATIONALE-CHANT_1.mp3" type="audio/mpeg"> |
71 <source src="http://clients.incandescence.com/theend/MP3/INTERNATIONALE-CHANT_1.mp3" type="audio/mpeg"> |
72 <p>Audio non supportée </p> |
72 <p>Audio non supportée </p> |
73 </audio> |
73 </audio> |
74 <button id="playpause3" onClick="play(3)" title="play" class="btnPlayPause txt_hidden">Play</button> |
74 <button id="playpause3" onClick="play(3)" title="play" class="btnPlayPause txt_hidden">Play</button> |
75 |
75 |
76 <p id="current3" class="time">0'00''</p> |
76 <p id="current3" class="time">0'00''</p> |
77 <p id="title3">L'INTERNATIONALE</p><br> |
77 <p id="title3">L'INTERNATIONALE</p><br> |
78 |
78 |
79 <audio id="audio4" ontimeupdate="update()"> |
79 <audio id="audio4" preload="metadata"> |
80 <source src="audio.ogg" type="audio/ogg"> |
80 <source src="audio.ogg" type="audio/ogg"> |
81 <source src="http://clients.incandescence.com/theend/MP3/NIDIEU-CHANT-2.mp3" type="audio/mpeg"> |
81 <source src="http://clients.incandescence.com/theend/MP3/NIDIEU-CHANT-2.mp3" type="audio/mpeg"> |
82 <p>Audio non supportée </p> |
82 <p>Audio non supportée </p> |
83 </audio> |
83 </audio> |
84 <button id="playpause4" onClick="play(4)" title="play" class="btnPlayPause txt_hidden">Play</button> |
84 <button id="playpause4" onClick="play(4)" title="play" class="btnPlayPause txt_hidden">Play</button> |
85 <p id="current4" class="time">0'00''</p> |
85 <p id="current4" class="time">0'00''</p> |
86 <p id="title4">NI DIEU NI MAÎTRE</p><br> |
86 <p id="title4">NI DIEU NI MAÎTRE</p><br> |
87 |
87 |
88 <audio id="audio5" ontimeupdate="update()"> |
88 <audio id="audio5" preload="metadata"> |
89 <source src="audio.ogg" type="audio/ogg"> |
89 <source src="audio.ogg" type="audio/ogg"> |
90 <source src="http://clients.incandescence.com/theend/MP3/ZEBU-CHANT_4.mp3" type="audio/mpeg"> |
90 <source src="http://clients.incandescence.com/theend/MP3/ZEBU-CHANT_4.mp3" type="audio/mpeg"> |
91 <p>Audio non supportée </p> |
91 <p>Audio non supportée </p> |
92 </audio> |
92 </audio> |
93 <button id="playpause5" onClick="play(5)" title="play" class="btnPlayPause txt_hidden">Play</button> |
93 <button id="playpause5" onClick="play(5)" title="play" class="btnPlayPause txt_hidden">Play</button> |
102 |
102 |
103 <!-- JavaScript --> |
103 <!-- JavaScript --> |
104 <script src="static/res/js/jquery-1.8.2.min.js"></script> |
104 <script src="static/res/js/jquery-1.8.2.min.js"></script> |
105 <script> |
105 <script> |
106 var playingIndex = -1; |
106 var playingIndex = -1; |
|
107 var loading = false; |
107 |
108 |
108 var play = function(audioIndex) { |
109 var play = function(audioIndex) { |
|
110 |
|
111 if (loading) { |
|
112 return; |
|
113 } |
109 |
114 |
110 var wasPlaying = playingIndex; |
115 var wasPlaying = playingIndex; |
111 |
116 |
112 // Stop the current played audio ? |
117 // Stop the current played audio ? |
113 if (playingIndex !== -1 ) { |
118 if (playingIndex !== -1 ) { |
|
119 var audioObj = $("#audio" + playingIndex); |
|
120 var audio = audioObj.get(0); |
|
121 |
|
122 // Unbind all events |
|
123 audioObj.unbind("canplaythrough"); |
|
124 audioObj.unbind("timeupdate"); |
|
125 audioObj.unbind("ended"); |
|
126 |
114 // Pause the audio |
127 // Pause the audio |
115 $("#audio" + playingIndex).get(0).pause(); |
128 audio.pause(); |
116 setTimeValue(0); |
129 setTimeValue(0); |
117 |
130 |
118 // Change the button pause in play |
131 // Change the button pause in play |
119 $("#playpause" + playingIndex).css({"background-position" : '0 0'}); |
132 $("#playpause" + playingIndex).css({"background-position" : '0 0'}); |
120 |
133 |
124 playingIndex = -1; |
137 playingIndex = -1; |
125 } |
138 } |
126 |
139 |
127 // Play a new audio |
140 // Play a new audio |
128 if (audioIndex !== wasPlaying) { |
141 if (audioIndex !== wasPlaying) { |
129 // Reset position and play the audio |
142 |
130 var audio = $("#audio" + audioIndex).get(0); |
143 var audioObj = $("#audio" + audioIndex); |
131 audio.play(); |
144 var audio = audioObj.get(0); |
132 audio.currentTime = 0; |
|
133 playingIndex = audioIndex; |
145 playingIndex = audioIndex; |
134 |
146 |
135 // Add event on the end |
147 if (audio.readyState === 4) { |
136 $("#audio" + audioIndex).bind("ended", function() { |
148 // Play the sound |
|
149 playSound(audio); |
|
150 |
|
151 } else { |
|
152 // Load the sound |
|
153 audio.load(); |
|
154 loading = true; |
|
155 |
|
156 // Add event canplaythrough |
|
157 audioObj.bind("canplaythrough", function() { |
|
158 console.log("canplaythrough"); |
|
159 |
|
160 // Play the sound |
|
161 playSound(audio); |
|
162 |
|
163 // Unbind |
|
164 audioObj.unbind("canplaythrough"); |
|
165 }); |
|
166 } |
|
167 |
|
168 // Add event timeupdate |
|
169 audioObj.bind("timeupdate", function() { |
|
170 if (!loading) { |
|
171 setTimeValue(audio.duration - audio.currentTime); |
|
172 } |
|
173 }); |
|
174 |
|
175 // Add event ended |
|
176 audioObj.bind("ended", function() { |
|
177 console.log("ended"); |
137 // Change the button pause in play |
178 // Change the button pause in play |
138 $("#playpause" + playingIndex).css({"background-position" : '0 0'}); |
179 $("#playpause" + playingIndex).css({"background-position" : '0 0'}); |
139 playingIndex = -1; |
180 |
|
181 // Change the title color |
|
182 $("#title" + audioIndex).removeClass("gris"); |
|
183 |
|
184 // Unbind |
|
185 audioObj.unbind("timeupdate"); |
|
186 audioObj.unbind("ended"); |
|
187 playingIndex = -1; |
140 }); |
188 }); |
141 |
189 |
142 // Change the button pause in play |
190 // Change the button pause in play |
143 $("#playpause" + audioIndex).css({"background-position" : '0 -30px'}); |
191 $("#playpause" + audioIndex).css({"background-position" : '0 -30px'}); |
144 |
192 |
145 // Set the background |
|
146 $("#bgimage").attr("src", "static/res/img/choixMusique" + (audioIndex + 1)+ ".jpg"); |
|
147 |
|
148 // Change the title color |
193 // Change the title color |
149 $("#title" + audioIndex).addClass("gris"); |
194 $("#title" + audioIndex).addClass("gris"); |
150 } |
195 |
|
196 // Set the background |
|
197 $("#bgimage").attr("src", "static/res/img/choixMusique" + (audioIndex + 1)+ ".jpg"); |
|
198 }; |
151 }; |
199 }; |
152 |
200 |
153 var update = function() { |
201 var playSound = function(audio) { |
154 if (playingIndex !== -1) { |
202 audio.currentTime = 0; |
155 var audio = $("#audio" + playingIndex).get(0); |
203 audio.play(); |
156 setTimeValue(audio.duration - audio.currentTime); |
204 loading = false; |
157 } |
|
158 }; |
205 }; |
159 |
206 |
160 var setTimeValue = function(time) { |
207 var setTimeValue = function(time) { |
161 $("#current" + playingIndex).html(secondsToTime(time)); |
208 $("#current" + playingIndex).html(secondsToTime(time)); |
162 } |
209 }; |
163 |
210 |
164 this.secondsToTime = function(sec) { |
211 this.secondsToTime = function(sec) { |
165 var minutes = Math.floor(sec / 60); |
212 var minutes = Math.floor(sec / 60); |
166 var seconds = Math.floor(sec - minutes * 60); |
213 var seconds = Math.floor(sec - minutes * 60); |
167 if (seconds < 10) { |
214 if (seconds < 10) { |