Add 'reverse playback' support.

[sound.git] / sound.html

diff --git a/sound.html b/sound.html
index d5185e4951668ba26d61c3c7c8f74c90ae88437a..3982cee93b37ada4da86dfe0edd5a4e6291d7d9a 100644 (file)
--- a/sound.html
+++ b/sound.html
@@ -32,8 +32,10 @@
                audio.addEventListener('canplaythrough', eventLogger);
                audio.addEventListener('emptied', eventLogger);
                audio.addEventListener('ended', eventLogger);
                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('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);


@@ -55,11 +57,17 @@
        function updateTime() {
                var time = document.getElementById('time');
                time.innerText = formatTime(audio.currentTime);
        function updateTime() {
                var time = document.getElementById('time');
                time.innerText = formatTime(audio.currentTime);

+
+               var timeline = document.getElementById('timeline');
+               timeline.value = audio.currentTime;

        }
 
        function updateDuration() {
                var duration = document.getElementById('duration');
                duration.innerText = formatTime(audio.duration);
        }
 
        function updateDuration() {
                var duration = document.getElementById('duration');
                duration.innerText = formatTime(audio.duration);

+
+               var timeline = document.getElementById('timeline');
+               timeline.max = audio.duration;

        }
 
        </script>
        }
 
        </script>


@@ -72,13 +80,15 @@
                </select>
        </div>
        <div>
                </select>
        </div>
        <div>

+               <input type="range" min="0" max="1" step="0.01" value="1" onchange="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>
                <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 id="timeline" type="range" min="0" max="1" step="0.01" value="0" onchange="audio.currentTime = event.target.value" />

                <span id="duration">--:--</span>
                <button onclick="audio.loop = !audio.loop">loop</button>
                <span id="duration">--:--</span>
                <button onclick="audio.loop = !audio.loop">loop</button>

+               <button onclick="audio.playbackRate = -audio.playbackRate">reverse</button>

        </div>
 
 </body>
        </div>
 
 </body>