From cdba2888fe934336681d265c296e61bff2ca5342 Mon Sep 17 00:00:00 2001
From: Jer Noble <jer.noble@apple.com>
Date: Tue, 27 Jan 2015 15:29:22 +0100
Subject: [PATCH] Add 'reverse playback' support.
---
sound.html | 12 +++++++++++-
sound.js | 33 +++++++++++++++++++++++----------
2 files changed, 34 insertions(+), 11 deletions(-)
diff --git a/sound.html b/sound.html
index d5185e4..3982cee 100644
--- a/sound.html
+++ b/sound.html
@@ -32,8 +32,10 @@
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('pause', updateTime);
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);
+
+ var timeline = document.getElementById('timeline');
+ timeline.value = audio.currentTime;
}
function updateDuration() {
var duration = document.getElementById('duration');
duration.innerText = formatTime(audio.duration);
+
+ var timeline = document.getElementById('timeline');
+ timeline.max = audio.duration;
}
</script>
@@ -72,13 +80,15 @@
</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>
- <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>
+ <button onclick="audio.playbackRate = -audio.playbackRate">reverse</button>
</div>
</body>
diff --git a/sound.js b/sound.js
index e195ca6..355cfd4 100644
--- a/sound.js
+++ b/sound.js
@@ -185,7 +185,7 @@ Sound.prototype = {
this.setNetworkState(this.NETWORK.IDLE);
this.dispatchEventAsync(new CustomEvent('suspend'));
- this.setReadyState(this.READY.FUTURE_DATA);
+ this.setReadyState(this.READY.METADATA);
try {
Sound.audioContext.decodeAudioData(
@@ -210,7 +210,7 @@ Sound.prototype = {
this.setCurrentTime(0);
this.dispatchEventAsync(new CustomEvent('durationchange'));
- this.setReadyState(this.READY.METADATA);
+ this.setReadyState(this.READY.ENOUGH_DATA);
if (this.autoplaying && this._paused && this._autoplay)
this.play();
@@ -239,8 +239,12 @@ Sound.prototype = {
if (this.node)
return;
- if (this._ended && this._playbackRate > 0)
- this.setCurrentTime(0);
+ if (this._ended) {
+ if this._playbackRate > 0)
+ this.setCurrentTime(0);
+ else
+ this.setCurrentTime(this.duration)
+ }
if (this._paused || this._ended) {
this._paused = false;
@@ -269,8 +273,9 @@ Sound.prototype = {
this.node.connect(this.gainNode);
this.node.buffer = this.buffer;
this.node.playbackRate.value = this._playbackRate;
- this.node.start(0, this.nextStartTime);
this.node.onended = this.onended.bind(this);
+ var remainingDuration = this._playbackRate < 0 ? this.nextStartTime : this.buffer.duration - this.nextStartTime;
+ this.node.start(0, this.nextStartTime, remainingDuration);
this.timeUpdateTimer = setInterval(this.sendTimeUpdate.bind(this), 250);
},
@@ -294,7 +299,7 @@ Sound.prototype = {
if (!this.buffer || !this.node)
return;
- this.nextStartTime = Sound.audioContext.currentTime - this.startTime;
+ this.nextStartTime = this._playbackRate * (Sound.audioContext.currentTime - this.startTime);
this.stopInternal();
},
@@ -314,13 +319,11 @@ Sound.prototype = {
onended: function() {
if (this._loop) {
this.stopInternal();
- this.setCurrentTime(0);
this.playInternal();
return;
}
this._ended = true;
- this.nextStartTime = 0;
this.stopInternal();
this.dispatchEventAsync(new CustomEvent('ended'));
},
@@ -408,7 +411,7 @@ Sound.prototype = {
if (this.autoplaying && this._paused && this._autoplay && !this._ended && !this._error) {
this.dispatchEventAsync('timeupdate');
this.dispatchEventAsync('waiting');
- this.nextStartTime = Sound.audioContext.currentTime - this.startTime;
+ this.nextStartTime = this._playbackRate * (Sound.audioContext.currentTime - this.startTime);
this.stopInternal();
}
}
@@ -462,7 +465,7 @@ Sound.prototype = {
getCurrentTime: function() {
if (!this.node)
return this.nextStartTime;
- return this.nextStartTime + Sound.audioContext.currentTime - this.startTime;
+ return this.nextStartTime + this._playbackRate * (Sound.audioContext.currentTime - this.startTime);
},
setCurrentTime: function(time) {
@@ -491,14 +494,24 @@ Sound.prototype = {
},
setPlaybackRate: function(rate) {
+ var oldPlaybackRate = this._playbackRate;
this._playbackRate = rate;
if (this.buffer) {
+ this.nextStartTime = oldPlaybackRate * (Sound.audioContext.currentTime - this.startTime);
this.stopInternal();
this.playInternal();
}
},
+ getDefaultPlaybackRate: function() {
+ return this._defaultPlaybackRate;
+ },
+
+ setDefaultPlaybackRate: function(rate) {
+ this._defaultPlaybackRate = rate;
+ },
+
getVolume: function() {
return this._volume;
},
--
2.40.1