Add rate changed events; add a rate slider; parse incoming floats to ensure valid...

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

index 3982cee93b37ada4da86dfe0edd5a4e6291d7d9a..af49cce23d2ec94c98e80b68649fa287f81f4cfb 100644 (file)
--- a/sound.html
+++ b/sound.html
@@ -46,6 +46,8 @@
                 audio.addEventListener('timeupdate', updateTime);
                 audio.addEventListener('durationchange', eventLogger);
                 audio.addEventListener('durationchange', updateDuration);
+               audio.addEventListener('ratechange', eventLogger);
+               audio.addEventListener('ratechange', updateRate);
         }
  
         function formatTime(time) {
@@ -56,10 +58,11 @@
  
         function updateTime() {
                 var time = document.getElementById('time');
-               time.innerText = formatTime(audio.currentTime);
+               var currentTime = audio.currentTime;
+               time.innerText = formatTime(currentTime);
  
                 var timeline = document.getElementById('timeline');
-               timeline.value = audio.currentTime;
+               timeline.value = currentTime;
         }
  
         function updateDuration() {
@@ -70,6 +73,11 @@
                 timeline.max = audio.duration;
         }
  
+       function updateRate() {
+               var rate = document.getElementById('rate');
+               rate.value = audio.playbackRate;
+       }
+
         </script>
  </head>
  <body onload="onload()">
@@ -80,15 +88,16 @@
                 </select>
         </div>
         <div>
-               <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" 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" onchange="audio.currentTime = event.target.value" />
+               <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="-1" max="1" step="0.01" value="1" oninput="audio.playbackRate = event.target.value" />
         </div>
  
  </body>