audiocnSound Pad
A trigger pad with modes, a hotkey, playback progress and an accent colour.
Installation
$ pnpm dlx shadcn@latest add @audiocn/sound-padUsage
const airhorn = useSound("/sounds/airhorn.mp3");
<SoundPad hotkey="1" onTrigger={airhorn.play} playing={airhorn.isPlaying}>
<SoundPadLabel>Airhorn</SoundPadLabel>
<SoundPadShortcut />
<SoundPadProgress source={airhorn.progress} />
</SoundPad>;The pad plays nothing itself. It reports triggers; useSound or your own engine does the playback.
Anatomy
<SoundPadGrid>
<SoundPad>
<SoundPadIcon />
<SoundPadLabel />
<SoundPadShortcut />
<SoundPadProgress />
</SoundPad>
</SoundPadGrid>Modes
| Mode | Behaviour |
|---|---|
one-shot | Every press triggers; pressing again restarts |
toggle | Press to start, press again to stop |
hold | Plays while held |
loop | Like toggle, and marks the pad as looping |
Examples
A grid with hotkeys
Press 1–8 while the grid has focus. Whoosh toggles and the drum roll plays only while held.
Theming
| Variable or attribute | Meaning |
|---|---|
--pad-accent | Set by accent, default primary |
--pad-progress | Live progress, 0..1 |
--pad-min-width | Narrowest pad before the grid drops a column, default 5.5rem. Set on SoundPadGrid |
--pad-gap | Gap between pads, default 0.5rem. Set on SoundPadGrid |
data-playing, data-pressed, data-mode, data-loading | State |
Accessibility
A pad is a real <button>. In toggle and loop modes it has aria-pressed. The grid moves focus between pads with the arrow keys, and hotkeys are announced with aria-keyshortcuts. Global hotkeys never fire while someone is typing in a field.
API reference
SoundPad
Prop
Type
SoundPadGrid
Prop
Type
SoundPadProgress
Prop
Type