Loading...
Installation
Usage
import VisualizerButton from "@/components/ruixen/visualizer-button";
export default function App() {
return (
<VisualizerButton
audioSrc="https://example.com/audio.mp3"
width={80}
height={40}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
audioSrc | string | - | URL of the audio file |
width | number | 60 | Width of the button |
height | number | 30 | Height of the button |
className | string | - | Additional CSS classes |
Features
- Compact Design: Small button perfect for toolbars
- Animated Bars: Dancing equalizer visualization when playing
- Click to Toggle: Single click to play/pause
- Responsive Bars: Bars animate based on playing state
- Customizable Size: Adjustable width and height
- Smooth Transitions: CSS transitions for bar animations
Use Cases
Perfect for:
- Music Players: Compact play button with visual feedback
- Podcast Apps: Episode play buttons
- Audio Previews: Quick audio sample players
- Toolbars: Space-efficient audio controls
- Audio Lists: Individual track controls