X-Git-Url: http://id.pley.net/sound.git/blobdiff_plain/82e3a8a15e29c81d92cdb6432d9dad531c03063a..cdba2888fe934336681d265c296e61bff2ca5342:/sound.html?ds=sidebyside

diff --git a/sound.html b/sound.html
index d5185e4..3982cee 100644
--- a/sound.html
+++ b/sound.html
@@ -32,8 +32,10 @@
 		audio.addEventListener('canplaythrough', eventLogger);
 		audio.addEventListener('emptied', eventLogger);
 		audio.addEventListener('ended', eventLogger);
+		audio.addEventListener('ended', updateTime);
 		audio.addEventListener('loadstart', eventLogger);
 		audio.addEventListener('pause', eventLogger);
+		audio.addEventListener('pause', updateTime);
 		audio.addEventListener('play', eventLogger);
 		audio.addEventListener('playing', eventLogger);
 		audio.addEventListener('progress', eventLogger);
@@ -55,11 +57,17 @@
 	function updateTime() {
 		var time = document.getElementById('time');
 		time.innerText = formatTime(audio.currentTime);
+
+		var timeline = document.getElementById('timeline');
+		timeline.value = audio.currentTime;
 	}
 
 	function updateDuration() {
 		var duration = document.getElementById('duration');
 		duration.innerText = formatTime(audio.duration);
+
+		var timeline = document.getElementById('timeline');
+		timeline.max = audio.duration;
 	}
 
 	</script>
@@ -72,13 +80,15 @@
 		</select>
 	</div>
 	<div>
+		<input type="range" min="0" max="1" step="0.01" value="1" onchange="audio.volume = event.target.value" />
 		<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" />
+		<input id="timeline" type="range" min="0" max="1" step="0.01" value="0" onchange="audio.currentTime = event.target.value" />
 		<span id="duration">--:--</span>
 		<button onclick="audio.loop = !audio.loop">loop</button>
+		<button onclick="audio.playbackRate = -audio.playbackRate">reverse</button>
 	</div>
 
 </body>