shadcn.io is not affiliated with official shadcn/ui
Voice Input Chat Block for React Aria
A narrow thread whose microphone button swaps the field for a recorder with a count-up clock, a drawn level meter, Pause, Cancel and Send, stops itself at 0:15 and posts a voice bubble with a drawn waveform.
Installation
Overview
Record a voice message without ever touching the microphone, with this voice input chat for React with React Aria. A hairline frame with a plus mark on each corner holds a narrow window of fixed height for Vocalbox, a voice-message app: the top bar names Pello Askerov, and the log holds two voice bubbles (a play button, a drawn waveform and the length) between text messages. The microphone button beside the field swaps it for a recorder of the same height: Pause, a count-up clock, a drawn level meter that moves with the clock, Cancel (Escape too, with focus back on the microphone) and the one colored Shine Button to send. A take stops itself at 0:15 and says "Limit reached in this demo"; sending posts a voice bubble shaped from the take and the real length. The frame is ruled by Guides. It's the starting point for a messenger with voice.
FAQ
What stays in the page, and how do I make it real?
Everything. No microphone is requested, nothing is recorded or played, the level meter is a drawing keyed to the clock, and the waveform in a bubble is drawn from a seed. To wire it for real, ask for the microphone when the visitor presses the button, feed a recorder's levels to the meter, upload the take on Send and play the stored file from the bubble.
How is the length bounded?
A single interval counts a second at a time while the take is running and not paused, and stops at fifteen. At the limit the clock stays at 0:15, the status line says the limit was reached, and Send still posts the take. Pause holds the clock and the meter.
How do I cancel a take?
With the Cancel button or by pressing Escape on any recorder control. The take is dropped, nothing is posted, and focus returns to the microphone button so you can start again.
How does the composer work?
Enter sends and Shift and Enter add a line, which the field's description tells a screen reader; Enter during text composition (an IME) is left alone. The field grows with its content up to a limit, Send stays quiet while there is nothing to send and says so if pressed, and focus returns to the field after sending.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log, so new messages are read out once, and every message starts with a hidden sender and time. The clock is hidden from assistive technology and the status line announces start, pause, cancel and the limit instead, so it is not read every second; every recorder button is named.