Wave Player
A shadcn-styled waveform wave player built on wavesurfer.js.
Demo Track
0:000:00
Waveform components
built to be copied.
A collection of audio UI built with wavesurfer.js and shadcn/ui. Install with one command, own the code, style it with your tokens.
localhost:3000
Live
page.tsxapp/
import WavePlayer from "@/components/waves-cn/wave-player";
export default function Page() {
return (
<WavePlayer
src="/coastline.mp3"
title="Coastline"
/>
);
}Coastline
Demo track · wave-player
0:00 / 0:00
Click or drag the waveform to seek
- 11
- components
- 1
- install command
- 100%
- TypeScript
- MIT
- licensed
Built with
- React
- TypeScript
- Tailwind CSS
- shadcn/ui
- Lucide
- wavesurfer.js
Why waves-cn
Everything a waveform needs, nothing you have to fight
Copy, paste, own
Components land in your repo through the shadcn CLI. No package to upgrade, no black box. Edit anything.
Themed by your tokens
Wave, progress and cursor colors resolve from your CSS variables, so dark mode and brand themes work out of the box.
Plugins, already wired
Regions, timeline, minimap, spectrogram, zoom, hover and envelope are pre-integrated with sensible defaults.
Typed end to end
Every prop and event handler is fully typed against wavesurfer.js, so your editor tells you what is possible.
Components
One for every audio use case
11 components, every one live below. Play, drag, zoom, record. Then copy the one you need.
Wave Recorder
A headless-friendly wave recorder with live waveform, built on wavesurfer.js.
Wave Regions
A shadcn-styled waveform player with draggable and resizable region markers built on wavesurfer.js RegionsPlugin.
Demo Track
0:000:00
Wave Timeline
A waveform player with timeline markers built on wavesurfer.js.
Demo Track
0:000:00
Wave Minimap
A shadcn-styled waveform player with a minimap overview built on wavesurfer.js MinimapPlugin.
Demo Track
0:000:00
Wave Spectrogram
A shadcn-styled waveform player with frequency heatmap built on wavesurfer.js SpectrogramPlugin.
Demo Track
0:000:00
Wave Speed
A wave player with variable playback speed control, built on wavesurfer.js.
Playback rate: 1.00x
0.25x4x
Wave Zoom
A wave player with mouse-wheel zoom, built on wavesurfer.js ZoomPlugin.
Zoom: 100 px/s— scroll to zoom
Wave Hover
A shadcn-styled waveform player with a hover cursor and time tooltip built on wavesurfer.js HoverPlugin.
Demo Track
0:000:00
Wave Envelope
A shadcn-styled waveform player with volume automation editing built on wavesurfer.js EnvelopePlugin.
Demo Track
Envelope volume: 80%— drag points to adjust
0:000:00
Wave Video
A waveform player synced to a video element, built on wavesurfer.js.
Get started
Up and running in three steps
Works with any existing shadcn/ui project. No extra provider, no global CSS to import.
- 1
Register the registry
Point the shadcn CLI at waves-cn once in your components.json.
"registries": { "@waves-cn": "https://waves-cn.vercel.app/r/{name}.json" } - 2
Add a component
The CLI copies the component and the shared wave-cn core into your project.
npx shadcn@latest add @waves-cn/wave-player - 3
Use it
Import from your own components folder and pass an audio source.
import WavePlayer from "@/components/waves-cn/wave-player"; <WavePlayer src="/track.mp3" title="My track" />
Open source
Built in the open, by people who ship audio UI
waves-cn is MIT licensed and maintained on GitHub. Fix a bug, add a plugin wrapper, improve a doc page. Every pull request is welcome.