Audio

1<script lang="ts">
2	import { cn } from '$UTILS$';
3	import { setAudioPlayerContext } from './ctx';
4	import type { Snippet } from 'svelte';
5 
6	let {
7		src,
8		class: className,
9		children
10	}: {
11		src: string;
12		class?: string;
13		children: Snippet;
14	} = $props();
15 
16	let audio: HTMLAudioElement;
17 
18	let isPaused = $state(true);
19	let duration = $state(0);
20	let currentTime = $state(0);
21	let volume = $state(1);
22	let isMuted = $state(false);
23 
24	function togglePlay() {
25		if (!audio) return;
26		if (audio.paused) {
27			audio.play();
28		} else {
29			audio.pause();
30		}
31	}
32 
33	function seek(time: number) {
34		if (!audio) return;
35		audio.currentTime = time;
36		currentTime = time;
37	}
38 
39	function setVolume(v: number) {
40		if (!audio) return;
41		audio.volume = v;
42		volume = v;
43	}
44 
45	function toggleMute() {
46		isMuted = !isMuted;
47	}
48 
49	setAudioPlayerContext({
50		get isPlaying() {
51			return { value: !isPaused };
52		},
53		get duration() {
54			return { value: duration };
55		},
56		get currentTime() {
57			return { value: currentTime };
58		},
59		get volume() {
60			return { value: volume };
61		},
62		get isMuted() {
63			return { value: isMuted };
64		},
65		togglePlay,
66		seek,
67		setVolume,
68		toggleMute
69	});
70</script>
71 
72<div
73	class={cn(
74		'relative overflow-hidden rounded-xl border bg-card text-card-foreground shadow-sm',
75		className
76	)}
77>
78	<audio
79		bind:this={audio}
80		{src}
81		bind:paused={isPaused}
82		bind:currentTime
83		bind:duration
84		bind:volume
85		bind:muted={isMuted}
86	></audio>
87	{@render children()}
88</div>