Tap the mic to record

Controls

maxDurations

simulate

accent

sizepx

AI Recorder

Voice recorder pill that morphs from a mic button into a live waveform with timer, pause, cancel and stop, then into a scrubbable playback row.

Open in v0

$ pnpm dlx shadcn@latest add @tweenly/ai-recorder

import { AiRecorder } from "@/components/ai-recorder"

export function Demo() {
  return (
    <AiRecorder
      maxDuration={30}
      simulate
      onRecordingComplete={(blob, ms) => upload(blob)}
    />
  )
}

Updates live as you change the controls. Only non-default props are included.