shadcn.io is not affiliated with official shadcn/ui
Voice Memo Task List Block for React
A task list where a task can carry a short voice memo drawn as a waveform: pick a task, press the record button to run a clock up to 12 seconds, play a memo to move a playhead, and delete one with Undo; no microphone is used.
Installation
Overview
Let people talk a task through, with this voice memo to-do list block for React with Base UI, and say plainly that it is a demo: the microphone is never asked for, nothing is recorded and no sound plays. A Native Select chooses which task the next memo goes on, and the catalog Record Button starts a take whose clock is the catalog Timer, one second at a time up to 0:12, filling a drawn waveform as it runs. Pressing it again attaches a placeholder memo of that length to the task. Each row is two lines: a Checkbox and the title, then either "No memo" or a play button, the waveform with a playhead that moves through it as the clock runs, the length and a delete button. Deleting a memo keeps a one-line Undo in the foot. The frame is ruled by Guides. For note apps, field-service lists and anywhere a task is easier to explain out loud.
FAQ
Does it record or play audio?
No. Nothing here asks for the microphone, and no audio element exists. A take is a clock: while it runs, a drawn waveform fills in, and when you stop, a memo of that many seconds is attached to the task as a picture. Play moves a playhead through the waveform and no sound comes out. The page says so beside the record button and the status line repeats it.
How does the clock work?
The catalog Timer counts down from twelve seconds and reports each second; the block shows the seconds taken. It starts only when you press the record button or a play button, and one clock runs at a time: starting a take stops a playing memo, and a play button stays inert (but focusable, and it answers) while a take runs. A take under one second is refused with a message, and the twelfth second ends the take by itself.
How does Undo work?
Deleting a memo removes it from its task and shows one line, for example "Deleted the memo on 'Order paint samples'", with an Undo button that puts the same length back. The line holds one removal, and recording a new memo clears it.
How do I record real audio?
Replace the clock with the browser's MediaRecorder, asked only when the person presses record, and store the blob or upload it. Keep the drawn waveform by reading levels from an AnalyserNode, and use an audio element for playback in place of the moving playhead. Say what you record and where it goes next to the button, and keep the status line.
Is it accessible?
Every control is named for its task: "Play the memo on 'x'", "Delete the memo on 'x'". The waveform is hidden from assistive technology because the length and the buttons say the same, the clock is silent (a polite status message reports starts, stops and results), and playback never starts by itself. The record button reads as Start recording or Stop recording and its clock uses tabular digits so nothing shifts.