Mic Selector

Features

• Device Management: Automatically detects and lists available microphones
• Live Preview: Real-time audio waveform visualization when dropdown is open
• Mute Toggle: Control preview audio on/off with controlled or uncontrolled state
• Permission Handling: Gracefully handles microphone permissions
• Auto-selection: Automatically selects first available device
• Device Changes: Listens for device connection/disconnection events
• Clean Labels: Automatically removes device metadata from labels
• Flexible Control: Works in both controlled and uncontrolled modes for device selection and mute state

Usage

import { MicSelector } from "@/components/ui/mic-selector";

Basic Usage

<MicSelector />

Controlled

const [selectedDevice, setSelectedDevice] = useState("")

<MicSelector value={selectedDevice} onValueChange={setSelectedDevice} />

With Mute Control

const [selectedDevice, setSelectedDevice] = useState("")
const [isMuted, setIsMuted] = useState(false)

<MicSelector
  value={selectedDevice}
  onValueChange={setSelectedDevice}
  muted={isMuted}
  onMutedChange={setIsMuted}
/>

Custom Styling

<MicSelector className="w-full max-w-md" />

Using the Hook

import { useAudioDevices } from "@/components/ui/mic-selector";

const { devices, loading, error, hasPermission, loadDevices } = useAudioDevices();

// Access available microphones
devices.map((device) => console.log(device.label, device.deviceId));

Microphone input requires a secure browser context and user permission. Provide a usable permission-denied state.