Make loading cancellable; emit the correct events when readyState changes.

[sound.git] / sound.html

diff --git a/sound.html b/sound.html
index 1c133e57974fc348ac450bdc4f1f67722d89fcd8..d5185e4951668ba26d61c3c7c8f74c90ae88437a 100644 (file)
--- 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', 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>
        }
 
        </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>
                <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 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>
 
                <button onclick="audio.loop = !audio.loop">loop</button>
        </div>