shadcn.io is not affiliated with official shadcn/ui
Voice Recorder Dialog Block for React Aria
A voice-memo list with a simulated recorder dialog shown open: a record button with a one-second clock up to 0:12, a waveform that fills as it runs, a trim slider with two thumbs, a name field, an inline discard check and a Save memo button that adds the memo to the list.
Installation
Overview
Capture a thought and tidy it before it is kept, with this recorder dialog for React with React Aria. It opens from the Voice memos page of Memowren, a voice-memo app: the page's header holds an outline New memo Button, and the list, three rows each with a bar for its length, is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The recorder is a simulation and says so on screen: no microphone is used and nothing is recorded. The catalog Record Button starts a take, and its clock is the catalog Timer, one second at a time up to 0:12, kept out of sight; a hand-drawn waveform, built from a typed list of 48 levels, fills in from its start as the clock runs. Stop, or the twelfth second, ends the take. In review a Slider with two thumbs sets where the memo starts and stops, with the text "Keep 0:09 of 0:12", a name Input holds "Standup notes", and Discard asks "Discard this take?" in place, with no second dialog. Nothing plays. Save memo is the only Shine Button: the memo joins the list as real text with its length. For preview the dialog is drawn open in place when the page loads, its clock stopped at 0:00; the header button opens the real Dialog.
FAQ
Why is the dialog already open, and why is the clock stopped?
So you can see it without a click, and so a poster or a gallery card never ages. On load the dialog is a copy drawn in place over the list: a native dialog element that isn't modal, so nothing is trapped, hidden or focused. In it the clock stands at 0:00 until you press the record button, and then it really runs. The New memo button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same RecorderFields component and share the block's state. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.
Is anything recorded, and does it play?
No. The microphone is never opened and no permission is asked; the dialog says so under its title. The waveform comes from a typed list of 48 levels, so every take looks the same, and a shorter take shows the first part of it. Nothing plays, and a line under the name field says the take is a picture of a sound. In your app open the microphone only when the person presses record, build the waveform from the recorded levels, and play the trimmed range from the same two numbers.
How does the clock work, and what does a screen reader hear?
The catalog Timer counts one second at a time, from 0:00 up to 0:12, and stops itself at 12. The take's length is the last second it reached when you press Stop, and a take shorter than a second is refused in words. The seconds are not announced as they pass: the polite line says when recording starts, when the take is ready and what was saved. The waveform's fill moves in one-second steps by a clip, so it shows the same under reduced motion.
How does trimming work?
In review the slider has two thumbs, start and end, in whole seconds, and they stay a second apart. The part kept is drawn solid on the waveform and the rest is faint, and the text above it says how much is kept, such as "Keep 0:09 of 0:12". Each thumb is read as "Start at 0:02" or "End at 0:11". The memo is saved with the length that was kept, and the list shows that length.
What does Discard do?
It asks in the same row, "Discard this take?", with Keep it and Yes, discard, and moves focus to Keep it, so a stray press loses nothing. Yes, discard clears the take and returns to the record button with focus on it. Cancel, Close and Escape also let the take go. There is no second dialog on top.
Is it accessible from the keyboard?
Yes. The real dialog is named New voice memo, focus starts inside it and stays inside until it closes, and Escape and the close button return focus to New memo. The record button is one button that says Start recording or Stop recording, the thumbs move with the arrow keys, Home and End, and Save memo stays quiet until there is a take and says what is missing when pressed. The button and the dialog sit inside DialogTrigger, controlled with isOpen and onOpenChange, React Aria focuses the dialog itself so a frame later focus moves to the record button, and the dialog title is a level 2 heading.