Bar Visualizer

Real-time audio frequency visualizer with state-based animations for voice agents and audio interfaces.

Audio Frequency Visualizer

Real-time frequency band visualization with animated state transitions

"use client"

import { useState } from "react"

import {
  BarVisualizer,
  type AgentState,
} from "@/components/ui/bar-visualizer"
import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

export function BarVisualizerDemo() {
  const [state, setState] = useState<AgentState>("listening")

  return (
    <Card className="">
      <CardHeader>
        <CardTitle>Audio Frequency Visualizer</CardTitle>
        <CardDescription>
          Real-time frequency band visualization with animated state transitions
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          <BarVisualizer
            state={state}
            demo={true}
            barCount={20}
            minHeight={15}
            maxHeight={90}
            className="h-40 max-w-full"
          />

          <div className="flex flex-wrap gap-2">
            <Button
              size="sm"
              variant={state === "connecting" ? "default" : "outline"}
              onClick={() => setState("connecting")}
            >
              Connecting
            </Button>
            <Button
              size="sm"
              variant={state === "initializing" ? "default" : "outline"}
              onClick={() => setState("initializing")}
            >
              Initializing
            </Button>
            <Button
              size="sm"
              variant={state === "listening" ? "default" : "outline"}
              onClick={() => setState("listening")}
            >
              Listening
            </Button>
            <Button
              size="sm"
              variant={state === "speaking" ? "default" : "outline"}
              onClick={() => setState("speaking")}
            >
              Speaking
            </Button>
            <Button
              size="sm"
              variant={state === "thinking" ? "default" : "outline"}
              onClick={() => setState("thinking")}
            >
              Thinking
            </Button>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}

Installation


pnpm dlx @elevenlabs/agents-cli@latest components add bar-visualizer

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)

Audio Player Conversation

On This Page

Installation Usage Basic Visualizer Demo Mode API Reference BarVisualizer Props useAudioVolume Hook Parameters useMultibandVolume Hook Parameters useBarAnimator Hook Parameters AgentState Type Notes

Deploy and Scale Agents with ElevenLabs

ElevenLabs delivers the infrastructure and developer experience you need to ship reliable audio & agent applications at scale.