VoiceRecord
voice-record语音录制 · 圆形录音按钮(光环脉动+波形动画) · idle/recording/processing/disabled 四态 + 按住说话(默认·pointercancel 兜底防 iOS 死锁)/点击切换双模式 + levels 波形驱动 + sm/md/lg 三档 · 纯 Pointer Events 零依赖
用法
基础用法（按住说话）
默认 pressAndHold：按下开始录音、松开结束进入处理，iOS 手势打断（pointercancel）也能正确松手。
按住说话
tsx
const [status, setStatus] = useState<VoiceRecordStatus>("idle");
const [levels, setLevels] = useState<number[]>([]); // 麦克风分析器喂 0-1 波形
<VoiceRecord
status={status}
levels={levels}
onPress={() => setStatus("recording")}
onRelease={() => setStatus("processing")}
/>点击切换模式
pressAndHold={false} 改为点击开始 / 再点击结束，onToggle 收到当前状态自行流转。
点击说话
tsx
<VoiceRecord
status={status}
levels={levels}
pressAndHold={false}
onToggle={(s) => (s === "idle" ? start() : stop())}
/>尺寸
sm / md / lg 三档，图标与标签随档位缩放。
按住说话
按住说话
按住说话
tsx
<>
<VoiceRecord size="sm" />
<VoiceRecord size="md" />
<VoiceRecord size="lg" />
</>VoiceRecord
语音录制触发器，通过 status 驱动视觉反馈。
状态
| status | 效果 | 点击行为 |
|---|---|---|
| idle | 默认 mic 图标 | 触发 onToggle → 开始录音 |
| recording | 脉动光环 + 波形条 + 按钮缩小红色 | 触发 onToggle → 停止 |
| processing | 旋转加载态 | 无点击响应 |
| disabled | 灰色不可交互 | 无 |
Props
| Prop | 类型 | 默认 | 说明 |
|---|---|---|---|
| status | "idle" | "recording" | "processing" | "disabled" | "idle" | 当前状态 |
| onToggle | (status) => void | — | 状态切换回调 |
| levels | number[] | [] | 波形级别(0-1)；空数组=无波形 |
| size | "sm" | "md" | "lg" | "md" | 按钮尺寸 |
| labelIdle | string | "按住说话" | idle 态文案 |
| labelRecording | string | "松开结束" | recording 态文案 |
| labelProcessing | string | "处理中…" | processing 态文案 |
用法
tsx
<VoiceRecord
status={phase === "recording" ? "recording" : phase === "processing" ? "processing" : "idle"}
levels={audioLevels}
onToggle={(s) => s === "idle" ? onStart() : onStop()}
/>Playground
按住说话
<VoiceRecord status="idle" size="md" />