shadcn.io is not affiliated with official shadcn/ui
Soundboard Music Block for Solid
Sixteen sampler pads with their keys, a category filter that dims the others, a volume slider for the selected pad and Stop all, played from the pointer or the keyboard, without audio.
Installation
Overview
Trigger sounds with this soundboard for Solid with Ark UI. It holds Padhouse's sampler in a hairline frame with a plus mark on each corner, in four bands. The first is a Toggle Group that filters the pads by Drums, Voice, FX or Loops: the other pads are dimmed with a dashed border, never hidden, and a line says how many are shown. The second is a four by four grid of sixteen pads, each with its name, its category as a glyph and a word, and its key as a Kbd (1 2 3 4, Q W E R, A S D F, Z X C V). Pressing a pad, or typing its key while focus is inside the grid, lights it for 400 ms. The third is a Slider for the volume of the selected pad. The fourth is the status line ("Played Rimshot. No audio in this demo.") and a Stop all Button. Nothing sounds. It's built from Toggle Group, Slider, Kbd, Button and Guides, with a CSS entrance only. For samplers, effects pads, quick-reply buttons and any grid of triggers.
FAQ
How do I define my own pads?
Edit PADS: each has an id, a name, a category, the key that plays it and a starting level from 0 to 100. The categories are CATEGORIES. The volume of each pad is held separately, so the Slider always shows the selected pad's own level. In your app trigger your sample from hit.
Is there a global keyboard shortcut?
No. The keys work only while focus is inside the pad grid, so the page's own shortcuts are never taken. The grid is one tab stop; the arrow keys move between pads, Space or Enter plays the focused one, and typing a pad's key plays it and moves focus there. Each pad lists its key for assistive technology.
What does the filter do?
It dims the pads outside the chosen category with a dashed border and softer text, and says "4 of 16 pads in Drums, the rest dimmed". Dimmed pads still play. Pressing the active category again clears the filter.
What is the 400 ms light?
A pad lights as soon as it is played and every lit pad goes out together 400 ms after the last one. It is one timeout, not a sound or a loop, and it works the same with reduced motion because it changes colour rather than moving.