# Soundboard

> Sound pads with hotkeys, modes, volume, stop all and drag-and-drop.

<ComponentPreview name="soundboard-demo" />

## Installation

```npm
npx shadcn-svelte@latest add @audiocn-svelte/soundboard
```

## What it does

- Pads play on click or with hotkeys 1–9 anywhere on the page, except while typing in a field. Hotkeys can be turned off.
- Right-click a pad to change its mode (one shot, toggle, hold, loop), its volume, or remove it.
- Removing a pad shows an inline Undo action that restores it in its original position. The most recent removal stays undoable until another pad is removed.
- A master volume and a "Stop all" button.
- Drop audio files onto the board, or use the Add pad, to add sounds. Each file is held as an object URL, which the board releases once its removal can no longer be undone.
- Inline status messages announce additions, rejected or duplicate files, removals and stopping playback. There is no global toast provider.

Pass `output` to route the board into a mixer channel instead of the speakers.

## Props

<PropsTable
	rows={[
		[
			"sounds / defaultSounds",
			"{ id, label, src, hotkey?, mode?, volume?, accent? }[]",
			"[]",
			"Type SoundboardSound. src is a URL or an AudioBuffer.",
		],
		[
			"onSoundsChange",
			"(sounds) => void",
			null,
			"Called when sounds are added, edited or removed.",
		],
		["output", "AudioNode | null", "speakers", "Route pads into a mixer."],
		["columns", "number", "4", "The most columns; fewer on narrow screens."],
		["class", "string", null, null],
	]}
/>

## Files

<ComponentSource path="src/lib/components/blocks/soundboard/soundboard.svelte" />

<ComponentSource path="src/lib/components/blocks/soundboard/soundboard-pad.svelte" />