Soundboard

A grid of sound pads with global hotkeys, per-pad mode and volume in a context menu, master volume, stop all, and drag-and-drop to add sounds.

Library

audiocn

Framework

React

Type

block

License

MIT

Dependencies

@phosphor-icons/react

Install

npx shadcn@latest add @audiocn/soundboard

Files

• components/blocks/soundboard/soundboard.tsx
• components/ui/sound-pad.tsx
• components/ui/volume-control.tsx
• hooks/use-audio-context.tsx
• hooks/use-sound.ts
• hooks/use-gain-node.ts
• lib/audio/frame-loop.ts
• lib/audio/frame-source.ts

Source

https://github.com/audiocn/ui

Categories

• Action Components
• React Action Components
• Tailwind CSS Action Components
• shadcn/ui Action Components
• Button Components
• React Button Components
• Tailwind CSS Button Components
• shadcn/ui Button Components
• Context Menu Components
• React Context Menu Components
• Tailwind CSS Context Menu Components
• Grid Components

More from audiocn

• Channel Toggle
• Sound Pad
• Volume Control
• Audio Device Select
• Audio Player
• Bar Visualizer
• Channel Strip
• Clip Indicator
• dB Readout
• dB Scale
• Electric Bar Visualizer
• Electric Waveform