VoiceVisualizer

A visual audio level indicator that displays animated bars during voice conversations. Used internally by VoiceAgent but can be used standalone in custom UIs.

Import


import { VoiceVisualizer } from '@vocobase/voice-client-sdk'
import '@vocobase/voice-client-sdk/styles.css'

Basic Usage

The visualizer must be used within a VoiceSessionProvider and only displays when a session is active:


import { VoiceSessionProvider, VoiceVisualizer, useVoiceSession, useConnectionState } from '@vocobase/voice-client-sdk'
 
function App() {
  return (
    <VoiceSessionProvider apiKey="..." agentName="...">
      <CustomUI />
    </VoiceSessionProvider>
  )
}
 
function CustomUI() {
  const { connect, disconnect } = useVoiceSession()
  const { isConnected } = useConnectionState()
 
  return (
    <div>
      <button onClick={isConnected ? disconnect : connect}>
        {isConnected ? 'End' : 'Start'}
      </button>
 
      {isConnected && (
        <VoiceVisualizer
          options={{
            barCount: 20,
            barColor: '#3b82f6'
          }}
        />
      )}
    </div>
  )
}

Props

Prop	Type	Description
`options`	`VisualizerOptions`	Customize the visualization appearance
`className`	`string`	Additional CSS classes

Options


interface VisualizerOptions {
  barCount?: number      // Number of bars to display
  barColor?: string      // CSS color for the bars
  barGap?: number        // Space between bars (px)
  barWidth?: number      // Width of each bar (px)
  barMaxHeight?: number  // Maximum bar height (px)
}

Default Values

Option	Default
`barCount`	`30`
`barColor`	`"#ffffff"`
`barGap`	`3`
`barWidth`	`4`
`barMaxHeight`	`60`

Examples

Minimal Blue Visualizer


<VoiceVisualizer
  options={{
    barCount: 15,
    barColor: '#3b82f6'
  }}
/>

Wide Green Bars


<VoiceVisualizer
  options={{
    barCount: 10,
    barColor: '#10b981',
    barWidth: 12,
    barGap: 6,
    barMaxHeight: 100
  }}
/>

How It Works

The visualizer connects to the audio stream from the voice session and displays real-time audio levels:

Audio data is captured from both user microphone and agent response
Frequency data is analyzed in real-time
Bar heights are mapped to frequency bands
Smooth animations interpolate between audio samples

The visualization is purely visual feedback — it doesn’t affect the audio stream.