Live Waveform

1<script lang="ts">
2	import type { HTMLAttributes } from "svelte/elements";
3	import { cn } from "$UTILS$.js";
4 
5	export type LiveWaveformProps = HTMLAttributes<HTMLDivElement> & {
6		/**
7		 * When `true`, requests microphone access and drives the waveform from
8		 * live audio input. Toggling off stops the stream and closes the
9		 * audio context.
10		 * @default false
11		 */
12		active?: boolean;
13		/**
14		 * When `true` (and `active` is `false`), renders an animated placeholder
15		 * wave pattern. Use this to signal a processing or awaiting state.
16		 * @default false
17		 */
18		processing?: boolean;
19		/**
20		 * Specific `MediaDeviceInfo.deviceId` to capture from. Omit to use the
21		 * default microphone.
22		 */
23		deviceId?: string;
24		/**
25		 * Width of each bar in pixels.
26		 * @default 3
27		 */
28		barWidth?: number;
29		/**
30		 * Minimum bar height in pixels. Bars are drawn at least this tall even
31		 * when their value is near zero.
32		 * @default 4
33		 */
34		barHeight?: number;
35		/**
36		 * Gap between bars in pixels.
37		 * @default 1
38		 */
39		barGap?: number;
40		/**
41		 * Corner radius applied to each bar.
42		 * @default 1.5
43		 */
44		barRadius?: number;
45		/**
46		 * Custom bar color. Falls back to the canvas's computed `color` when
47		 * unset.
48		 */
49		barColor?: string;
50		/**
51		 * Fade the left and right edges of the waveform via a destination-out
52		 * gradient mask.
53		 * @default true
54		 */
55		fadeEdges?: boolean;
56		/**
57		 * Width of the edge fade region in pixels.
58		 * @default 24
59		 */
60		fadeWidth?: number;
61		/**
62		 * Height of the waveform container. Numbers are treated as pixels;
63		 * strings are passed through as a CSS length.
64		 * @default 64
65		 */
66		height?: string | number;
67		/**
68		 * Amplitude multiplier applied to normalized frequency data before
69		 * rendering. Higher values make quiet sounds visible.
70		 * @default 1
71		 */
72		sensitivity?: number;
73		/**
74		 * Smoothing factor forwarded to the underlying `AnalyserNode` in
75		 * `[0, 1]`. Higher values produce smoother transitions.
76		 * @default 0.8
77		 */
78		smoothingTimeConstant?: number;
79		/**
80		 * FFT size forwarded to the underlying `AnalyserNode`. Must be a power
81		 * of two.
82		 * @default 256
83		 */
84		fftSize?: number;
85		/**
86		 * Maximum number of samples retained in scrolling mode.
87		 * @default 60
88		 */
89		historySize?: number;
90		/**
91		 * Minimum interval in milliseconds between audio samples.
92		 * @default 30
93		 */
94		updateRate?: number;
95		/**
96		 * `"static"` renders a symmetric frequency-band visualization; `"scrolling"`
97// … truncated