shadcn.io is not affiliated with official shadcn/ui
Recording Booth Music Block for React Aria
A simulated voice recorder with a Record button and a twelve-second clock, a trace of 60 typed levels, a noise-gate slider that hatches the samples it would close and reports the noise floor, a format select that derives the file size, and a list of saved takes.
Installation
Overview
Let people see how a noise gate would treat their room before they record, with this recording booth for React with React Aria. A Takeroom Record button starts a simulated take: a Timer counts up to twelve seconds and the trace of 60 typed levels, room tone and then speech, grows with it. No microphone is used and nothing is recorded. A Slider sets the gate from -60 to -10 dB and draws a dashed line across the trace, hatches the samples the gate would close, and reports how many that is and where the noise floor sits. A Select picks WAV 24-bit, WAV 16-bit or FLAC and works out the size, which shrinks with the gated silence for FLAC. Save take is the only Shine Button and adds a take to the list; Discard asks first, in place. It's built from Record Button, Timer, Slider, Select, Shine Button, Empty and Guides, with a CSS entrance only. For voice notes, podcast tools and any recorder.
FAQ
Where do the levels come from?
From SAMPLES, 60 typed levels in dB at five a second: stretches of room tone near -48 dB and three phrases of speech between -34 and -12. Everything else is worked out from them: the number closed by the gate, the noise floor (the median of the quietest third) and the size. Replace the array with levels measured from your own capture.
What does the gate do on screen?
Every sample below the threshold is drawn hatched instead of solid, which is what a gate would close, and the line and its label sit at the threshold. The count in the heading and under the trace, "Gate closes 33 of 60", changes as you drag. Nothing is cut: the take only reports what the gate would do.
How is the file size worked out?
From the format's bytes per second for a mono take at 48 kHz (24-bit WAV 144 kB, 16-bit WAV 96 kB, FLAC 52.8 kB) times the length. FLAC is reduced by 60% of the share the gate closes, because silence compresses well. These are example figures only.
Does it record anything, and what stays local?
No. The Record button, the clock and the trace are simulated, and the status line says "Recording is simulated". Takes live in the page and are gone on reload. To make it real, request the microphone in record, compute levels from an AnalyserNode, and keep the same gate and takes list.