-
-
Notifications
You must be signed in to change notification settings - Fork 25
/
fade.ts
55 lines (49 loc) · 1.38 KB
/
fade.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
function easeInOutQuad(
elapsed: number,
startValue: number,
valueChange: number,
duration: number
) {
if ((elapsed /= duration / 2) < 1) {
return (valueChange / 2) * elapsed * elapsed + startValue;
}
return (-valueChange / 2) * (--elapsed * (elapsed - 2) - 1) + startValue;
}
/**
* A utility function that gradually changes an <audio> element's volume to a
* new value. This uses Robert Penner's easing equation (see
* ).
* @param el element whose volume to change
* @param volume volume, 0-1, to change to
* @param duration transition duration in milliseconds
* @see https://github.com/danro/jquery-easing/blob/master/jquery.easing.js
*/
export default function fadeAudioEl(
el: HTMLAudioElement,
volume: number,
duration: number
): Promise<void> {
const startValue = el.volume;
const valueChange = volume - startValue;
let lastTimestamp: number;
let elapsed = 0;
if (el.volume === volume) {
return Promise.resolve();
}
return new Promise(resolve =>
window.requestAnimationFrame(timestamp => {
function step(timestamp: number) {
elapsed += timestamp - lastTimestamp;
el.volume = easeInOutQuad(elapsed, startValue, valueChange, duration);
if (elapsed < duration) {
lastTimestamp = timestamp;
window.requestAnimationFrame(step);
} else {
resolve();
}
}
lastTimestamp = timestamp;
window.requestAnimationFrame(step);
})
);
}