Getting Started
Components
Text Animations
Backgrounds
Live Audio Waveform
Real-time microphone input visualization with audio reactivity
Installation
pnpm dlx shadcn@latest add @gammaui/live-waveform
Usage
import { LiveWaveform } from "@/components/ui/live-waveform"<LiveWaveform active={true} />Examples
Static Mode
<LiveWaveform active={true} mode="static" />Scrolling Mode
<LiveWaveform active={true} mode="scrolling" />Processing State
Shows an animated wave pattern while waiting for input.
<LiveWaveform processing={true} mode="static" />Custom Styling
<LiveWaveform
active={true}
barWidth={4}
barGap={2}
barColor="#3b82f6"
height={100}
fadeEdges={true}
/>API Reference
LiveWaveform
A canvas-based real-time audio visualizer with microphone input support.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| active | boolean | false | Whether to actively listen to microphone input |
| processing | boolean | false | Show processing animation when not active |
| barWidth | number | 3 | Width of each bar in pixels |
| barGap | number | 1 | Gap between bars in pixels |
| barRadius | number | 1.5 | Border radius of bars |
| barColor | string | - | Color of the bars (defaults to text color) |
| fadeEdges | boolean | true | Whether to fade the edges of the waveform |
| fadeWidth | number | 24 | Width of the fade effect in pixels |
| height | string | number | 64 | Height of the waveform |
| sensitivity | number | 1 | Audio sensitivity multiplier |
| smoothingTimeConstant | number | 0.8 | Audio analyser smoothing (0-1) |
| fftSize | number | 256 | FFT size for audio analysis |
| historySize | number | 60 | Number of bars to keep in history (scrolling) |
| updateRate | number | 30 | Update rate in milliseconds |
| mode | "scrolling" | "static" | "static" | Visualization mode |
| onError | (error: Error) => void | - | Error callback |
| onStreamReady | (stream: MediaStream) => void | - | Callback when stream is ready |
| onStreamEnd | () => void | - | Callback when stream ends |
| className | string | - | Custom CSS class |
| ...props | HTMLDivElement | - | All standard div element props |