Audio Device Select

InstallationCopy Anchor Link

$ pnpm dlx shadcn@latest add @audiocn/audio-device-select

UsageCopy Anchor Link

import { AudioDeviceSelect } from "@/components/ui/audio-device-select";

const { devices, permission, requestPermission } = useAudioDevices();

<AudioDeviceSelect
  devices={devices}
  onRequestPermission={requestPermission}
  onValueChange={setDeviceId}
  permission={permission}
  value={deviceId}
/>;

Devices come in as a prop, so the select works with useAudioDevices or with any device list, such as one from a native backend.

AnatomyCopy Anchor Link

<AudioDeviceSelect devices={devices}>
  <AudioDeviceSelectTrigger>
    <AudioDeviceSelectValue placeholder="Select a microphone" />
  </AudioDeviceSelectTrigger>
  <AudioDeviceSelectContent />
  <AudioDeviceSelectPreview>
    <LiveWaveform source={analyser.visual} />
  </AudioDeviceSelectPreview>
</AudioDeviceSelect>

AudioDeviceSelectContent renders one item per device. Pass children to render items yourself with AudioDeviceSelectItem.

ExamplesCopy Anchor Link

StatesCopy Anchor Link

Selected device, a "None" option, a device that was unplugged, and loading.

BehaviourCopy Anchor Link

• A selected device that disappears is kept and shown as "(disconnected)", so the selection is never lost silently.
• Devices with status unavailable or permission-required are disabled.
• The default device is marked.

ThemingCopy Anchor Link

API referenceCopy Anchor Link