refactor bindings + include start_at option
This commit is contained in:
Ollie Taylor
@@ -4,73 +4,92 @@
|
||||
audio_current_time,
|
||||
audio_element,
|
||||
audio_metadata,
|
||||
audio_muted,
|
||||
audio_playback_rate,
|
||||
audio_src,
|
||||
audio_start_at,
|
||||
audio_volume,
|
||||
} from '$lib/context/audio-internals';
|
||||
import type { PlayerElement } from '$lib/types/types';
|
||||
import { isBoolean, isNumber } from '$pkg/type-guards';
|
||||
|
||||
let element: PlayerElement;
|
||||
let currentTime = 0;
|
||||
let muted = false;
|
||||
let currentTime = $audio_start_at;
|
||||
let volume = $audio_volume;
|
||||
|
||||
$: src = $audio_src;
|
||||
let duration = 0;
|
||||
let ended = true;
|
||||
let muted = false;
|
||||
let paused = false;
|
||||
let playbackRate = 1;
|
||||
|
||||
// Update stores based on bindings
|
||||
$: audio_element.set(element);
|
||||
$: audio_current_time.set(currentTime);
|
||||
$: audio_metadata.update((x) => ({ ...x, muted }));
|
||||
$: audio_metadata.update((x) => ({ ...x, duration, ended, paused }));
|
||||
|
||||
// Update bindings based on stores
|
||||
$: volume = $audio_volume;
|
||||
$: muted = $audio_muted;
|
||||
$: playbackRate = $audio_playback_rate;
|
||||
$: currentTime = $audio_start_at;
|
||||
</script>
|
||||
|
||||
{#key src}
|
||||
<audio
|
||||
bind:this={element}
|
||||
{src}
|
||||
autoplay={$audio_autoplay}
|
||||
bind:currentTime
|
||||
bind:muted
|
||||
preload="metadata"
|
||||
controls={false}
|
||||
on:canplay={(e) => false && console.log('canplay', e)}
|
||||
on:canplaythrough={(e) => false && console.log('canplaythrough', e)}
|
||||
on:timeupdate={(e) => false && console.log('progress', e)}
|
||||
on:loadedmetadata={(e) => false && console.log('loadedmetadata', e)}
|
||||
on:suspend={(e) => false && console.log('suspend', e)}
|
||||
on:seeked={(e) => false && console.log('seeked', e)}
|
||||
on:play={(e) => false && console.log('play', e)}
|
||||
on:waiting={(e) => console.log('waiting', e)}
|
||||
on:stalled={(e) => console.log('stalled', e)}
|
||||
on:load={(e) => console.log('load', e)}
|
||||
on:emptied={() => {
|
||||
// TODO: reset player state
|
||||
// console.log('emptied', e);
|
||||
}}
|
||||
on:loadeddata={() => {
|
||||
audio_metadata.update((m) => ({ ...m, loading: false }));
|
||||
}}
|
||||
on:loadstart={() => {
|
||||
audio_metadata.update((m) => ({ ...m, loading: true }));
|
||||
}}
|
||||
on:playing={(e) => {
|
||||
// @ts-expect-error event is not fully typed
|
||||
const is_paused = e.target.paused;
|
||||
if (!isBoolean(is_paused)) return;
|
||||
audio_metadata.update((m) => ({ ...m, paused: is_paused }));
|
||||
}}
|
||||
on:pause={(e) => {
|
||||
// @ts-expect-error event is not fully typed
|
||||
const is_paused = e.target.paused;
|
||||
if (!isBoolean(is_paused)) return;
|
||||
audio_metadata.update((m) => ({ ...m, paused: is_paused }));
|
||||
}}
|
||||
on:ratechange={(e) => {
|
||||
// @ts-expect-error event is not fully typed
|
||||
const playbackRate = e.target.playbackRate;
|
||||
if (!isNumber(playbackRate)) return;
|
||||
audio_metadata.update((m) => ({ ...m, playbackRate }));
|
||||
}}
|
||||
on:durationchange={(e) => {
|
||||
// @ts-expect-error event is not fully typed
|
||||
const duration = e.target?.duration;
|
||||
if (!isNumber(duration)) return;
|
||||
audio_metadata.update((m) => ({ ...m, duration }));
|
||||
}}
|
||||
/>
|
||||
{/key}
|
||||
<audio
|
||||
bind:this={element}
|
||||
src={$audio_src}
|
||||
autoplay={$audio_autoplay}
|
||||
bind:currentTime
|
||||
bind:muted
|
||||
bind:duration
|
||||
bind:paused
|
||||
bind:playbackRate
|
||||
bind:volume
|
||||
bind:ended
|
||||
preload="metadata"
|
||||
controls={false}
|
||||
on:canplay={(e) => false && console.log('canplay', e)}
|
||||
on:canplaythrough={(e) => false && console.log('canplaythrough', e)}
|
||||
on:timeupdate={(e) => false && console.log('progress', e)}
|
||||
on:loadedmetadata={(e) => false && console.log('loadedmetadata', e)}
|
||||
on:suspend={(e) => false && console.log('suspend', e)}
|
||||
on:seeked={(e) => false && console.log('seeked', e)}
|
||||
on:play={(e) => false && console.log('play', e)}
|
||||
on:waiting={(e) => console.log('waiting', e)}
|
||||
on:stalled={(e) => console.log('stalled', e)}
|
||||
on:load={(e) => console.log('load', e)}
|
||||
on:emptied={() => {
|
||||
// TODO: reset player state
|
||||
// console.log('emptied', e);
|
||||
}}
|
||||
on:loadeddata={() => {
|
||||
audio_metadata.update((m) => ({ ...m, loading: false }));
|
||||
}}
|
||||
on:loadstart={() => {
|
||||
audio_metadata.update((m) => ({ ...m, loading: true }));
|
||||
}}
|
||||
on:playing={(e) => {
|
||||
// @ts-expect-error event is not fully typed
|
||||
const is_paused = e.target.paused;
|
||||
if (!isBoolean(is_paused)) return;
|
||||
audio_metadata.update((m) => ({ ...m, paused: is_paused }));
|
||||
}}
|
||||
on:pause={(e) => {
|
||||
// @ts-expect-error event is not fully typed
|
||||
const is_paused = e.target.paused;
|
||||
if (!isBoolean(is_paused)) return;
|
||||
audio_metadata.update((m) => ({ ...m, paused: is_paused }));
|
||||
}}
|
||||
on:ratechange={(e) => {
|
||||
// @ts-expect-error event is not fully typed
|
||||
const playbackRate = e.target.playbackRate;
|
||||
if (!isNumber(playbackRate)) return;
|
||||
audio_metadata.update((m) => ({ ...m, playbackRate }));
|
||||
}}
|
||||
on:durationchange={(e) => {
|
||||
// @ts-expect-error event is not fully typed
|
||||
const duration = e.target?.duration;
|
||||
if (!isNumber(duration)) return;
|
||||
audio_metadata.update((m) => ({ ...m, duration }));
|
||||
}}
|
||||
/>
|
||||
|
||||
@@ -1,15 +1,30 @@
|
||||
import type { PlayerElement, PlayerMetadata } from '$lib/types/types';
|
||||
import type { PlayerElement } from '$lib/types/types';
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
export const audio_element = writable<PlayerElement>();
|
||||
export const audio_current_time = writable<number>(0);
|
||||
export const audio_src = writable<string | null>(null);
|
||||
export const audio_start_at = writable<number>(0);
|
||||
|
||||
export const audio_autoplay = writable<boolean>(false);
|
||||
export const audio_current_time = writable<number>(0);
|
||||
export const audio_muted = writable<boolean>(false);
|
||||
export const audio_playback_rate = writable<number>(1);
|
||||
export const audio_src = writable<string>('');
|
||||
export const audio_volume = writable<number>(1);
|
||||
|
||||
export type PlayerMetadata = {
|
||||
duration: number;
|
||||
// muted: boolean;
|
||||
paused: boolean;
|
||||
// playbackRate: number;
|
||||
loading: boolean;
|
||||
ended: boolean;
|
||||
};
|
||||
|
||||
export const audio_metadata = writable<PlayerMetadata>({
|
||||
duration: 0,
|
||||
muted: false,
|
||||
paused: true,
|
||||
playbackRate: 1,
|
||||
ended: false,
|
||||
loading: false,
|
||||
paused: true,
|
||||
// muted: false,
|
||||
// playbackRate: 1,
|
||||
});
|
||||
|
||||
+48
-33
@@ -3,20 +3,40 @@ import {
|
||||
audio_current_time,
|
||||
audio_element,
|
||||
audio_metadata,
|
||||
audio_muted,
|
||||
audio_playback_rate,
|
||||
audio_src,
|
||||
audio_start_at,
|
||||
audio_volume,
|
||||
} from '$lib/context/audio-internals';
|
||||
import { secondsToTimestamp } from '$lib/utility/seconds-to-timestamp';
|
||||
import { info, warn } from '$pkg/log';
|
||||
import clamp from 'just-clamp';
|
||||
import { derived } from 'svelte/store';
|
||||
|
||||
const audio_state = derived([audio_metadata, audio_current_time], ([$metadata, $current_time]) => {
|
||||
return {
|
||||
current_time: $current_time,
|
||||
timestamp: secondsToTimestamp($current_time),
|
||||
...$metadata,
|
||||
};
|
||||
});
|
||||
const audio_state = derived(
|
||||
[
|
||||
audio_metadata,
|
||||
audio_autoplay,
|
||||
audio_current_time,
|
||||
audio_muted,
|
||||
audio_playback_rate,
|
||||
audio_src,
|
||||
audio_volume,
|
||||
],
|
||||
([$metadata, $autoplay, $current_time, $muted, $playback_rate, $src, $volume]) => {
|
||||
return {
|
||||
...$metadata,
|
||||
autoplay: $autoplay,
|
||||
current_time: $current_time,
|
||||
timestamp: secondsToTimestamp($current_time),
|
||||
muted: $muted,
|
||||
playback_rate: $playback_rate,
|
||||
src: $src,
|
||||
volume: $volume,
|
||||
};
|
||||
},
|
||||
);
|
||||
|
||||
type HandleType = 'toggle' | 'set';
|
||||
|
||||
@@ -45,52 +65,47 @@ function pause(type: HandleType = 'set') {
|
||||
|
||||
function mute(type: HandleType = 'set') {
|
||||
info('mute: ', type);
|
||||
return audio_element.subscribe((el) => {
|
||||
if (!el) return warn('no audio element');
|
||||
if (type === 'toggle') {
|
||||
el.muted = !el.muted;
|
||||
} else {
|
||||
el.muted = true;
|
||||
}
|
||||
})();
|
||||
if (type === 'toggle') {
|
||||
audio_muted.update((muted) => !muted);
|
||||
} else {
|
||||
audio_muted.set(true);
|
||||
}
|
||||
}
|
||||
function unmute(type: HandleType = 'set') {
|
||||
info('unmute: ', type);
|
||||
return audio_element.subscribe((el) => {
|
||||
if (!el) return warn('no audio element');
|
||||
if (type === 'toggle') {
|
||||
el.muted = !el.muted;
|
||||
} else {
|
||||
el.muted = false;
|
||||
}
|
||||
})();
|
||||
if (type === 'toggle') {
|
||||
audio_muted.update((muted) => !muted);
|
||||
} else {
|
||||
audio_muted.set(false);
|
||||
}
|
||||
}
|
||||
|
||||
type LoadOptions = {
|
||||
autoplay: boolean;
|
||||
start_at?: number;
|
||||
};
|
||||
|
||||
function load(src: string, opts: LoadOptions) {
|
||||
info('load: ', src);
|
||||
audio_autoplay.set(opts.autoplay);
|
||||
audio_volume.set(1);
|
||||
audio_src.set(src);
|
||||
return audio_element.subscribe((el) => {
|
||||
if (!el) return warn('no audio element');
|
||||
el.volume = 1;
|
||||
el.pause();
|
||||
})();
|
||||
audio_start_at.set(opts.start_at || 0);
|
||||
// opts.current_time ? seek(opts.current_time) : null;
|
||||
//opts.autoplay && play();
|
||||
}
|
||||
function unload() {
|
||||
info('unload: ');
|
||||
audio_src.set(null);
|
||||
pause();
|
||||
audio_autoplay.set(false);
|
||||
audio_volume.set(1);
|
||||
audio_src.set('');
|
||||
audio_start_at.set(0);
|
||||
}
|
||||
|
||||
function setPlaybackRate(rate: number) {
|
||||
info('setPlaybackRate: ', rate);
|
||||
return audio_element.subscribe((el) => {
|
||||
if (!el) return warn('no audio element');
|
||||
el.playbackRate = clamp(0, 10, rate);
|
||||
})();
|
||||
audio_playback_rate.set(clamp(0, 10, rate));
|
||||
}
|
||||
|
||||
function seek(seconds: number, from: 'from-start' | 'from-end' = 'from-start') {
|
||||
|
||||
@@ -1,9 +1 @@
|
||||
export type PlayerElement = HTMLAudioElement | undefined;
|
||||
|
||||
export type PlayerMetadata = {
|
||||
duration: number;
|
||||
muted: boolean;
|
||||
paused: boolean;
|
||||
playbackRate: number;
|
||||
loading: boolean;
|
||||
};
|
||||
|
||||
@@ -16,8 +16,9 @@
|
||||
<a href="/another-page">Another Page</a>
|
||||
|
||||
<h5>Load Audio</h5>
|
||||
<button type="button" on:click={() => audio.load(sources['syntax'], { autoplay: true })}
|
||||
>Syntax</button
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => audio.load(sources['syntax'], { autoplay: true, start_at: 45 })}>Syntax</button
|
||||
>
|
||||
<button type="button" on:click={() => audio.load(sources['knomii'], { autoplay: false })}
|
||||
>Knomii</button
|
||||
|
||||
Reference in New Issue
Block a user