PaceUI

Intro
Agents
Crafts
Charts
Motion
PreviousNext

Audio Visualizer

A pure audio waveform visualizer supporting start/stop active states and streaming text back piece-by-piece with automatic completion and a flowing right-to-left wave effect.

Sizes

Available across sm, default, and lg variants.

Permission

Prompting browser microphone permissions before audio listening starts.

When to use

  • Voice prompts and audio recording controls in agentic composers.
  • Real-time speech transcription streaming where text is fed into the visualizer to stream back piece by piece until complete.
  • Voice assistant state feedback (active waveform vs. idle dotted line).

When not to use

  • Full-width high-frequency audio spectrograms requiring heavy canvas rendering.

API Reference

AudioVisualizerProps

PropTypeDefaultDescription
isActivebooleanfalseWhether the visualizer is actively recording/listening.
demoTextstring—Simulated demo transcript passed to the component to stream back piece by piece.
onSpeech(piece: string) => void—Callback fired with transcript pieces one-by-one while active.
onComplete() => void—Callback fired when the entire transcript has finished streaming so audio can automatically stop.
wordIntervalMsnumber320Average interval between word emissions in milliseconds.
barCountnumber16Number of waveform bars rendered in the visualizer.
size"sm" | "default" | "lg""default"Size variant of the visualizer dots and bars.
classNamestring—Additional CSS classes for the container.

Motion

  • Deterministic wave flow maintains strict right-to-left phase delay for a natural soundwave feel.
  • Randomized harmonic wave profile generated fresh on every start without size jump or layout shift.
  • Idle state renders subtle dotted line morphing smoothly into active bars.