║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Live Waveform description: Real-time canvas-based audio waveform visualizer with microphone input and customizable rendering modes. component: true

<ComponentPreview name="live-waveform-demo" title="Live Waveform" description="Real-time microphone input visualization with audio reactivity." />

Installation

<CodeTabs> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">

npx @elevenlabs/cli@latest components add live-waveform

</TabsContent> <TabsContent value="manual"> <Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="live-waveform" title="components/ui/live-waveform.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </CodeTabs>

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 |

Notes

• Uses Web Audio API for real-time frequency analysis
• Automatically requests microphone permissions when active={true}
• Canvas-based rendering with HiDPI support
• Properly cleans up media streams and audio contexts on unmount
• Static mode: Displays symmetric waveform bars across multiple frequency bands (detailed visualization)
• Scrolling mode: Shows historical average audio volume as bars scrolling from right to left (timeline view)
• Processing state: Shows animated waves while waiting for input
• Smooth transitions between active, processing, and idle states
• Scrolling mode builds up history gradually - bars appear from right and fill over time

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║