1 <!DOCTYPE html> |
|
2 <html lang="fr"> |
|
3 <head> |
|
4 <meta charset="utf-8"> |
|
5 <title>The End - @todo</title> |
|
6 |
|
7 <meta name="description" content="@todo"> |
|
8 <link rel="icon" href="static/res/img/favicon.ico" /> |
|
9 |
|
10 <!-- Mobile Specific Metas --> |
|
11 <meta name="viewport" content="user-scalable=no"> |
|
12 <!-- |
|
13 <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" /> |
|
14 --> |
|
15 |
|
16 <!-- Test Smartphone --> |
|
17 <script src="static/res/js/incdetectmobile.js"></script> |
|
18 <script> |
|
19 if (IsSmartphone()) { location.href = "mindex.html"; } |
|
20 </script> |
|
21 <!-- Metanav FranceTV --> |
|
22 <script src="http://static.francetv.fr/js/jquery.metanav-min.js" charset="utf-8"></script> |
|
23 |
|
24 <link rel="stylesheet" href="static/res/css/style_1024.css" /> |
|
25 |
|
26 </head> |
|
27 <body> |
|
28 <!-- div content - site takes the full height of browser --> |
|
29 <div id="content" class="full_hightScreen"> |
|
30 <div class="btnReturn"> |
|
31 <button id="btnChoice" class="btn" onClick="location.href='menu_bonus.html';">Choice</button> |
|
32 </div> |
|
33 <!--this div empty allows the element content_vcentering to be vertically aligned --> |
|
34 <section id="intMusic" class="full_hightScreen"> |
|
35 <div class="strut"></div><!-- |
|
36 this comment corrects the white-space (display: inline); |
|
37 --><div id="bg_img" class="fullScreen_vcentering"> |
|
38 <img id="bgimage" alt="The End, etc." src="static/res/img/choixMusique1.jpg" /> |
|
39 </div> |
|
40 </section> |
|
41 <section id="playerAudio" class="positionAbs"> |
|
42 <!--this div empty allows the element content_vcentering to be vertically aligned --> |
|
43 <div class="strut"></div><!-- |
|
44 this comment corrects the white-space (display: inline); |
|
45 --><div class="fullScreen_vcentering white big_txt"> |
|
46 <article class="boxAudio"> |
|
47 <audio id="audio1" preload="metadata"> |
|
48 <source src="http://clients.incandescence.com/theend/musique/MARSEILLAISE-CHANT_3.ogg" type="audio/ogg"> |
|
49 <source src="http://clients.incandescence.com/theend/musique/MARSEILLAISE-CHANT_3.mp3" type="audio/mpeg"> |
|
50 <p>Audio non supportée </p> |
|
51 </audio> |
|
52 <button id="playpause1" onClick="play(1)" class="btnPlayPause txt_hidden">Play</button> |
|
53 |
|
54 <!-- class="txt_white" can be used to color current time in white --> |
|
55 <p id="current1" class="time">0'00''</p> |
|
56 <p id="title1">LA MARSEILLAISE</p><br> |
|
57 |
|
58 |
|
59 <audio id="audio2" preload="metadata"> |
|
60 <source src="http://clients.incandescence.com/theend/musique/IDEE-CHANT_5.ogg" type="audio/ogg"> |
|
61 <source src="http://clients.incandescence.com/theend/musique/IDEE-CHANT_5.mp3" type="audio/mpeg"> |
|
62 <p>Audio non supportée </p> |
|
63 </audio> |
|
64 <button id="playpause2" onClick="play(2)" title="play" class="btnPlayPause txt_hidden">Play</button> |
|
65 |
|
66 <p id="current2" class="time">0'00''</p> |
|
67 <p id="title2">L'IDÉE</p><br> |
|
68 |
|
69 <audio id="audio3" preload="metadata"> |
|
70 <source src="http://clients.incandescence.com/theend/musique/INTERNATIONALE-CHANT_1.ogg" type="audio/ogg"> |
|
71 <source src="http://clients.incandescence.com/theend/musique/INTERNATIONALE-CHANT_1.mp3" type="audio/mpeg"> |
|
72 <p>Audio non supportée </p> |
|
73 </audio> |
|
74 <button id="playpause3" onClick="play(3)" title="play" class="btnPlayPause txt_hidden">Play</button> |
|
75 |
|
76 <p id="current3" class="time">0'00''</p> |
|
77 <p id="title3">L'INTERNATIONALE</p><br> |
|
78 |
|
79 <audio id="audio4" preload="metadata"> |
|
80 <source src="http://clients.incandescence.com/theend/musique/NIDIEU-CHANT-2.ogg" type="audio/ogg"> |
|
81 <source src="http://clients.incandescence.com/theend/musique/NIDIEU-CHANT-2.mp3" type="audio/mpeg"> |
|
82 <p>Audio non supportée </p> |
|
83 </audio> |
|
84 <button id="playpause4" onClick="play(4)" title="play" class="btnPlayPause txt_hidden">Play</button> |
|
85 <p id="current4" class="time">0'00''</p> |
|
86 <p id="title4">NI DIEU NI MAÎTRE</p><br> |
|
87 |
|
88 <audio id="audio5" preload="metadata"> |
|
89 <source src="http://clients.incandescence.com/theend/musique/ZEBU-CHANT_4.ogg" type="audio/ogg"> |
|
90 <source src="http://clients.incandescence.com/theend/musique/ZEBU-CHANT_4.mp3" type="audio/mpeg"> |
|
91 <p>Audio non supportée </p> |
|
92 </audio> |
|
93 <button id="playpause5" onClick="play(5)" title="play" class="btnPlayPause txt_hidden">Play</button> |
|
94 |
|
95 <p id="current5" class="time">0'00''</p> |
|
96 <p id="title5">L'ENVERS DU ZÉBU</p> |
|
97 </article> |
|
98 </div> |
|
99 </section> |
|
100 |
|
101 </div> |
|
102 |
|
103 <!-- JavaScript --> |
|
104 <script src="static/res/js/jquery-1.8.2.min.js"></script> |
|
105 <script> |
|
106 var playingIndex = -1; |
|
107 var loading = false; |
|
108 |
|
109 var play = function(audioIndex) { |
|
110 |
|
111 if (loading) { |
|
112 return; |
|
113 } |
|
114 |
|
115 var wasPlaying = playingIndex; |
|
116 |
|
117 // Stop the current played audio ? |
|
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 |
|
127 // Pause the audio |
|
128 audio.pause(); |
|
129 setTimeValue(0); |
|
130 |
|
131 // Change the button pause in play |
|
132 $("#playpause" + playingIndex).css({"background-position" : '0 0'}); |
|
133 |
|
134 // Change the title color |
|
135 $("#title" + playingIndex).removeClass("gris"); |
|
136 |
|
137 playingIndex = -1; |
|
138 } |
|
139 |
|
140 // Play a new audio |
|
141 if (audioIndex !== wasPlaying) { |
|
142 |
|
143 var audioObj = $("#audio" + audioIndex); |
|
144 var audio = audioObj.get(0); |
|
145 playingIndex = audioIndex; |
|
146 |
|
147 if (audio.readyState === 4) { |
|
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"); |
|
178 // Change the button pause in play |
|
179 $("#playpause" + playingIndex).css({"background-position" : '0 0'}); |
|
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; |
|
188 }); |
|
189 |
|
190 // Change the button pause in play |
|
191 $("#playpause" + audioIndex).css({"background-position" : '0 -30px'}); |
|
192 |
|
193 // Change the title color |
|
194 $("#title" + audioIndex).addClass("gris"); |
|
195 |
|
196 // Set the background |
|
197 $("#bgimage").attr("src", "static/res/img/choixMusique" + (audioIndex + 1)+ ".jpg"); |
|
198 }; |
|
199 }; |
|
200 |
|
201 var playSound = function(audio) { |
|
202 audio.currentTime = 0; |
|
203 audio.play(); |
|
204 loading = false; |
|
205 }; |
|
206 |
|
207 var setTimeValue = function(time) { |
|
208 $("#current" + playingIndex).html(secondsToTime(time)); |
|
209 }; |
|
210 |
|
211 this.secondsToTime = function(sec) { |
|
212 var minutes = Math.floor(sec / 60); |
|
213 var seconds = Math.floor(sec - minutes * 60); |
|
214 if (seconds < 10) { |
|
215 seconds = "0" + seconds; |
|
216 } |
|
217 return "" + minutes + "'" + seconds + "''"; |
|
218 }; |
|
219 </script> |
|
220 |
|
221 </body> |
|
222 </html> |
|