Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sujalxplores/react-audio-visualizer-pro
React Audio Visualizer Pro is a powerful and customizable React library designed for real-time audio visualization. It supports multiple visualization types and audio sources, including audio files and microphone input.
https://github.com/sujalxplores/react-audio-visualizer-pro
canvas npm-package react react-audio
Last synced: about 1 month ago
JSON representation
React Audio Visualizer Pro is a powerful and customizable React library designed for real-time audio visualization. It supports multiple visualization types and audio sources, including audio files and microphone input.
- Host: GitHub
- URL: https://github.com/sujalxplores/react-audio-visualizer-pro
- Owner: SujalXplores
- Created: 2024-12-08T16:35:06.000Z (about 2 months ago)
- Default Branch: master
- Last Pushed: 2024-12-13T16:17:30.000Z (about 2 months ago)
- Last Synced: 2024-12-18T18:45:43.865Z (about 1 month ago)
- Topics: canvas, npm-package, react, react-audio
- Language: TypeScript
- Homepage:
- Size: 170 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
🎧 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
### Basic Audio File Visualization
```tsx
import { WaveformVisualizer } from 'react-audio-visualizer-pro';
function App() {
return (
);
}
```
### Microphone Input with Frequency Bars
```tsx
import { FrequencyVisualizer } from 'react-audio-visualizer-pro';
function App() {
return (
);
}
```
### Circular Visualization with Custom Animation
```tsx
import { CircularVisualizer } from 'react-audio-visualizer-pro';
function App() {
return (
);
}
```
## 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