mic-selector-demo

1"use client"
2 
3import { useCallback, useEffect, useRef, useState } from "react"
4import { Disc, Pause, Play, Trash2 } from "lucide-react"
5 
6import { cn } from "@/lib/utils"
7import { Button } from "@/components/ui/button"
8import { Card } from "@/components/ui/card"
9import { LiveWaveform } from "@/components/ui/live-waveform"
10import { MicSelector } from "@/components/ui/mic-selector"
11import { Separator } from "@/components/ui/separator"
12 
13type RecordingState = "idle" | "loading" | "recording" | "recorded" | "playing"
14 
15export default function MicSelectorDemo() {
16  const [selectedDevice, setSelectedDevice] = useState<string>("")
17  const [isMuted, setIsMuted] = useState(false)
18  const [state, setState] = useState<RecordingState>("idle")
19  const [audioBlob, setAudioBlob] = useState<Blob | null>(null)
20 
21  const mediaRecorderRef = useRef<MediaRecorder | null>(null)
22  const audioChunksRef = useRef<Blob[]>([])
23  const audioElementRef = useRef<HTMLAudioElement | null>(null)
24 
25  const startRecording = useCallback(async () => {
26    try {
27      setState("loading")
28 
29      const stream = await navigator.mediaDevices.getUserMedia({
30        audio: selectedDevice ? { deviceId: { exact: selectedDevice } } : true,
31      })
32 
33      const mediaRecorder = new MediaRecorder(stream)
34      mediaRecorderRef.current = mediaRecorder
35      audioChunksRef.current = []
36 
37      mediaRecorder.ondataavailable = (event) => {
38        if (event.data.size > 0) {
39          audioChunksRef.current.push(event.data)
40        }
41      }
42 
43      mediaRecorder.onstop = () => {
44        const blob = new Blob(audioChunksRef.current, { type: "audio/webm" })
45        setAudioBlob(blob)
46        stream.getTracks().forEach((track) => track.stop())
47        setState("recorded")
48      }
49 
50      mediaRecorder.start()
51      setState("recording")
52    } catch (error) {
53      console.error("Error starting recording:", error)
54      setState("idle")
55    }
56  }, [selectedDevice])
57 
58  const stopRecording = useCallback(() => {
59    if (mediaRecorderRef.current && state === "recording") {
60      mediaRecorderRef.current.stop()
61    }
62  }, [state])
63 
64  const playRecording = useCallback(() => {
65    if (!audioBlob) return
66 
67    const audio = new Audio(URL.createObjectURL(audioBlob))
68    audioElementRef.current = audio
69 
70    audio.onended = () => {
71      setState("recorded")
72    }
73 
74    audio.play()
75    setState("playing")
76  }, [audioBlob])
77 
78  const pausePlayback = useCallback(() => {
79    if (audioElementRef.current) {
80// … truncated