Sound library
A React block (a whole screen) in Beamline's Manufacturing app.
A library of sounds (or any media a person auditions before using): a search by words and #tags with facets as filters, a live "3 filters · 12 results" line, "Clear text" that keeps the filters apart from "Clear all", and results that never play by themselves. Searches saved as labels keep the query, not a list, and say how many are new since saved; removing one says no sound or tag is deleted. Collections mark membership with their name and hue in every row (more than three said as "+n more"), and adding to a hidden collection shows it again with a note. Play and Add are different buttons: the preview says how it's changed ("at 120 BPM, in A minor, looping" or "as recorded"), and adding goes licence → download → added, a failure leaving nothing half-added with Try again. A sound can be the reference for sounds like it: it stays on top, the results are stamped with the reference they match, a newer reference cancels the search in flight, and going back never touches the original.
Use it for
- Finding, auditioning and using sounds, loops or clips from a large library.
- Any media library where saved searches, collections and a preview before use matter.
Not for
- Files and folders (file-manager).
- Playing one track or a playlist (audio-player).
- Editing notes or regions in time (the time-axis signature).
Anatomy
- header: the product's mark, the title, preview at the project's tempo and key
- rail: collections with a neutral mark and count; saved searches with what's new and remove
- search: the box (#tag then a space makes a tag), Save this search; or the reference on top with play and Back to search
- filters: kind and each facet as chips; the status line with Clear text and Clear all
- results: play or stop, name with kind, pack, tempo and key and its collections by name, the sound's own waveform (on one column, the playing one in the accent), Collect (a menu of collections), Find sounds like it, Add
- player: the waveform and how it plays
States
- search: text, tags, kinds, none; no results; a saved search with new sounds
- a collection hidden (shown again when added to), more than three on a row
- playing: as recorded, or at the project's tempo and key
- adding: licensing, downloading, added, refused (nothing left, Try again)
- reference: searching, results stamped, replaced (the older answer dropped), cleared
- phone: the rail above the results
- right to left: mirrors
Keyboard
- Tab through the follow switch, collections and saved searches, the search, the chips, Clear text and Clear all, each row's play, Collect, Find sounds like it and Add
Motion
None of its own.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
sounds (required) | Sound[] | — | |
collections | Collection[] | — | |
saved | SavedSearch[] | — | |
facets | { id: string; label: string; tags: string[]; }[] | — | The facets a search can filter by, as tag groups. |
project | { bpm: number; key: string; } | — | The project a preview can follow. |
onAdd | ((soundId: string, step: (s: AddStep) => void) => Promise<void>) | — | Add a sound to the project, reporting each step; reject to leave nothing half-added (said). |
onFindSimilar | ((soundId: string) => Promise<string[]>) | — | Sounds like the reference; resolve with their ids. An answer for an older reference is ignored. |
onCollect | ((soundId: string, collectionId: string) => Promise<void>) | — | |
onSaveSearch | ((search: SavedSearch) => Promise<void>) | — | |
onRemoveSearch | ((id: string) => Promise<void>) | — | |
defaultQuery | Partial<SoundQuery> | — | |
defaultPlaying | string | null | — | |
defaultReference | string | null | — | |
product | string | — | |
className | string | — | Classes on the documented visual root; no override by default. |
ref | Ref<HTMLDivElement> | — | Receives the documented native target or imperative handle; omitted by default. |
Built from
Dependencies
lucide-react
Import
import { SoundLibrary } from "@beamline/sound-library";Get it
Sound library is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent
More in Manufacturing
- Shop floor: A workshop's shop floor at one workstation: each job is a card at its work centre with why it isn't ready said in words (parts short, or the previous…
- Production plan: A production plan by month: each product's starting stock, forecast demand, replenishment and ending stock, every ending rolling into the next month's…
- Production and lots: Stock made and stored, with every movement traceable. A batch of a recipe, read as a batch sheet: the recipe, batches (in halves) and day as one sentence…
- Print scheduler: A print shop's production schedule. The week by station: each station's day holds its runs, with a load bar and minutes used against the station's…
- Plan readiness: A solar plan on its way to a permit. The design checks (fire setback from the ridge, string voltage in the cold, roof load, eave and rake setbacks, the…
- Design inputs: What a solar design is checked against, and what the home really uses. Code standards and site conditions (building, electrical and fire codes, wind…
- Solar quote: A residential solar quote. The system's price at its rate per watt with adders, discounts and incentives each switched on or off: discounts come off one…
- Roof layout: The roof of a solar design. The roof in plan with every face's panels drawn as they lie under its roof type's rules (projected from the slope), each…
- Electrical design: The electrical side of a solar design. The existing service set up from a named way of connecting to it (a load-side breaker or a supply-side tap), the…
- Battery sizing: A home battery sized beside its solar. The model and how many with capacity, power and installed price; how it runs (kept full for an outage, storing…
- Field conditions: A farm's fields and what each one's conditions are. The fields as a searchable list (each with its outline, crop, area and the layer's value, or Not…
- Grazing plan: Mobs on a grazing rotation, on the farm's map: with a map base, its parcels are the paddocks, each filled by where it stands in the chosen mob's plan (on…
- Run of show: One service or event plan's order, run more than once: sections and items with each occurrence's start time in its own column, each item's length dragged…
- Tag manager: Tags for one or several items at once (sounds, photos, documents). Nested tag groups are edited in place (rename, new tag), and a folded group still says…