Voice recorderPro

• Type: Component (special)
• Access: Xzero Pro
• Page: https://ui.xzero.co.uk/components/voice-recorder
• Markdown: https://ui.xzero.co.uk/components/voice-recorder/markdown
• Source file: registry/components/voice-recorder/voice-recorder.tsx
• Dependencies: motion, lucide-react
• Keywords: special, motion, react voice recorder, voice message, audio recorder ui, whatsapp voice note, record audio button, voice memo

When to use

• Voice notes in chats, comments, or field notes where speaking beats typing.
• A thread of voice bubbles with playback and scrubbing.

When not to use

• Use now-playing for music or long-form audio.
• Use hold-to-confirm for press-and-hold actions that do not record.
• Use stopwatch to time something without audio.

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui-pro/voice-recorder

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { VoiceRecorder, voicePeaks } from "@/components/xzero/voice-recorder/voice-recorder";

const history = [
  { id: "m1", duration: 7, peaks: voicePeaks(1, 7), from: "Sam", avatar: "/people/sam.jpg", meta: "9:41 AM" },
];

export function Thread() {
  return <VoiceRecorder defaultMessages={history} maxDuration={30} onSend={message => console.log("sent", message.id)} />;
}

API reference

VoiceRecorder

A voice note composer and thread. Tap the mic to record into a live bar with a scrolling waveform and timer, stop into a review you can play and scrub, then send the take into the thread as a voice bubble.

Prop	Type	Default	Description
defaultMessages	{ id: string; duration: number; peaks: number[]; from?: string; avatar?: string; meta?: string }[]	[]	Messages already in the thread, oldest first. peaks are bar heights from 0 to 1 (the exported voicePeaks makes deterministic data); from and avatar mark incoming messages.
onSend	(message: VoiceMessage) => void	–	Called with each sent take. Recording is simulated, so wire this to real audio capture.
onCancel	() => void	–	Called when a take is discarded with the trash button or Escape.
maxDuration	number	60	Seconds before recording stops on its own and moves to review.
sentMeta	string	"Just now"	Meta line under messages you send.
label	string	"Voice messages"	Accessible name of the whole recorder.
className	string	–	Class on the root section.

Keyboard interactions

Keys	Action
Enter / Space	Activate the focused control: record, stop, send, play, or discard. Focus follows from mic to stop to send and back.
Escape	Discard the take while recording or reviewing.

Accessibility

• The recorder is a labelled section with a labelled message list; every control is a native button with an aria-label, such as "Stop recording at 0:04" or "Play voice message from Sam, 0:07".
• Recording, review, send, and discard are announced in a polite live region that also describes the mic.
• Waveforms, the live canvas, and timers are aria-hidden; the button labels carry the durations.

Motion

• Mic, recording bar, review, and sent bubble share one layout id, so a take morphs from the mic into the thread on a spring.
• The live waveform scrolls on a canvas and playback fills the bars left to right; side buttons pop in and content crossfades with a slight blur.
• Motion follows the user's reduced motion setting: layout morphs are skipped, the waveform steps instead of growing, and the thread scrolls without smoothing.

Responsive behavior

• The recorder fills its container width, and the review waveform flexes its bars between 1.5px and 3px to fit.
• Waveforms keep touch-action pan-y, so scrubbing by tap works without blocking scroll.

Performance

• Recording is simulated; the live waveform is painted to a canvas each frame only while recording.
• Each message runs its own frame callback that returns early unless playing; long threads are not virtualized.

Notes for AI

• Use for voice notes in chats, comments, or field notes where speaking beats typing. Audio is simulated; add MediaRecorder capture and upload in onSend before shipping.
• Seed history with voicePeaks for deterministic bars. Messages live in internal state, so persist them from onSend and pass them back as defaultMessages.

Related

• Now playing: Grow a mini player into the full player in one continuous morph.
• Slider: Pick a value or a range on a track that follows your finger.
• Hold to confirm: Confirm a destructive action by holding, not tapping.

Also in audio and video

• Voice orb: A voice mode orb that listens, thinks, and speaks, with a live transcript and call controls.

Guidance for AI tools

Voice recorder: Record with a live waveform, review and scrub, then send the take into the thread. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt