diff --git a/src/lib/components/audio-loader.svelte b/src/lib/components/audio-loader.svelte
index f46a025..7da7037 100644
--- a/src/lib/components/audio-loader.svelte
+++ b/src/lib/components/audio-loader.svelte
@@ -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 }));
+	}}
+/>
diff --git a/src/lib/context/audio-internals.ts b/src/lib/context/audio-internals.ts
index cfe7a51..7ea9f00 100644
--- a/src/lib/context/audio-internals.ts
+++ b/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,
 });
diff --git a/src/lib/context/audio.ts b/src/lib/context/audio.ts
index 0a4e4b5..f513ab4 100644
--- a/src/lib/context/audio.ts
+++ b/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]) => {
-	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') {
diff --git a/src/lib/types/types.ts b/src/lib/types/types.ts
index 6e5c9a3..d8ee92f 100644
--- a/src/lib/types/types.ts
+++ b/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;
-};
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c775cfe..ea813e6 100644
--- a/src/routes/+page.svelte
+++ b/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