]> id.pley.net Git - sound.git/blobdiff - sound.html
Fix whitespace (tabs -> 4-space) and trailing whitespace.
[sound.git] / sound.html
index 6f0a1f6fe19d7dfb29582244fe4ea61bd7c89c9f..d5185e4951668ba26d61c3c7c8f74c90ae88437a 100644 (file)
@@ -5,7 +5,7 @@
        <script src="sound.js"></script>
        <script>
 
-       var sound;
+       var audio;
 
        function log(text) {
                var log = document.getElementById('log');
        }
 
        function onload() {
-               sound = new Sound();
-               sound.src = 'Coin.wav';
-               sound.autoplay = true;
-               sound.addEventListener('ended', eventLogger);
-               sound.addEventListener('play', eventLogger);
-               sound.addEventListener('pause', eventLogger);
-               sound.addEventListener('playing', eventLogger);
-               sound.addEventListener('timeupdate', eventLogger);
-               sound.addEventListener('waiting', eventLogger);
-               sound.addEventListener('volumechange', eventLogger);
-               sound.addEventListener('emptied', eventLogger);
-               sound.addEventListener('loadstart', eventLogger);
-               sound.addEventListener('progress', eventLogger);
+               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('loadstart', eventLogger);
+               audio.addEventListener('pause', eventLogger);
+               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);
+       }
+
+       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>
 </head>
 <body onload="onload()">
-
        <div>
-               <button onclick="sound.play()">play</button>
-               <button onclick="sound.pause()">pause</button>
-               <button onclick="sound.muted = !sound.muted">mute</button>
-               <input type="range" min="0" max="1" step="0.01" onchange="sound.volume = event.target.value" />
-               <button onclick="sound.loop = !sound.loop">loop</button>
+               <select onchange="audio.src = event.target.value">
+                       <option value="Coin.wav">Coin.wav</option>
+                       <option value="Overworld.mp3">Overworld.mp3</option>
+               </select>
+       </div>
+       <div>
+               <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>
 
 </body>