4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T1f21,"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 default 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") }, []) // Stop recording when muted useEffect(() => { if (isMuted && state === "recording") { stopRecording() } }, [isMuted, state, stopRecording]) // Cleanup on unmount 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" && ( )}

) } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4e",null,{"namespace":"@elevenlabs-ui","registryDependencies":["https://ui.elevenlabs.io/r/mic-selector.json","https://ui.elevenlabs.io/r/live-waveform.json","button","card","separator"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"examples/mic-selector-demo.tsx","content":"$50","type":"registry:example"}],"className":"h-[70svh] min-h-80"}]]}]