From 5f1509d41e4c01615c4d50978fade3cd121925f5 Mon Sep 17 00:00:00 2001
From: Jer Noble <jer.noble@apple.com>
Date: Tue, 27 Jan 2015 18:17:36 +0100
Subject: [PATCH] Add rate changed events; add a rate slider; parse incoming
floats to ensure valid math operations.
---
sound.html | 17 +++++++++++++----
sound.js | 17 +++++++++--------
2 files changed, 22 insertions(+), 12 deletions(-)
diff --git a/sound.html b/sound.html
index 3982cee..af49cce 100644
--- 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>
diff --git a/sound.js b/sound.js
index 355cfd4..8fcac31 100644
--- a/sound.js
+++ b/sound.js
@@ -240,7 +240,7 @@ Sound.prototype = {
return;
if (this._ended) {
- if this._playbackRate > 0)
+ if (this._playbackRate > 0)
this.setCurrentTime(0);
else
this.setCurrentTime(this.duration)
@@ -469,7 +469,7 @@ Sound.prototype = {
},
setCurrentTime: function(time) {
- this.nextStartTime = time;
+ this.nextStartTime = parseFloat(time);
this.dispatchEventAsync(new CustomEvent('timeupdate'));
if (!this.node)
return;
@@ -495,12 +495,12 @@ Sound.prototype = {
setPlaybackRate: function(rate) {
var oldPlaybackRate = this._playbackRate;
- this._playbackRate = rate;
+ this._playbackRate = parseFloat(rate);
+ this.dispatchEventAsync(new CustomEvent('ratechange'));
- if (this.buffer) {
+ if (this.node) {
this.nextStartTime = oldPlaybackRate * (Sound.audioContext.currentTime - this.startTime);
- this.stopInternal();
- this.playInternal();
+ this.node.playbackRate.value = this._playbackRate;
}
},
@@ -509,7 +509,8 @@ Sound.prototype = {
},
setDefaultPlaybackRate: function(rate) {
- this._defaultPlaybackRate = rate;
+ this._defaultPlaybackRate = parseFloat(rate);
+ this.dispatchEventAsync(new CustomEvent('ratechange'));
},
getVolume: function() {
@@ -520,7 +521,7 @@ Sound.prototype = {
if (this._volume === volume)
return;
- this._volume = volume;
+ this._volume = parseFloat(volume);
this.dispatchEventAsync(new CustomEvent('volumechange'));
if (this.gainNode)
--
2.40.1