Add navigating example to demo

src/routes/+layout.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AudioManager } from '$lib/components/audio';
+</script>
+
+<AudioManager />
+
+<slot />

src/routes/+page.svelte

@@ -1,23 +1,19 @@
 <script lang="ts">
-	import { audio, AudioManager } from '$lib/components/audio';
+	import { audio } from '$lib/components/audio';
 
 	const sources = {
 		syntax: '/example-syntax.mp3',
 		knomii: '/example-knomii.mp3',
 	} as const;
+
+	let current_time = 0;
+	$: current_time = $audio.current_time;
 </script>
 
 <pre>{JSON.stringify($audio, null, 3)}</pre>
 
 <h1>Demo</h1>
-
+<a href="/another-page">Another Page</a>
-<AudioManager on:progress={(e) => console.log(e.detail)} />
-<!-- <progress
-	style="width: 960px; max-width:100%"
-	data-paused={$_paused ? 'true' : 'false'}
-	max={$_duration}
-	value={$_currentTime}
-/> -->
 
 <h5>Load Audio</h5>
 <button type="button" on:click={() => audio.load(sources['syntax'])}>Syntax</button>
@@ -40,6 +36,15 @@
 
 <h6>Seeking</h6>
 
+<input
+	type="range"
+	min={0}
+	max={$audio.duration}
+	style="width:100%"
+	bind:value={current_time}
+	on:change={(e) => audio.seek(parseInt(e.currentTarget.value))}
+/>
+
 <button type="button" on:click={() => audio.seek(30)}>Go to 30s from start </button>
 <button type="button" on:click={() => audio.seek(30, 'from-end')}>Go to 30s from end</button>
 <button type="button" on:click={() => audio.skip(10, 'forward')}>Skip 10s</button>

src/routes/another-page/+page.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { audio } from '$lib/components/audio';
+
+	const sources = {
+		syntax: '/example-syntax.mp3',
+		knomii: '/example-knomii.mp3',
+	} as const;
+
+	let current_time = 0;
+	$: current_time = $audio.current_time;
+</script>
+
+<h1>Demo</h1>
+
+<a href="/">Demo</a>
+
+<pre>{JSON.stringify($audio, null, 3)}</pre>