"use client" import { useCallback, useEffect, useRef, useState } from "react" import { Disc, Pause, Play, Trash2 } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { LiveWaveform } from "@/components/ui/live-waveform" import { MicSelector } from "@/components/ui/mic-selector" import { Separator } from "@/components/ui/separator" type RecordingState = "idle" | "loading" | "recording" | "recorded" | "playing" export function MicSelectorDemo() { const [selectedDevice, setSelectedDevice] = useState("") const [isMuted, setIsMuted] = useState(false) const [state, setState] = useState("idle") const [audioBlob, setAudioBlob] = useState(null) const mediaRecorderRef = useRef(null) const audioChunksRef = useRef([]) const audioElementRef = useRef(null) const startRecording = useCallback(async () => { try { setState("loading") const stream = await navigator.mediaDevices.getUserMedia({ audio: selectedDevice ? { deviceId: { exact: selectedDevice } } : true, }) const mediaRecorder = new MediaRecorder(stream) mediaRecorderRef.current = mediaRecorder audioChunksRef.current = [] mediaRecorder.ondataavailable = (event) => { if (event.data.size > 0) audioChunksRef.current.push(event.data) } mediaRecorder.onstop = () => { const blob = new Blob(audioChunksRef.current, { type: "audio/webm" }) setAudioBlob(blob) stream.getTracks().forEach((track) => track.stop()) setState("recorded") } mediaRecorder.start() setState("recording") } catch (error) { console.error("Error starting recording:", error) setState("idle") } }, [selectedDevice]) const stopRecording = useCallback(() => { if (mediaRecorderRef.current && state === "recording") { mediaRecorderRef.current.stop() } }, [state]) const playRecording = useCallback(() => { if (!audioBlob) return const audio = new Audio(URL.createObjectURL(audioBlob)) audioElementRef.current = audio audio.onended = () => setState("recorded") audio.play() setState("playing") }, [audioBlob]) const pausePlayback = useCallback(() => { if (audioElementRef.current) { audioElementRef.current.pause() setState("recorded") } }, []) const restart = useCallback(() => { if (audioElementRef.current) { audioElementRef.current.pause() audioElementRef.current = null } setAudioBlob(null) audioChunksRef.current = [] setState("idle") }, []) useEffect(() => { if (isMuted && state === "recording") stopRecording() }, [isMuted, state, stopRecording]) useEffect(() => { return () => { if (mediaRecorderRef.current) mediaRecorderRef.current.stop() if (audioElementRef.current) audioElementRef.current.pause() } }, []) const showWaveform = state === "recording" && !isMuted const showProcessing = state === "loading" || state === "playing" const showRecorded = state === "recorded" return (

{state === "idle" && (

Start Recording

)} {showRecorded && (

Ready to Play

)}

{state === "idle" && ( )} {(state === "loading" || state === "recording") && ( )} {showRecorded && ( )} {state === "playing" && ( )}

) }

Mic Selector