shadcn.io is not affiliated with official shadcn/ui
Stem Separator Music Block for React Aria
Four typed stems (Vocals, Drums, Bass, Other) with play, mute and solo toggles, volume sliders and their own waveforms, a full-mix waveform worked out from the stems that are heard, and four presets that set the mutes and volumes.
Installation
Overview
Show how a song is built from its parts, with this stem separator for React with React Aria. It lays out one Layerlab song as four typed stems in a hairline frame with a plus mark on each corner. The top waveform is the full mix, drawn as the sum of the stems that are heard at their volumes, so muting or soloing a stem lowers it at once, and its caption says "Mix: 3 of 4 stems". Each stem has its own Toggles for play, mute and solo, a volume Slider, its own waveform and a word that says whether it is heard or silent because another is solo. Four presets (Full mix, Karaoke, Instrumental, Acapella) set the mutes and volumes and show which one the stems match. Nothing is separated and no file is made. There is no primary button. It's built from Toggle, Slider, Button and Guides, with a CSS entrance only. For stem tools, karaoke apps and remix demos.
FAQ
How do I use my own stems?
Replace the four arrays in PEAKS with 64 amplitudes from 0 to 1 for each stem, and edit STEMS for the names and starting volumes. The mix is the sum of the heard stems' peaks times their volumes, divided by the loudest the full mix can be, so changing a stem or a volume changes the top wave without anything else to update.
How do mute and solo interact?
A stem is heard when it is not muted and, if any stem is solo, only when it is one of the solo stems. Mute therefore wins over solo, and stems that are silent only because another is solo say so in words. The header sentence and the caption are worked out from the same rule.
What do the presets do?
Full mix unmutes everything at 80%, Karaoke keeps every stem but turns the vocals down to 20%, Instrumental mutes the vocals, and Acapella mutes drums, bass and other. The preset that matches the current state is shown as pressed; moving anything else clears it.
Does it separate or play anything, and what stays local?
No. The stems are typed, nothing is analysed, no file is made and the play toggles only mark a row; the status line says no audio plays in this demo. To make it real, load the stem files your separation service returns, mix them with the Web Audio API using the same mute, solo and volume state, and draw their peaks.