A dropdown picker for choosing a microphone, speaker or other audio source, with built-in loading, permission-request and disconnected-device states.
"use client";
import { AudioDeviceSelect } from "@/components/ui/audio-device-select";
import type { AudioDevice } from "@/components/ui/audio-device-select";
import { useState } from "react";
const devices: AudioDevice[] = [
{ id: "built-in-mic", label: "Built-in Microphone", isDefault: true },
{ id: "usb-mic", label: "Shure MV7+", description: "USB Audio Device" },
{ id: "bt-headset", label: "AirPods Pro", description: "Bluetooth" },
];
export default function AudioDeviceSelectDemo() {
const [value, setValue] = useState<string | null>("built-in-mic");
return (
<div className="flex w-full items-center justify-center p-6">
<div className="w-full max-w-sm">
<AudioDeviceSelect
devices={devices}
onValueChange={setValue}
permission="granted"
value={value}
/>
</div>
</div>
);
}