audiocn

useAudioDevices

The list of audio input or output devices, with permission state and live updates.

$ pnpm dlx shadcn@latest add @audiocn/use-audio-devices

Usage

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

if (permission === "prompt") {
  return <Button onClick={requestPermission}>Allow microphone access</Button>;
}

return (
  <AudioDeviceSelect
    devices={devices}
    value={deviceId}
    onValueChange={setDeviceId}
  />
);

Browsers hide device names until the page has microphone access. Until then devices are labelled "Microphone 1", "Microphone 2" and so on.

Options

Prop

Type

Returns

Prop

Type