Components
Loading preview...
This Visualizer Button is a compact, interactive UI component built strictly with shadcn UI. It acts as a small audio visualizer embedded within a button, making it perfect for notifications, background music, or voice notes. When clicked, it plays the given audio source and animates five vertical bars to simulate audio levels in real time. The bars’ heights dynamically change to reflect the audio playback, providing instant visual feedback. The button is fully customizable with props for width, height, and class names, and it automatically adapts to light or dark themes using appropriate colors. Its minimal, functional design ensures it can seamlessly fit into any modern interface while adding a playful, engaging element to the user experience.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/visualizer-button"use client"
import VisualizerButton from "@/components/ui/visualizer-button"
export default function DemoVisualizer() {
return (
<div className="flex flex-col items-center justify-center min-h-screen gap-6 p-6">
<h2 className="text-xl font-semibold">Visualizer Button Demo</h2>
<VisualizerButton
audioSrc="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3" // put a valid mp3 file in public folder
label="Play Track"
barCount={20}
maxHeight={30}
width={140}
/>
<VisualizerButton
audioSrc="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
label="Track 2"
barCount={15}
maxHeight={25}
width={120}
/>
<p className="text-sm text-gray-500 dark:text-gray-400">
Click the buttons to play/pause and see live waveform animation.
</p>
</div>
)
}