diff -r a7e88f60f627 -r 46b897524cc4 web/int_music.html
--- a/web/int_music.html	Wed Jan 16 12:12:51 2013 +0100
+++ b/web/int_music.html	Wed Jan 16 21:26:15 2013 +0100
@@ -44,7 +44,7 @@
 				this comment corrects the white-space (display: inline);
 				--><div class="fullScreen_vcentering white big_txt">
 					<article class="boxAudio">
-						<audio id="audio1" ontimeupdate="update()">
+						<audio id="audio1" preload="metadata">
 							<source src="audio.ogg" type="audio/ogg">
   							<source src="http://clients.incandescence.com/theend/MP3/MARSEILLAISE-CHANT_3.mp3" type="audio/mpeg">
 							<p>Audio non supportée </p>
@@ -56,7 +56,7 @@
 		   				<p id="title1">LA MARSEILLAISE</p><br>
 						
 						
-						<audio id="audio2" ontimeupdate="update()">
+						<audio id="audio2" preload="metadata">
 							<source src="audio.ogg" type="audio/ogg">
   							<source src="http://clients.incandescence.com/theend/MP3/IDEE-CHANT_5.mp3" type="audio/mpeg">
 							<p>Audio non supportée </p>
@@ -66,7 +66,7 @@
 		                <p id="current2" class="time">0'00''</p>
 						<p id="title2">L'IDÉE</p><br>
 						
-						<audio id="audio3" ontimeupdate="update()">
+						<audio id="audio3" preload="metadata">
 							<source src="audio.ogg" type="audio/ogg">
   							<source src="http://clients.incandescence.com/theend/MP3/INTERNATIONALE-CHANT_1.mp3" type="audio/mpeg">
 							<p>Audio non supportée </p>
@@ -76,7 +76,7 @@
 		                <p id="current3" class="time">0'00''</p>
 		   				<p id="title3">L'INTERNATIONALE</p><br>
 
-						<audio id="audio4" ontimeupdate="update()">
+						<audio id="audio4" preload="metadata">
 							<source src="audio.ogg" type="audio/ogg">
   							<source src="http://clients.incandescence.com/theend/MP3/NIDIEU-CHANT-2.mp3" type="audio/mpeg">
 							<p>Audio non supportée </p>
@@ -85,7 +85,7 @@
 		               	<p id="current4" class="time">0'00''</p>
 		   				<p id="title4">NI DIEU NI MAÎTRE</p><br>
 
-						<audio id="audio5" ontimeupdate="update()">
+						<audio id="audio5" preload="metadata">
 	   						<source src="audio.ogg" type="audio/ogg">
   							<source src="http://clients.incandescence.com/theend/MP3/ZEBU-CHANT_4.mp3" type="audio/mpeg">
 							<p>Audio non supportée </p>
@@ -104,15 +104,28 @@
         <script src="static/res/js/jquery-1.8.2.min.js"></script>        		
         <script>
             var playingIndex = -1;
+            var loading = false;
 
             var play = function(audioIndex) {
 
+            	if (loading) {
+            		return;
+            	}
+
             	var wasPlaying = playingIndex;
 
             	// Stop the current played audio ?
             	if (playingIndex !== -1 ) {
+	            	var audioObj = $("#audio" + playingIndex);
+	            	var audio = audioObj.get(0);
+
+					// Unbind all events
+					audioObj.unbind("canplaythrough");
+					audioObj.unbind("timeupdate");
+					audioObj.unbind("ended");
+
             		// Pause the audio
-	            	$("#audio" + playingIndex).get(0).pause();
+	            	audio.pause();
 	            	setTimeValue(0);
 
             		// Change the button pause in play
@@ -126,40 +139,74 @@
 
             	// Play a new audio
             	if (audioIndex !== wasPlaying) {
-            		// Reset position and play the audio
-	            	var audio = $("#audio" + audioIndex).get(0);
-	            	audio.play();
-	            	audio.currentTime = 0;
+
+	            	var audioObj = $("#audio" + audioIndex);
+	            	var audio = audioObj.get(0);
 					playingIndex = audioIndex;
 
-					// Add event on the end
-					$("#audio" + audioIndex).bind("ended", function() {
+	            	if (audio.readyState === 4) {
+						// Play the sound
+						playSound(audio);
+
+	            	} else {
+		            	// Load the sound
+		            	audio.load();
+						loading = true;	
+
+		            	// Add event canplaythrough
+						audioObj.bind("canplaythrough", function() {
+							console.log("canplaythrough");
+
+							// Play the sound
+							playSound(audio);
+
+							// Unbind
+							audioObj.unbind("canplaythrough");						
+						});
+					}
+
+	            	// Add event timeupdate
+					audioObj.bind("timeupdate", function() {
+						if (!loading) {
+		            		setTimeValue(audio.duration - audio.currentTime);
+		            	}
+					});
+
+					// Add event ended
+					audioObj.bind("ended", function() {
+						console.log("ended");
 	            		// Change the button pause in play
     	        		$("#playpause" + playingIndex).css({"background-position" : '0 0'});
-						playingIndex = -1;						
+
+    	        		// Change the title color
+						$("#title" + audioIndex).removeClass("gris");	
+
+						// Unbind
+						audioObj.unbind("timeupdate");
+						audioObj.unbind("ended");
+						playingIndex = -1;
 					});
 
             		// Change the button pause in play
             		$("#playpause" + audioIndex).css({"background-position" : '0 -30px'});
 
-					// Set the background
-					$("#bgimage").attr("src", "static/res/img/choixMusique" + (audioIndex + 1)+ ".jpg");
-
 					// Change the title color
 					$("#title" + audioIndex).addClass("gris");	
-            	}
+
+					// Set the background
+					$("#bgimage").attr("src", "static/res/img/choixMusique" + (audioIndex + 1)+ ".jpg");					
+            	};
             };
 
-            var update = function() {
-            	if (playingIndex !== -1) {
-		            var audio = $("#audio" + playingIndex).get(0);
-		            setTimeValue(audio.duration - audio.currentTime);
-            	}
+            var playSound = function(audio) {
+				audio.currentTime = 0;
+				audio.play();
+				loading = false;	            	
             };
 
             var setTimeValue = function(time) {
 	            $("#current" + playingIndex).html(secondsToTime(time));
-            }
+            };
 
             this.secondsToTime = function(sec) {
 				var minutes = Math.floor(sec / 60);