✨ Features

• 🎨 Multiple visualization types (waveform, frequency bars, circular)
• 🎤 Support for both audio file playback and microphone input
• ⚡️ Smooth animations with efficient canvas rendering
• 📱 Fully responsive design
• 📝 TypeScript support with complete type definitions
• 🎨 Customizable styles, colors, and animations
• 🔊 Built with Web Audio API for high-performance audio processing

🛠️ Installation

npm install react-audio-visualizer-pro
# or
yarn add react-audio-visualizer-pro

Usage Examples

Basic Audio File Visualization

import { WaveformVisualizer } from 'react-audio-visualizer-pro';

function App() {
  return (
    <WaveformVisualizer
      audioUrl="/path/to/audio.mp3"
      width={800}
      height={200}
      backgroundColor="#000000"
    />
  );
}

Microphone Input with Frequency Bars

import { FrequencyVisualizer } from 'react-audio-visualizer-pro';

function App() {
  return (
    <FrequencyVisualizer
      useMicrophone={true}
      width={800}
      height={200}
      backgroundColor="#000"
      gradientColors={['#ff0000', '#00ff00', '#0000ff']}
      barWidth={4}
      barSpacing={1}
      barRadius={2}
    />
  );
}

Circular Visualization with Custom Animation

import { CircularVisualizer } from 'react-audio-visualizer-pro';

function App() {
  return (
    <CircularVisualizer
      audioUrl="/path/to/audio.mp3"
      width={800}
      height={800}
      backgroundColor="#000"
      animationSpeed={1.5}
      barWidth={2}
    />
  );
}

API Reference

Common Props

All visualizer components accept these common props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | audioUrl | string | undefined | URL to the audio file to visualize | | useMicrophone | boolean | false | Use microphone input instead of audio file | | width | number | 800 | Canvas width in pixels | | height | number | 200 | Canvas height in pixels | | backgroundColor | string | '#1a1a2e' | Background color of the visualizer | | gradientColors | string[] | ['#00bcd4', '#4CAF50', '#8BC34A'] | Array of colors for gradient effect | | barWidth | number | 3 | Width of visualization bars | | barSpacing | number | 2 | Spacing between bars (frequency only) | | barRadius | number | 0 | Border radius of bars (frequency only) | | smoothingTimeConstant | number | 0.8 | Audio analysis smoothing (0-1) | | fftSize | number | 2048 | FFT size for frequency analysis | | minDecibels | number | -90 | Minimum decibel value | | maxDecibels | number | -10 | Maximum decibel value | | animationSpeed | number | 1 | Animation speed multiplier (circular only) |

Component-Specific Features

WaveformVisualizer

• Displays audio waveform in real-time
• Best for viewing audio amplitude over time
• Smooth line rendering with customizable thickness

FrequencyVisualizer

• Shows frequency spectrum as vertical bars
• Support for gradient colors
• Customizable bar width, spacing, and radius

CircularVisualizer

• Circular frequency visualization
• Rotating animation with adjustable speed
• Radial gradient support

Development

1. Clone the repository
2. Install dependencies: npm install
3. Build the package: npm run build
4. Run tests: npm test

License

MIT