demo · v133
Device picker with capability probe
Detect every audio output capability the page has — setPreferredSinkId, the legacy per-element setSinkId, and the unprompted selectAudioOutput picker — then enumerate available sinks and apply the user's choice. The right tool for the right browser.
setPreferredSinkId on navigator.mediaDevices. Chrome 133+ required.capability probe
Click “enumerate output devices”. The browser will surface device labels only once the user has granted any media permission — otherwise you'll see generic IDs.
currently applied sink
how it composes
The browser inherits the per-document preferred sink for every audio renderer — HTML <audio>/<video>, AudioContext, captured streams, even cross-origin iframes. So you only have to set it once in the top frame:
// once, in the top frame — no per-element wiring
await navigator.mediaDevices.setPreferredSinkId(chosenDeviceId);
// every <audio>, every WebAudio context, every iframe respects this.If setPreferredSinkId is missing, fall back to per-element setSinkId on each renderer. The picker concept (selectAudioOutput) is a related but separate API that surfaces a chooser without you enumerating devices yourself.