Audio Player

1<script lang="ts" module>
2	import type { Snippet } from "svelte";
3 
4	export type AudioPlayerProps = {
5		/**
6		 * Sub-components that read the shared player state via context
7		 * (e.g. `<AudioPlayer.Button />`, `<AudioPlayer.Progress />`).
8		 */
9		children?: Snippet;
10	};
11</script>
12 
13<script lang="ts">
14	import { setAudioPlayer } from "./context.svelte.js";
15 
16	let { children }: AudioPlayerProps = $props();
17 
18	const player = setAudioPlayer();
19 
20	let audioEl: HTMLAudioElement | null = $state(null);
21 
22	$effect(() => {
23		player.audio = audioEl;
24	});
25 
26	$effect(() => {
27		let raf: number | null = null;
28		const tick = () => {
29			const el = player.audio;
30			if (el) {
31				player.time = el.currentTime;
32				player.readyState = el.readyState;
33				player.networkState = el.networkState;
34				player.paused = el.paused;
35				player.error = el.error;
36				player.playbackRate = el.playbackRate;
37				const d = el.duration;
38				if (Number.isFinite(d) && player.duration !== d) {
39					player.duration = d;
40				}
41			}
42			raf = requestAnimationFrame(tick);
43		};
44		raf = requestAnimationFrame(tick);
45		return () => {
46			if (raf !== null) cancelAnimationFrame(raf);
47		};
48	});
49</script>
50 
51<audio
52	bind:this={audioEl}
53	data-slot="audio-player"
54	ondurationchange={(e) => {
55		const d = e.currentTarget.duration;
56		player.duration = Number.isFinite(d) ? d : undefined;
57	}}
58	onloadedmetadata={(e) => {
59		const d = e.currentTarget.duration;
60		player.duration = Number.isFinite(d) ? d : undefined;
61	}}
62	onplay={() => (player.paused = false)}
63	onpause={() => (player.paused = true)}
64	onerror={() => (player.error = audioEl?.error ?? null)}
65	class="hidden"
66	crossorigin="anonymous"
67></audio>
68{@render children?.()}