Record buttonPro
Record with a count in, the input level as a ring around the button, pause and resume, and a take to play back, keep or discard.
On this page
ProA count in, the input level as a ring, pause, and a take to play back, keep or discard.
Installation
Usage
import { RecordButton } from "@/components/ui/chatcn/pro/record-button"
<RecordButton countIn={3} maxSeconds={60} onRecorded={(blob, seconds) => upload(blob)} />It records the microphone with echo cancellation and noise suppression off, or any MediaStream from getStream. The level keeps reading through the count in, so the ring shows the input before the take starts. useRecorder from @/hooks/use-chatcn-pro-music is the same logic without the button.
Examples
States
ProReady, a blocked microphone, no microphone and disabled.
Props
| Prop | Type | Notes |
|---|---|---|
getStream | () => Promise<MediaStream> | Default the microphone |
countIn, countSeconds, tick | Default 3, 1 s and a soft tick | |
maxSeconds | number | Stops on its own, drawn as a ring |
onRecorded, onDiscard, onError | ||
showTake, size, disabled | ||
labels | Partial<RecordButtonLabels> | Every string the button shows or announces, for translation |
Keyboard
| Key | Action |
|---|---|
Space or Enter | Start, stop, resume or record again |
Tab | Pause, play the take, discard |
Accessibility
- The button's name says what it does next: Start recording, Stop recording, Resume recording.
- The count in and Recording are announced; errors say how to fix them.
Motion
- The ring is the input level, read every frame. Count in numerals swap with a 150 ms crossfade. Nothing pulses while recording.