diff --git a/src/lib/components/audio/audio.svelte b/src/lib/components/audio/audio.svelte
index 2b737ff..663061e 100644
--- a/src/lib/components/audio/audio.svelte
+++ b/src/lib/components/audio/audio.svelte
@@ -18,7 +18,7 @@
 	$: __internal_audio_metadata.update((x) => ({ ...x, muted }));
 </script>
 
-{#if src}
+{#key src}
 	<audio
 		bind:this={element}
 		{src}
@@ -73,4 +73,4 @@
 		}}
 	/>
 	<!-- <AudioA11yProgress {currentTime} {paused} {duration} /> -->
-{/if}
+{/key}
diff --git a/src/lib/components/audio/index.ts b/src/lib/components/audio/index.ts
new file mode 100644
index 0000000..d4a0c36
--- /dev/null
+++ b/src/lib/components/audio/index.ts
@@ -0,0 +1,2 @@
+export { default as AudioManager } from './audio.svelte';
+export { audio } from './store';
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 856f111..ede4569 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-	import Audio from '$lib/components/audio/audio.svelte';
-	import { audio } from '$lib/components/audio/store';
+	import { audio, AudioManager } from '$lib/components/audio';
 
 	const sources = {
 		syntax: '/example-syntax.mp3',
@@ -12,7 +11,7 @@
 
 <h1>Demo</h1>
 
-<Audio on:progress={(e) => console.log(e.detail)} />
+<AudioManager on:progress={(e) => console.log(e.detail)} />
 <!-- <progress
 	style="width: 960px; max-width:100%"
 	data-paused={$_paused ? 'true' : 'false'}