Audio Device Select

A microphone, speaker or source picker with permission, loading and disconnected states.

2 min read · 249 words

Installation

$ pnpm dlx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/audio-device-select.json

$ npx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/audio-device-select.json

$ yarn dlx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/audio-device-select.json

$ bunx --bun shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/audio-device-select.json

Usage

<script lang="ts">
	import { AudioDeviceSelect } from "#lib/components/ui/audio-device-select/index.js";
	import { useAudioDevices } from "#lib/hooks/use-audio-devices.svelte.js";

	const audioDevices = useAudioDevices();
	let deviceId = $state<string | null>(null);
</script>

<AudioDeviceSelect
	devices={audioDevices.devices}
	onRequestPermission={audioDevices.requestPermission}
	permission={audioDevices.permission}
	bind: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.

Anatomy

<AudioDeviceSelect {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.

Examples

States

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

Behaviour

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.

Theming

Data attribute	On	Meaning
`data-loading`	trigger	Devices are loading
`data-permission`	trigger	`granted`, `prompt` or `denied`
`data-missing`	trigger	The selected device is gone

API reference

Prop	Type	Default
`devices` { id, label, isDefault?, status?, description? }.	`AudioDevice[]`	—
`value` The device id. null is no selection, or None with allowNone. Bindable.	`string \| null`	`null`
`onValueChange`	`(id: string \| null) => void`	—
`allowNone` Adds a None item.	`boolean`	`false`
`noneLabel`	`string`	`"None"`
`loading` Shows "Finding devices…".	`boolean`	`false`
`permission`	`"granted" \| "prompt" \| "denied"`	`"granted"`
`onRequestPermission` Shows an "Allow access" button when permission is needed.	`() => void`	—
`disabled`	`boolean`	`false`