Audio Visualizer Bar
Canvas audio spectrum visualizer with mel-scale frequency bands.
Open in Storybook
Installation
pnpm dlx shadcn@latest add @pipecat/audio-visualizer-barUsage
import {
AudioVisualizerBar,
AudioVisualizerBarView,
} from "@/components/pipecat/audio-visualizer-bar";
// Connected: visualize a Pipecat participant's audio
<AudioVisualizerBar participantType="bot" barCount={8} />
// View: visualize any MediaStreamTrack
<AudioVisualizerBarView track={myTrack} barOrigin="bottom" />Bars default to currentColor, so the visualizer inherits its parent's text color — drop
it inside a button or set text-active on a wrapper to tint it.
Key props
| Prop | Type | Description |
|---|---|---|
participantType | "local" | "bot" | Whose audio to visualize (connected) |
track | MediaStreamTrack | null | Audio source (View); idle dots when null |
barCount / barWidth / barGap / barMaxHeight | number | Geometry |
barOrigin | "top" | "bottom" | "center" | Where bars grow from |
barSpeed | number | How fast bars chase the spectrum while speaking (0–1 per frame, default 0.5; 1 disables smoothing) |
barColor | string | Any CSS color, currentColor, or a --css-var name |
noPeaks + peak* | Falling peak-line behavior | |
isConnecting | boolean | Override: rolls opacity across the resting dots (wins over isThinking) |
isThinking | boolean | Override: traveling wave while the bot works on a response |
connectingSpeed | number | Opacity-roll speed for the connecting override |
thinkingSpeed / thinkingWaveWidth / thinkingHeight / thinkingAlpha | number | Thinking-wave speed, tightness, height as a fraction of barMaxHeight (default 0.25), and trough opacity (default 0.5, crests at 1) |
Bands are tuned for voice: they span 200 Hz–8 kHz on the mel scale, with speech's natural high-frequency rolloff compensated so the upper bars compete fairly with the formant region.
Silent and speaking need no props — the visualizer derives them from the track. The
overrides opt into the other two lifecycle states, and every state change eases briefly
instead of snapping. VisualizerState — the vocabulary shared by all kit visualizers
("connecting" | "silent" | "speaking" | "thinking", from
components/pipecat/visualizer.ts, installed with this item) — is exposed on the canvas
as data-state.