shadcn.io is not affiliated with official shadcn/ui
Music Collab Chat Block for React Aria
A producers' thread beside a four-stem mixer: drawn waveforms with level sliders and Mute and Solo toggles, where pressing a waveform moves the playhead and adds an @1:24 time chip to your message.
Installation
Overview
Pin a note to a moment of the mix, with this music collaboration chat for React with React Aria. A hairline frame with a plus mark on each corner holds a window of fixed height for Trackmates, a chat for bedroom producers: you and two friends talk about a demo called Paper Kestrel in a thread, and the pane at the end is the mix, with Drums, Bass, Keys and Vocals as drawn waveforms, a level Slider for each, Toggle buttons for Mute and Solo (a solo silences the others in the picture) and the tempo and key as Badge chips. Pressing a waveform moves the playhead and puts a time chip such as @1:24 above the field; sending attaches it to your Message, and pressing a chip in the thread moves the playhead there. There is no audio in this demo. The composer's Shine Button, the only colored control, sends your note. It's built from Slider, Toggle, Badge, Message, Shine Button and Guides, with a CSS entrance only. For music tools, remix communities and any review where comments belong to a time.
FAQ
What stays in the page, and how do I make it real?
Everything. The waveforms are drawn from typed levels, there is no audio and no player, the mix state lives in the page and the replies come from a short script. To wire it for real, load each stem's peaks from your audio service, play the stems through the Web Audio API with the same mute, solo and level state, and store each message's time as seconds so the chip can seek the real player.
What does Solo do?
It works as in a studio: when any stem is soloed, only the soloed stems count as heard and the others draw in a faded tone. Mute silences one stem, and Mute wins over Solo on the same stem. The sentence under the field says what the mix amounts to after each press.
How does the time chip work?
Pressing a waveform sets the playhead and shows the time above the field; the line stays reserved so the field never moves. Send attaches it to the message, Remove time drops it, and a chip under any message in the thread moves the playhead there. Keyboard users move the playhead with the Playhead slider in the mix.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log, every message starts with a hidden sender and time, and the composer's status line announces what each action did. Every stem has named Mute and Solo toggles with a pressed state and a named level slider, the playhead slider announces its time as minutes and seconds, and the drawn waveforms are hidden from screen readers.