Audio Device Select

InstallationCopy Anchor Link

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

UsageCopy Anchor Link

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

const audio = useAudioDevices();

<AudioDeviceSelect
  devices={audio.devices}
  onRequestPermission={audio.requestPermission}
  onValueChange={setDeviceId}
  permission={audio.permission === "unsupported" ? "denied" : audio.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 a Select.Listbox item renderer to render AudioDeviceSelectItem yourself.

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