Pro
Waveform player
A recording you can see. The waveform is the seek bar, the played part fills in as it plays, and the pointer shows the time under it before you press. Speed steps through 1×, 1.5× and 2×.
pnpm dlx shadcn@latest add @caliper/waveform-playerLedger chime, v3
Sound review · 3 comments
Mara Chen at 0:12 · The second phrase lands better than v2.
When to use
Use it for
- Call recordings, voice notes, podcasts and sound reviews in a product.
- Anywhere loud and quiet parts help people find their place.
Skip it when
- Video; use the media player.
- Long recordings people navigate by chapter; add chapters with the media player.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Behaviour
- Peaks stored or read
- Pass peaks saved at upload for an instant draw, or leave them out and they are read from the file once.
Usage
- A real slider
- The waveform is a slider with the time as its value text; arrows skip five seconds, Space plays.
Installation
pnpm dlx shadcn@latest add @caliper/waveform-player
Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.
Usage
Import it from your copy of the source. The example behind the preview comes with the source. It is built from WaveformPlayer and audioPeaks.
import { WaveformPlayer, audioPeaks } from "@/components/ui/waveform-player"
The worked example comes with Pro
The 30-line example behind the preview opens here, ready to copy.
- 576 Pro parts, blocks and page templates, all with source
- $199 once, with a year of updates. What you have stays yours
- A full refund within 14 days if it is not for you
API reference
WaveformPlayer
component
audioPeaks
component
No props of its own; it accepts the native props of its root element.
Accessibility
It exposes slider semantics, with aria-label, aria-valuemin, aria-valuemax, aria-valuenow and aria-valuetext kept in step with state.
Motion
Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.
Related
- Media playerAn audio or video player with accessible controls and a progress bar.
- Voice recorderRecord, pause and review audio with a waveform.
- Transcript reelA transcript on a curved surface. The line being read is large and faces you; the lines before and after bend away along a cylinder, so you keep your place while it plays. Every line shows its time and speaker, and clicking one seeks to it.