Voice Pill
A microphone control that opens into a live recording capsule with a level meter, elapsed time, and a deliberate stop.
Simulated meter. No microphone is requested in this preview.
Implementation
1"use client";2 3import {4 useId,5 useState,6 type ButtonHTMLAttributes,7 type CSSProperties,8} from "react";9import { Mic } from "lucide-react";10 11export type VoicePillProps = Omit<12 ButtonHTMLAttributes<HTMLButtonElement>,13 "children" | "onChange"14> & {15 /** Controlled listening state. */16 recording?: boolean;17 /** Initial listening state when uncontrolled. */18 defaultRecording?: boolean;19 /** Called when the recording state changes. */20 onRecordingChange?: (recording: boolean) => void;21 /** Called when a recording stops with the elapsed duration in seconds. */22 onStop?: (elapsedSeconds: number) => void;23 /** Called when Escape discards a recording. */24 onCancel?: () => void;25 /** Elapsed seconds supplied by the recorder. */26 elapsedSeconds?: number;27 /** Normalized 0–1 levels for the waveform; the host owns the signal. */28 levels?: readonly number[];