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

---

title: Bar Visualizer description: Real-time audio frequency visualizer with state-based animations for voice agents and audio interfaces. featured: true component: true

<ComponentPreview name="bar-visualizer-demo" description="A bar visualizer showing audio frequency bands with various states." />

Installation

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

npx @elevenlabs/cli@latest components add bar-visualizer

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

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

<ComponentSource name="bar-visualizer" title="components/ui/bar-visualizer.tsx" />

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

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

Usage

import {
  BarVisualizer,
  useAudioVolume,
  useBarAnimator,
  useMultibandVolume,
  type AgentState,
  type AudioAnalyserOptions,
  type BarVisualizerProps,
  type MultiBandVolumeOptions,
} from "@/components/ui/bar-visualizer"

Basic Visualizer

<BarVisualizer state="listening" barCount={15} mediaStream={stream} />

Demo Mode

<BarVisualizer state="speaking" demo={true} centerAlign={true} />

API Reference

BarVisualizer

The main visualizer component that displays animated frequency bars.

<BarVisualizer state="speaking" mediaStream={stream} />

Props

| Prop | Type | Description | | ----------- | ---------------- | ------------------------------------------------------------------------------ | | state | AgentState | Voice assistant state: connecting, initializing, listening, speaking, thinking | | barCount | number | Number of bars to display. Default: 15 | | mediaStream | MediaStream | Audio source for real-time visualization | | minHeight | number | Minimum bar height as percentage. Default: 20 | | maxHeight | number | Maximum bar height as percentage. Default: 100 | | demo | boolean | Enable demo mode with fake audio data. Default: false | | centerAlign | boolean | Align bars from center instead of bottom. Default: false | | ...props | HTMLDivElement | All standard div element props |

useAudioVolume Hook

Get the overall volume level from an audio stream.

const volume = useAudioVolume(mediaStream, {
  fftSize: 32,
  smoothingTimeConstant: 0,
})

Parameters

| Parameter | Type | Description | | ----------- | ---------------------- | --------------------------------- | | mediaStream | MediaStream \| null | The audio stream to analyze | | options | AudioAnalyserOptions | FFT size, smoothing, and dB range |

useMultibandVolume Hook

Track volume across multiple frequency bands for visualization.

const frequencyBands = useMultibandVolume(mediaStream, {
  bands: 15,
  loPass: 100,
  hiPass: 200,
  updateInterval: 32,
})

Parameters

| Parameter | Type | Description | | ----------- | ------------------------ | ------------------------------------- | | mediaStream | MediaStream \| null | The audio stream to analyze | | options | MultiBandVolumeOptions | Band count, frequency range, interval |

useBarAnimator Hook

Create animation sequences for different states.

const highlightedIndices = useBarAnimator("connecting", 15, 100)

Parameters

| Parameter | Type | Description | | --------- | ---------------- | ------------------------------ | | state | AnimationState | Current animation state | | columns | number | Number of bars | | interval | number | Animation frame interval in ms |

AgentState Type

type AgentState =
  | "connecting" // Establishing connection
  | "initializing" // Setting up
  | "listening" // Listening for input
  | "speaking" // Playing audio output
  | "thinking" // Processing

Notes

• Uses Web Audio API for real-time frequency analysis
• Supports both real audio streams and demo mode for development
• Bars animate based on the current state
• FFT analysis splits audio into frequency bands
• Smooth animations using requestAnimationFrame
• Works with any MediaStream source (microphone, audio elements, WebRTC)

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