GitHub 0

Bar Visualizer

Previous Next

Audio frequency band visualizer with agent state animations. Renders a row of animated bars driven by a MediaStream via Web Audio's AnalyserNode, with built-in demo mode.

Audio Frequency Visualizer
Real-time frequency band visualization with animated state transitions

Installation

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

Usage

<script lang="ts">
	import { BarVisualizer } from "$lib/registry/ui/bar-visualizer";
</script>
 
<BarVisualizer />

Examples

Basic Usage

Pipe a live MediaStream into the visualizer. The FFT slice is analysed on every frame and mapped onto barCount bars.

<script lang="ts">
	import { BarVisualizer } from "$lib/registry/ui/bar-visualizer";
 
	let stream: MediaStream | null = $state(null);
</script>
 
<BarVisualizer state="listening" barCount={15} mediaStream={stream} />

Demo Mode

Set demo to swap live audio for a synthetic oscillating pattern. Handy for previews where no microphone is available.

<BarVisualizer state="speaking" demo centerAlign />

Agent State

Drive the highlight sequence and animation cadence from an agent lifecycle value. "thinking" pulses, "connecting" sweeps, "listening" and "speaking" emphasise the active bars.

<script lang="ts">
	import { BarVisualizer, type AgentState } from "$lib/registry/ui/bar-visualizer";
 
	let state: AgentState = $state("connecting");
</script>
 
<BarVisualizer {state} demo />

Height Range

Tune the usable vertical band by adjusting minHeight and maxHeight (both percentages of the container).

<BarVisualizer state="speaking" demo minHeight={15} maxHeight={90} />

API Reference

Prop Type Default Description
state? AgentState — Voice-agent lifecycle state. Drives the bar highlight sequence and animation cadence. Leave undefined for a static row.
barCount? number 15 Number of bars to render across the visualizer.
mediaStream? MediaStream | null — Live audio source used for FFT analysis. Ignored when demo is true. Pass null to disable analysis without unmounting.
minHeight? number 20 Minimum bar height as a percentage of the container.
maxHeight? number 100 Maximum bar height as a percentage of the container.
demo? boolean false When true, replaces the FFT feed with a synthetic oscillating pattern. Useful for previews and documentation.
centerAlign? boolean false Align bars from the vertical center rather than growing up from the bottom.
ref? HTMLDivElement | null $bindable(null) Bound reference to the root container element.

Notes

  • Analysis uses a Web Audio AnalyserNode with fftSize: 2048, sampling a mid-range slice of the spectrum and averaging each chunk into a bar.
  • demo overrides mediaStream — the synthetic pattern is always active when demo is true, regardless of stream.
  • The state sequencer runs independently of volume sampling, so state animates even without audio input.
  • Bars update on requestAnimationFrame with a throttled diff check (changes under 0.01 are ignored) to minimise re-renders.
  • centerAlign swaps the flex alignment from items-end to items-center, growing bars equally above and below the midline.