🎧 React Audio Visualizer

A customizable React package for real-time audio visualization, supporting multiple visualization types and audio sources

Features •
Installation •
Usage •
Contributing •
License

✨ 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

``bash
npm install react-audio-visualizer-pro


or


yarn add react-audio-visualizer-pro
`

Usage Examples

$3

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

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

$3

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

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

$3

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

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

API Reference

$3

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) |

$3

#### 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