Docs
Audio Visualizer

Audio Visualizer

A real-time audio visualization component that provides visual feedback during voice recording.

Component audio-visualizer-demo not found in registry.

The AudioVisualizer component provides visual feedback during voice recording by creating an animated frequency spectrum display that responds to audio input in real-time.

Installation

npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/audio-visualizer.json

Usage

import { AudioVisualizer } from "@/components/ui/audio-visualizer"
 
export function VoiceRecorder() {
  return (
    <AudioVisualizer
      stream={audioStream}
      isRecording={isRecording}
      onClick={stopRecording}
    />
  )
}

Props

PropTypeDescriptionDefault
streamMediaStreamThe audio stream to visualizeRequired
isRecordingbooleanWhether the component should be actively visualizing audioRequired
onClick() => voidCallback function when the visualizer is clickedRequired

Implementation Details

The AudioVisualizer uses the Web Audio API to analyze the audio stream and create the visualization. Key configuration parameters include:

const AUDIO_CONFIG = {
  FFT_SIZE: 512,
  SMOOTHING: 0.8,
  MIN_BAR_HEIGHT: 2,
  MIN_BAR_WIDTH: 2,
  BAR_SPACING: 1,
  COLOR: {
    MIN_INTENSITY: 100,
    MAX_INTENSITY: 255,
    INTENSITY_RANGE: 155,
  },
}

These parameters control:

  • Frequency analysis resolution (FFT_SIZE)
  • Animation smoothness (SMOOTHING)
  • Visual bar dimensions and spacing
  • Color intensity range for the visualization
File Preview