shadcn.io is not affiliated with official shadcn/ui
Voice Notes Chat Block for Ark UI
A thread of voice-note pills with a play and pause button, a drawn waveform whose played part turns solid, one speed button that cycles 1x, 1.5x and 2x, and a Transcript that opens under each note.
Installation
Overview
Play, speed up and read a voice note, with this voice notes chat for React with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Tapedeck, a voice-note messenger: the top bar names Odile Raftery, and the log interleaves text messages with three note pills. Each pill has a play and pause button, a drawn waveform whose played part turns solid as the playhead moves, a clock, one speed button that cycles 1x, 1.5x and 2x for every note, and a Collapsible Transcript with the note's typed words. Playing runs a progress over the note's own length (twelve seconds at most) and starting another note pauses the first. Nothing plays and the status line says so. The composer's Shine Button, the only colored control, sends text, and the frame is ruled by Guides. It's the starting point for a messenger with voice notes.
FAQ
What stays in the page, and how do I make it real?
Everything. No audio is loaded or played: the playhead is a clock that advances in quarter-second steps at the chosen speed, the waveforms are drawn from seeds and the transcripts are typed. To wire it for real, play the note's audio file and set the progress from the media element's time, keep the speed on its playbackRate, and load the transcript from your speech service.
How does the speed button work?
One state holds the speed for every note. Pressing the button on any pill moves it from 1x to 1.5x to 2x and back, the playhead advances that much faster, and the status line announces the speed. The button's visible text is the speed and its hidden name says what it does.
Can two notes play together?
No. The playhead belongs to one note at a time: pressing play on another note pauses the first, starts the new one from the beginning and leaves the first one's wave empty. Pressing play on a note that has finished starts it again.
How do transcripts work?
Each pill has a Transcript disclosure that opens the typed words under the wave, one at a time: opening another closes the first. The text is plain text in the page, so it is searchable and translatable.
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. Play and Pause is one named button, the wave is hidden because the clock and transcript carry the same information in text, and the status line announces play, pause and speed changes.