shadcn.io is not affiliated with official shadcn/ui
Audio Note Comments Block for Radix UI
Three voice notes on a pricing review with a drawn waveform, Play and Pause, a scrub slider and a simulated recorder that posts a new note from You.
Installation
Overview
Collect spoken feedback next to the work, with this voice note thread for React with Radix UI. A compact header names the review. Under it a hairline frame holds three notes in a held scroll region: each has the speaker, the age, a one-line subject, a Play button, a drawn waveform, a clock and a Slider that scrubs. Nothing plays: the playhead is the catalog Timer counting the note's seconds, and the page says so. The foot is a simulated recorder: Record Button starts a take of up to thirty seconds whose clock is a Timer and whose waveform grows with it, Stop ends it, and the take becomes a preview shaped from its length. The one Shine Button, Post note, adds it to the thread as a note from You. It is built from Slider, Timer, Record Button, Avatar, Badge, Shine Button and Guides, with a CSS entrance only. For design reviews, support hand-offs and any thread where talking is faster than typing.
FAQ
How do I use my own notes?
Edit START. A note has an id, who recorded it (by), an ISO at, a caption, its length in seconds and a seed that picks the shape of its waveform. Ages are worked out from AS_OF, never from the clock. In a real app the waveform comes from your audio: sample peaks on the server when the file is stored and send the levels with the note.
What stays local, and how do I make it real?
All of it. No microphone is requested and nothing is recorded or played: Record runs a Timer and draws a waveform, and Post note adds a row to a list in the page. To make it real, ask for the microphone from the Record handler, keep the recorded chunks, upload the file in post, and drive the playhead from an audio element instead of the Timer.
How does the scrubber work?
Each note has its own slider named after its speaker ("Position in the note by Yara Delacroix") and read as a time. Dragging or using the arrow keys moves the playhead; if that note is playing it carries on from the new place, otherwise it waits. Only one note plays at a time, and the clock moves in one-second steps, also under reduced motion.
What can the recorder do?
Record starts a take, the same button reads Stop while it runs, and the take ends by itself at 0:30. A take under a second is refused with a sentence. After Stop you can Post note, Record again or Discard take; the button is always in its place and says "Record a note first." when there is nothing to post. Playing is blocked while recording.
Is it accessible?
Play and Pause are named after the speaker, the scrubbers are labelled sliders, the notes are an ordered list in a region you can scroll with the keyboard, and one polite status line says what changed. The clocks are hidden from screen readers so nothing is read every second. The waveform is a picture and is hidden.