Use ES6 Classes for Sound.

[sound.git] / sound.html
diff --git a/sound.html b/sound.html

index b1ae6dd7bcf2f604ed9b2ba41f910a844492826b..af92487fed4a92d50c0306d2005b32ab7bc0adef 100644 (file)
--- a/sound.html
+++ b/sound.html
@@ -29,10 +29,13 @@
                 audio.autoplay = false;
                 audio.src = 'Coin.wav';
                 audio.preload = 'auto';
                 audio.autoplay = false;
                 audio.src = 'Coin.wav';
                 audio.preload = 'auto';
+               audio.addEventListener('canplaythrough', eventLogger);
                 audio.addEventListener('emptied', eventLogger);
                 audio.addEventListener('ended', eventLogger);
                 audio.addEventListener('emptied', eventLogger);
                 audio.addEventListener('ended', eventLogger);
+               audio.addEventListener('ended', updateTime);
                 audio.addEventListener('loadstart', eventLogger);
                 audio.addEventListener('pause', eventLogger);
                 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('play', eventLogger);
                 audio.addEventListener('playing', eventLogger);
                 audio.addEventListener('progress', eventLogger);
@@ -40,18 +43,61 @@
                 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);
+               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()">
         }
  
         </script>
  </head>
  <body onload="onload()">
-
         <div>
         <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>
                 <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.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>
         </div>
  
  </body>