Sound Pad

A trigger pad with modes, a hotkey, playback progress and an accent colour.

3 min read · 403 words

Installation

$ pnpm dlx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/sound-pad.json

$ npx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/sound-pad.json

$ yarn dlx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/sound-pad.json

$ bunx --bun shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/sound-pad.json

Usage

<script lang="ts">
	import {
		SoundPad,
		SoundPadLabel,
		SoundPadProgress,
		SoundPadShortcut,
	} from "#lib/components/ui/sound-pad/index.js";
	import { useSound } from "#lib/hooks/use-sound.svelte.js";

	const airhorn = useSound("/sounds/airhorn.mp3");
</script>

<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	Default
`onTrigger`	`() => void`	—
`onStop`	`() => void`	—
`playing`	`boolean`	`false`
`mode`	`"one-shot" \| "toggle" \| "hold" \| "loop"`	`"one-shot"`
`hotkey` Active when the grid enables hotkeys.	`string`	—
`loading` The sound is not ready yet.	`boolean`	`false`
`accent` A CSS colour.	`string`	—
`variant`	`"default" \| "outline" \| "ghost"`	`"default"`
`size`	`"sm" \| "default" \| "lg"`	`"default"`
`disabled`	`boolean`	`false`

SoundPadGrid

Prop	Type	Default
`columns` The most columns. The grid drops columns to keep pads at least --pad-min-width wide; a grid-cols-* class fixes the count.	`number`	`4`
`hotkeys` Listen for pad hotkeys.	`boolean`	`false`
`hotkeyScope` global listens on the whole page.	`"focus" \| "global"`	`"focus"`

SoundPadProgress

Prop	Type	Default
`value` 0..1, declarative.	`number`	—
`source` Smooth progress with no component updates.	`FrameSource<number> \| null`	—
`variant`	`"bar" \| "fill" \| "ring"`	`"bar"`