X-Git-Url: http://id.pley.net/sound.git/blobdiff_plain/96498ce8e0ac1fb6908a87e43f9c8a6c88157e76..82e3a8a15e29c81d92cdb6432d9dad531c03063a:/sound.html

diff --git a/sound.html b/sound.html
index 1c133e5..d5185e4 100644
--- a/sound.html
+++ b/sound.html
@@ -41,6 +41,25 @@
 		audio.addEventListener('timeupdate', eventLogger);
 		audio.addEventListener('volumechange', eventLogger);
 		audio.addEventListener('waiting', eventLogger);
+		audio.addEventListener('timeupdate', updateTime);
+		audio.addEventListener('durationchange', eventLogger);
+		audio.addEventListener('durationchange', updateDuration);
+	}
+
+	function formatTime(time) {
+		var seconds = (time % 60).toFixed(0);
+		var minutes = (time / 60).toFixed(0);
+		return ("0" + minutes).substr(-2, 2) + ':' + ("0" + seconds).substr(-2, 2);
+	}
+
+	function updateTime() {
+		var time = document.getElementById('time');
+		time.innerText = formatTime(audio.currentTime);
+	}
+
+	function updateDuration() {
+		var duration = document.getElementById('duration');
+		duration.innerText = formatTime(audio.duration);
 	}
 
 	</script>
@@ -56,7 +75,9 @@
 		<button onclick="audio.play()">play</button>
 		<button onclick="audio.pause()">pause</button>
 		<button onclick="audio.muted = !audio.muted">mute</button>
+		<span id="time">--:--</span>
 		<input type="range" min="0" max="1" step="0.01" value="1" onchange="audio.volume = event.target.value" />
+		<span id="duration">--:--</span>
 		<button onclick="audio.loop = !audio.loop">loop</button>
 	</div>