Initial Player Component (#2)

src/lib/components/audio-a11y-progress.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	export let currentTime: number;
+	export let paused: boolean;
+	export let duration: number;
+</script>
+
+<progress
+	class="svelte-podcast-a11y-hidden"
+	data-paused={paused ? 'true' : 'false'}
+	max={duration}
+	value={currentTime}
+/>
+
+<style>
+	.svelte-podcast-a11y-hidden {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
+</style>

src/lib/components/audio.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import AudioA11yProgress from '$lib/components/audio-a11y-progress.svelte';
+	import { createEventDispatcher } from 'svelte';
+	import { usePlayer, type PlayerElement } from './audio';
+
+	// TODO: Abstract to a store so we can add actions like reqind 20s
+
+	export let src: string;
+	export let autoplay: boolean;
+
+	export let currentTime = 0;
+	export let muted = false;
+	export let paused = true;
+	export let playbackRate = 1;
+	export let volume = 0;
+
+	let audioElement: PlayerElement;
+
+	$: usePlayer(audioElement, 'playbackRate', playbackRate);
+
+	const dispatch = createEventDispatcher<{
+		playing: void;
+		finished: void;
+		paused: { currentTime: number };
+		progress: { currentTime: number };
+		seek: { currentTime: number };
+		rateChange: { playbackRate: number };
+	}>();
+
+	let duration = 0;
+</script>
+
+{#key src}
+	<audio
+		bind:this={audioElement}
+		{src}
+		{autoplay}
+		bind:currentTime
+		bind:duration
+		bind:paused
+		bind:muted
+		bind:volume
+		preload="metadata"
+		controls={false}
+		on:timeupdate={() => dispatch('progress', { currentTime })}
+		on:playing={() => dispatch('playing')}
+		on:pause={() => dispatch('paused', { currentTime })}
+		on:ratechange={() => dispatch('rateChange', { playbackRate })}
+		on:ended={() => dispatch('finished')}
+		on:seeked={() => dispatch('seek', { currentTime })}
+		on:durationchange={() => console.log('durationchange')}
+		on:loadeddata={() => console.log('loaded data')}
+		on:loadedmetadata={() => console.log('loadedmetadata')}
+		on:loadstart={() => console.log('load start')}
+		on:seeking={() => console.log('seeking')}
+		on:suspend={() => console.log('suspend')}
+		on:volumechange={() => console.log('volumechange')}
+		on:play={() => console.log('play')}
+		on:canplay={() => console.log('canplay')}
+		on:canplaythrough={() => console.log('canplaythrough')}
+		on:waiting={() => console.log('waiting')}
+		on:stalled={(e) => console.log('stalled', e)}
+		on:emptied={(e) => console.log('emptied', e)}
+		on:load={(e) => console.log('load', e)}
+	/>
+	<AudioA11yProgress {currentTime} {paused} {duration} />
+	<slot {duration} />
+{/key}

src/lib/components/audio.ts

@@ -0,0 +1,10 @@
+export type PlayerElement = HTMLAudioElement | undefined;
+
+export function usePlayer<K extends keyof HTMLAudioElement>(
+	el: PlayerElement,
+	key: K,
+	value: HTMLAudioElement[K]
+) {
+	if (!el) return;
+	el[key] = value;
+}

src/routes/+page.svelte

@@ -1,3 +1,52 @@
-<h1>Welcome to your library project</h1>
+<script>
-<p>Create your package using @sveltejs/package and preview/showcase your work with SvelteKit</p>
+	import Audio from '$lib/components/audio.svelte';
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+
+	let playbackRate = 1;
+	let volume = 0.5;
+	let paused = true;
+
+	let currentTime = 0;
+</script>
+
+<h1>Demo</h1>
+
+<h5>Native audio controls</h5>
+<Audio
+	on:progress={(e) => console.log(e.detail)}
+	src="/example.mp3"
+	autoplay={false}
+	{volume}
+	{playbackRate}
+	{paused}
+	bind:currentTime
+	let:duration
+>
+	<progress data-paused={paused ? 'true' : 'false'} max={duration} value={currentTime} />
+
+	<h5>Custom audio controls</h5>
+
+	<h6>Audio Actions</h6>
+
+	<button type="button" on:click={() => (paused = false)}>Play</button>
+	<button type="button" on:click={() => (paused = true)}>Pause</button>
+	<button type="button" on:click={() => (paused = !paused)}>Toggle</button>
+
+	<h6>Seeking</h6>
+
+	<button type="button" on:click={() => (currentTime = currentTime + 5)}>Skip 5s</button>
+	<button type="button" on:click={() => (currentTime = currentTime - 5)}>Rewind 5s</button>
+	<button type="button" on:click={() => (currentTime = 30)}>Go to 30s</button>
+	<button type="button" on:click={() => (currentTime = duration - 30)}>Go to 30s before end</button>
+
+	<h6>Playback Rate</h6>
+
+	{#each [0.5, 1, 2, 3] as rate}
+		<button type="button" on:click={() => (playbackRate = rate)}>{rate}x</button>
+	{/each}
+
+	<h6>Volume</h6>
+
+	{#each [0, 0.25, 0.5, 0.75, 1] as v}
+		<button type="button" on:click={() => (volume = v)}>{v * 100}%</button>
+	{/each}
+</Audio>