Audio Wave

1<script lang="ts">
2	import { cn } from '$UTILS$';
3 
4	let {
5		playing = true,
6		bars = 4,
7		class: className,
8		barColor = 'bg-primary',
9		...rest
10	}: {
11		playing?: boolean;
12		bars?: number;
13		class?: string;
14		barColor?: string;
15		[key: string]: any;
16	} = $props();
17 
18	let heights = $state(Array(bars).fill(0.25));
19	let frame: number;
20 
21	function lerp(start: number, end: number, factor: number) {
22		return start + (end - start) * factor;
23	}
24 
25	$effect(() => {
26		if (heights.length !== bars) {
27			heights = Array(bars).fill(0.25);
28		}
29 
30		const animate = () => {
31			const time = performance.now() / 1000;
32 
33			heights = heights.map((h, i) => {
34				let target = 0.25;
35 
36				if (playing) {
37					const input = (time - i * 0.15) * (Math.PI * 2);
38					const sine = (Math.sin(input) + 1) / 2;
39					target = 0.25 + sine * 0.75;
40				}
41 
42				return lerp(h, target, 0.15);
43			});
44 
45			frame = requestAnimationFrame(animate);
46		};
47 
48		frame = requestAnimationFrame(animate);
49 
50		return () => cancelAnimationFrame(frame);
51	});
52</script>
53 
54<div class={cn('flex items-end justify-center gap-0.5 h-8', className)} {...rest}>
55	{#each heights as height, i}
56		<div class={cn('w-1 rounded-sm', barColor)} style="height: {height * 100}%;"></div>
57	{/each}
58</div>