shadcn.io is not affiliated with official shadcn/ui
Sound Mixer Music Block for React Aria
A six-channel mixing console with vertical faders, pan sliders and Mute and Solo buttons that follow the real rule, a twelve-segment master meter that says Hot, and Reset, without audio.
Installation
Overview
Balance a mix with this sound mixer for React with React Aria. It holds Faderhall's console in a hairline frame with a plus mark on each corner, in three bands. The first is six channel strips on shared hairlines, Kick, Bass, Keys, Guitar, Vocal and Reverb return, each with its state in words, a vertical level Slider with the level in decibels, a pan Slider and Mute and Solo Toggles. They follow the real rule: when any channel is soloed only the soloed ones are audible, and a muted channel is silent even when soloed. The second is the master meter, twelve segments worked out from the power sum of the audible faders, with the word Hot and a warning icon from minus 3 dB. The third is the foot: "Audible: 6 of 6" and Reset. Nothing sounds. It's built from Slider, Toggle, Button and Guides, with a CSS entrance only. For consoles, DAW mixers and any set of related levels.
FAQ
How do I set my own channels?
Edit START: each channel has an id, a name, a fader position level from 0 to 100, a pan from −50 to 50 and its mute and solo flags. A fader position of 91 is unity (0 dB), 100 is plus 6 dB and 0 is off; dbOf is the one place that maps them. The audible count and the meter are worked out from the channels after every change.
How exactly do Solo and Mute work?
If no channel is soloed, every channel that is not muted is audible. As soon as one is soloed, only the soloed channels are audible, so every other strip says "Silent: another is soloed". Mute always wins: a channel that is both muted and soloed is silent. The foot and the status line say how many of the six are audible after each press.
How is the master meter worked out?
It adds the power of every audible channel (each fader in decibels, turned into power and summed) and turns the total back into decibels, so two faders at the same level read 3 dB higher than one. Segments light from minus 36 dB up to 0, and from minus 3 dB the word Hot appears with a warning icon, the one status colour on the panel. It is a worked estimate, not a measurement of any audio.
Do the faders say their value in words?
Yes. Each fader reads, for example, "−7.2 dB, fader at 80 of 100", and each pan reads "Pan L 20" or "Pan Centre". Arrow keys move a fader by one step and the status line says the settled value in decibels and the audible count.
What stays local, and how do I wire it for real?
Everything: the levels, pans, mutes and solos live in the page and reset on a reload, and no audio plays in this demo. To make it real, send each change to the gain, pan and mute of your audio graph, and compute the meter from your engine's analyser instead of masterOf.