X-Git-Url: http://105106.c2e0p.group/sound.git/blobdiff_plain/c20b1f29d05b360d2314dc3189cee0a024b276ca..2d410f3ec8d9a7889cc47086d3e6c30a29fb6d56:/sound.html

diff --git a/sound.html b/sound.html
index d050524..af92487 100644
--- a/sound.html
+++ b/sound.html
@@ -29,28 +29,75 @@
 		audio.autoplay = false;
 		audio.src = 'Coin.wav';
 		audio.preload = 'auto';
+		audio.addEventListener('canplaythrough', eventLogger);
+		audio.addEventListener('emptied', eventLogger);
 		audio.addEventListener('ended', eventLogger);
-		audio.addEventListener('play', 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);
+		audio.addEventListener('suspend', eventLogger);
 		audio.addEventListener('timeupdate', eventLogger);
-		audio.addEventListener('waiting', eventLogger);
 		audio.addEventListener('volumechange', eventLogger);
-		audio.addEventListener('emptied', eventLogger);
-		audio.addEventListener('loadstart', eventLogger);
-		audio.addEventListener('progress', eventLogger);
+		audio.addEventListener('waiting', eventLogger);
+		audio.addEventListener('timeupdate', updateTime);
+		audio.addEventListener('durationchange', eventLogger);
+		audio.addEventListener('durationchange', updateDuration);
+		audio.addEventListener('ratechange', eventLogger);
+		audio.addEventListener('ratechange', updateRate);
+	}
+
+	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');
+		var currentTime = audio.currentTime;
+		time.innerText = formatTime(currentTime);
+
+		var timeline = document.getElementById('timeline');
+		timeline.value = currentTime;
+	}
+
+	function updateDuration() {
+		var duration = document.getElementById('duration');
+		duration.innerText = formatTime(audio.duration);
+
+		var timeline = document.getElementById('timeline');
+		timeline.max = audio.duration;
+	}
+
+	function updateRate() {
+		var rate = document.getElementById('rate');
+		rate.value = audio.playbackRate;
 	}
 
 	</script>
 </head>
 <body onload="onload()">
-
 	<div>
+		<select onchange="audio.src = event.target.value">
+			<option value="Coin.wav">Coin.wav</option>
+			<option value="Overworld.mp3">Overworld.mp3</option>
+		</select>
+	</div>
+	<div>
+		<input type="range" min="0" max="1" step="0.01" value="1" oninput="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>
-		<input type="range" min="0" max="1" step="0.01" onchange="audio.volume = event.target.value" />
+		<span id="time">--:--</span>
+		<input id="timeline" type="range" min="0" max="1" step="0.01" value="0" oninput="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>
+		<input id="rate" type="range" min="-2" max="2" step="0.01" value="1" oninput="audio.playbackRate = event.target.value" />
 	</div>
 
 </body>