Live Waveform

Real-time canvas-based audio waveform visualizer with microphone input and customizable rendering modes.

Live Audio Waveform

Real-time microphone input visualization with audio reactivity

Installation

npx shadcn-svelte@latest add https://sv11.ui.twango.dev/r/live-waveform.json

Usage

<script lang="ts">
	import { LiveWaveform } from "$lib/registry/ui/live-waveform";
</script>
 
<LiveWaveform />

Examples

Static Mode

Render a symmetric frequency-band visualization with bars in fixed positions.

<script lang="ts">
	import { LiveWaveform } from "$lib/registry/ui/live-waveform";
</script>
 
<LiveWaveform active mode="static" />

Scrolling Mode

Render the volume average as a timeline that scrolls right-to-left.

<script lang="ts">
	import { LiveWaveform } from "$lib/registry/ui/live-waveform";
</script>
 
<LiveWaveform active mode="scrolling" />

Processing State

processing animates a placeholder wave while you wait for audio. The bars ease back to idle when both active and processing turn off.

<script lang="ts">
	import { LiveWaveform } from "$lib/registry/ui/live-waveform";
</script>
 
<LiveWaveform processing mode="static" />

Custom Styling

Every rendering parameter is a plain prop — adjust bar geometry, color, height, and edge fade inline.

<script lang="ts">
	import { LiveWaveform } from "$lib/registry/ui/live-waveform";
</script>
 
<LiveWaveform
	active
	barWidth={4}
	barHeight={6}
	barGap={2}
	barColor="#3b82f6"
	height={100}
	fadeEdges
/>

API Reference

Prop	Type	Default	Description
`active?`	`boolean`	`false`	When `true`, requests microphone access and drives the waveform from live audio input. Toggling off stops the stream and closes the audio context.
`processing?`	`boolean`	`false`	When `true` (and `active` is `false`), renders an animated placeholder wave pattern. Use this to signal a processing or awaiting state.
`deviceId?`	`string`	—	Specific `MediaDeviceInfo.deviceId` to capture from. Omit to use the default microphone.
`barWidth?`	`number`	`3`	Width of each bar in pixels.
`barHeight?`	`number`	`4`	Minimum bar height in pixels. Bars are drawn at least this tall even when their value is near zero.
`barGap?`	`number`	`1`	Gap between bars in pixels.
`barRadius?`	`number`	`1.5`	Corner radius applied to each bar.
`barColor?`	`string`	—	Custom bar color. Falls back to the canvas's computed `color` when unset.
`fadeEdges?`	`boolean`	`true`	Fade the left and right edges of the waveform via a destination-out gradient mask.
`fadeWidth?`	`number`	`24`	Width of the edge fade region in pixels.
`height?`	`string \| number`	`64`	Height of the waveform container. Numbers are treated as pixels; strings are passed through as a CSS length.
`sensitivity?`	`number`	`1`	Amplitude multiplier applied to normalized frequency data before rendering. Higher values make quiet sounds visible.
`smoothingTimeConstant?`	`number`	`0.8`	Smoothing factor forwarded to the underlying `AnalyserNode` in `[0, 1]`. Higher values produce smoother transitions.
`fftSize?`	`number`	`256`	FFT size forwarded to the underlying `AnalyserNode`. Must be a power of two.
`historySize?`	`number`	`60`	Maximum number of samples retained in scrolling mode.
`updateRate?`	`number`	`30`	Minimum interval in milliseconds between audio samples.
`mode?`	`"scrolling" \| "static"`	`"static"`	`"static"` renders a symmetric frequency-band visualization; `"scrolling"` renders the volume average as a timeline that scrolls right-to-left.
`onError?`	`(error: Error) => void`	—	Called when microphone setup fails (e.g. permission denied).
`onStreamReady?`	`(stream: MediaStream) => void`	—	Called with the captured `MediaStream` once the microphone is ready.
`onStreamEnd?`	`() => void`	—	Called when the stream is stopped or `active` flips back to `false`.

Notes

Uses the Web Audio API via AnalyserNode for real-time frequency analysis.
Automatically requests microphone permission when active becomes true and tears down the stream and audio context when it flips back to false.
Canvas rendering is HiDPI-aware — internal ResizeObserver scales the drawing buffer by devicePixelRatio.
mode="static" draws symmetric frequency bars in fixed positions; mode="scrolling" maintains a historySize-length ring buffer of volume averages that scrolls right-to-left.
processing smoothly crossfades from the last active frame into the synthetic wave, and a fade-out pass clears the canvas when both flags are off.
deviceId selects a specific input via MediaDeviceInfo.deviceId; omit to use the default microphone.
onStreamReady / onStreamEnd / onError are fire-and-forget callbacks for wiring the lifecycle into app state.

Conversation Matrix