shadcn.io is not affiliated with official shadcn/ui
Sample Library Music Block for React Aria
A sample library of fourteen sounds with drawn waveforms, tempo, key, length and downloads, a fit worked out from your project's tempo and key (Fits, Stretch plus 4%, Different key, Tempo too far), a category group, a sort select, a Preview toggle and an Add button that fills a removable project list.
Installation
Overview
Help producers find sounds that already work with their track, with this sample library for React with React Aria. It holds a library of Hitbank, a sample library, in a hairline frame with a plus mark on each corner: a project band with a tempo Number Input, a key Select, a sort Select and a Toggle Group for the category (All, Drums, Bass, Synths, Vocals, FX), a held-height list of samples, and Your project. Each row has a drawn waveform, its tempo, key, length and compact downloads, a Toggle to preview, an Add Button, and a fit worked out from the project: Fits, Stretch plus or minus a percent (tempo within 6 percent), Different key, or Tempo too far. Best fit orders the list by that fit. The samples you add become removable chips with a count. It's built from Number Input, Select, Toggle Group, Toggle, Button and Guides, with a CSS entrance only. For beat-making, sound-library and marketplace apps.
FAQ
How do I load my own samples?
Edit SAMPLES: each has a name, a category, a bpm (0 for a sound with no tempo), a tonic pitch class (-1 for no key) and minor, a length in seconds, a download count and a wave string of 32 digits from 0 to 9 that set the bar heights. In a real library, compute the bars from the audio on upload and store them with the sample.
How is the fit worked out?
By fitOf. The tempo gap is the project tempo against the sample's, in percent: more than 6 percent is Tempo too far. Within that, the key must be the same, the relative major or minor, or a fifth away in the same mode, or it is Different key. Otherwise a gap of 1 percent or less Fits and a larger one says how much to Stretch. A sound with no tempo or no key always passes that part.
What does Preview do?
It marks one row at a time and lights its waveform, and says in the status line that there is no audio in this demo. Nothing plays and no microphone is used. To make it real, play the sample from your own audio element when the toggle is pressed and stop it when another row takes over.
How does it work from the keyboard?
Tab runs the project controls, the category group, each row's Preview and Add, the remove buttons and the status. The tempo field and both selects are named, each row's buttons name the sample, and a polite status line says what changed. The list keeps its height when you filter or sort. On React Aria a typed tempo is applied when you leave the field, press Enter or use an arrow key.