refactor bindings + include start_at option

src/lib/components/audio-loader.svelte

@@ -4,28 +4,48 @@
 		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}
+	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)}
@@ -73,4 +93,3 @@
 		audio_metadata.update((m) => ({ ...m, duration }));
 	}}
 />
-{/key}

src/lib/context/audio-internals.ts

@@ -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,
 });

src/lib/context/audio.ts

@@ -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]) => {
+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),
-		...$metadata,
+			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;
+		audio_muted.update((muted) => !muted);
 	} else {
-			el.muted = true;
+		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;
+		audio_muted.update((muted) => !muted);
 	} else {
-			el.muted = false;
+		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') {

src/lib/types/types.ts

@@ -1,9 +1 @@
 export type PlayerElement = HTMLAudioElement | undefined;
-
-export type PlayerMetadata = {
-	duration: number;
-	muted: boolean;
-	paused: boolean;
-	playbackRate: number;
-	loading: boolean;
-};

src/routes/+page.svelte

@@ -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