# Media Audio Waveform

Audio player with a waveform you can click to scrub, with named regions you can loop.

- id: `media-audio-waveform`
- Page: https://agentic-ui-kit.com/components/media-audio-waveform
- Live preview: https://agentic-ui-kit.com/live/component/media-audio-waveform?piece=media-audio-waveform

## Install

```bash
agentic-ui add media-audio-waveform
npx shadcn@4.17.0 add @agentic-ui/media-audio-waveform
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** audio-player, waveform-canvas, scrub-slider, regions, region-loop, playback-speed, web-audio-decode, generated-sample, reduced-motion, dark-mode
- **Intents:** explore-detail, create-edit
- **Suits domains:** media, music, ai-voice, notes, education
- **Interaction:** click, drag, keyboard-navigation, select-option
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** audio player with a waveform you can click to scrub, with named regions you can loop, voice memo or podcast clip player that draws the waveform from the decoded audio, waveform scrubber with playback speed and a keyboard accessible slider, audio editor preview with regions drawn on a canvas, no wavesurfer
- **Avoid when:** a live microphone level meter (use motion-audio-visualizer or motion-voice-waveform), multi-track editing, effects or export, video content (use media-video-player), very long recordings where decoding the whole file is too heavy
- **Preserve when adapting:** slider-semantics, decoded-peaks, token-coloured-canvas
- **Replace when adapting:** src, regions, speeds
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives