Upload Audio
Hide Code
Generated Code
Copy component first, then use JSX below
Copy Component
Copy Usage
import { AudioWaveformButton } from "@/components/audio-waveform-button" // Create a ref for your audio element: // const audioRef = useRef<HTMLAudioElement>(null) // <audio ref={audioRef} src="/your-audio.mp3" /> <AudioWaveformButton audioRef={audioRef} size="lg" />
Zantos Waveform Studio
Default
Muted State
Active State
Preview shows what you're editing
← → keys to switch
Animation Source
Simulated
Real Audio
Bar Animation Style
Waveform (Default)
Muted Animation Intensity
1x
Muted Bar Color
Show Slash Overlay
Thickness
2
Angle
-45°
Layout
Size
S
M
L
Bars
5
Bar Width
4px
Bar Gap
4px
Radius
20px
Effects
Post-processing
Effect Type
None
Advanced
Animation timing
Easing Function
Ease In Out