"use client"; import * as React from "react"; import { cn, useMounted } from "@kineticui/core"; import { DownloadIcon, MicIcon, PauseIcon, PlayIcon, TrashIcon } from "@kineticui/icons"; export type AudioRecorderProps = { /** Called when a recording is finished. */ onRecorded?: (blob: Blob, url: string) => void; /** Stop automatically after this many seconds. */ maxSeconds?: number; className?: string; }; const fmt = (s: number) => `${String(Math.floor(s / 60)).padStart(2, "0")}:${String(Math.floor(s % 60)).padStart(2, "0")}`; /** Record a voice note: scrolling live waveform, pause/resume, playback, download, discard. */ export function AudioRecorder({ onRecorded, maxSeconds = 300, className }: AudioRecorderProps) { const mounted = useMounted(); const [state, setState] = React.useState<"idle" | "recording" | "paused" | "done" | "error">("idle"); const [levels, setLevels] = React.useState([]); const [seconds, setSeconds] = React.useState(0); const [url, setUrl] = React.useState(null); const [playing, setPlaying] = React.useState(false); const rec = React.useRef(null); const stopAll = React.useRef<() => void>(() => {}); const player = React.useRef(null); const stateRef = React.useRef(state); stateRef.current = state; const supported = mounted && typeof MediaRecorder !== "undefined" && !!navigator.mediaDevices?.getUserMedia; const start = async () => { try { const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); const ctx = new AudioContext(); const analyser = ctx.createAnalyser(); analyser.fftSize = 256; ctx.createMediaStreamSource(stream).connect(analyser); const buf = new Uint8Array(analyser.fftSize); const chunks: Blob[] = []; const mr = new MediaRecorder(stream); mr.ondataavailable = (e) => chunks.push(e.data); mr.onstop = () => { const blob = new Blob(chunks, { type: mr.mimeType }); const u = URL.createObjectURL(blob); setUrl(u); onRecorded?.(blob, u); }; mr.start(); rec.current = mr; let raf = 0; let last = 0; let elapsed = 0; let prev = performance.now(); const loop = (now: number) => { if (stateRef.current === "recording") { elapsed += (now - prev) / 1000; setSeconds(elapsed); if (elapsed >= maxSeconds) stop(); if (now - last > 70) { last = now; analyser.getByteTimeDomainData(buf); let peak = 0; for (const v of buf) peak = Math.max(peak, Math.abs(v - 128) / 128); setLevels((l) => [...l.slice(-79), Math.min(1, peak * 1.8)]); } } prev = now; raf = requestAnimationFrame(loop); }; raf = requestAnimationFrame(loop); stopAll.current = () => { cancelAnimationFrame(raf); stream.getTracks().forEach((t) => t.stop()); void ctx.close(); }; setLevels([]); setSeconds(0); setState("recording"); } catch { setState("error"); } }; const stop = () => { rec.current?.stop(); stopAll.current(); setState("done"); }; const discard = () => { if (url) URL.revokeObjectURL(url); setUrl(null); setLevels([]); setSeconds(0); setState("idle"); }; React.useEffect(() => () => stopAll.current(), []); const active = state === "recording" || state === "paused"; return (

{state === "done" && url ? ( <>

); }

Audio Recorder

Installation

Exports