X-Git-Url: http://105106.c2e0p.group/sound.git/blobdiff_plain/1c34429baed75a88bb01e077086cd59201cb2a9a..2d410f3ec8d9a7889cc47086d3e6c30a29fb6d56:/sound.html?ds=sidebyside
diff --git a/sound.html b/sound.html
index 34889fa..af92487 100644
--- a/sound.html
+++ b/sound.html
@@ -4,15 +4,101 @@
<title>sound test</title>
<script src="sound.js"></script>
<script>
- var sound = new Sound();
- sound.src = 'Coin.wav';
- sound.play();
- sound.addEventListener('ended', function() { document.body.appendChild(document.createTextNode('ended')); })
+
+ var audio;
+
+ function log(text) {
+ var log = document.getElementById('log');
+ if (!log) {
+ log = document.createElement('div');
+ log.id = 'log';
+ document.body.appendChild(log);
+ }
+
+ var line = document.createElement('div');
+ line.appendChild(document.createTextNode(text));
+ log.insertBefore(line, log.firstChild);
+ }
+
+ function eventLogger(event) {
+ log(event.type);
+ }
+
+ function onload() {
+ audio = new Audio();
+ audio.autoplay = false;
+ audio.src = 'Coin.wav';
+ audio.preload = 'auto';
+ 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);
+ audio.addEventListener('suspend', eventLogger);
+ audio.addEventListener('timeupdate', eventLogger);
+ audio.addEventListener('volumechange', 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>
-
-<button onclick="sound.play()">play</button><button onclick="sound.pause()">pause</button>
+<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>
+ <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>
</html>
\ No newline at end of file