Code

Allows web applications to prompt users to select an audio output device (speaker, headset, etc.) and redirect audio playback to it. Requires a secure context (HTTPS) and transient user activation.

MDN Reference

Key Interfaces

• MediaDevices.selectAudioOutput() — Prompts the user to select an audio output device and returns its MediaDeviceInfo.
• HTMLMediaElement.setSinkId(deviceId) — Routes audio output to a device by its ID.
• HTMLMediaElement.sinkId — Read-only. The current audio output device ID (empty string = browser default).

Example — Select output device and redirect audio

Trigger on a user gesture (e.g. button click). Prompt the user to choose an output device, then redirect a playing audio element to that device.

document.querySelector('#selectOutputBtn').addEventListener('click', async () => {
  if (!navigator.mediaDevices.selectAudioOutput) {
    console.log('selectAudioOutput() not supported or not in secure context.');
    return;
  }

  // Prompt user to choose an audio output device
  const audioDevice = await navigator.mediaDevices.selectAudioOutput();

  console.log(
    `${audioDevice.kind}: ${audioDevice.label} id = ${audioDevice.deviceId}`
  );
  // audiooutput: Realtek Digital Output id = 0wE6fURSZ20H0N2NbxqgowQJLWbwo+5ablCVVJwRM3k=

  // Create and play audio on the default device first
  const audio = document.createElement('audio');
  audio.src = 'https://example.com/audio.mp3';
  audio.play();

  // Redirect output to the selected device
  await audio.setSinkId(audioDevice.deviceId);
});

Example — Enumerate permitted audio outputs

After the user has granted permission via selectAudioOutput(), the device appears in enumerateDevices().

const devices = await navigator.mediaDevices.enumerateDevices();
const audioOutputs = devices.filter(d => d.kind === 'audiooutput');

audioOutputs.forEach(device => {
  console.log(`${device.label} — ${device.deviceId}`);
});

// React to device connect/disconnect
navigator.mediaDevices.addEventListener('devicechange', async () => {
  const updated = await navigator.mediaDevices.enumerateDevices();
  const stillConnected = updated.some(d => d.deviceId === currentSinkId);
  if (!stillConnected) audio.pause();
});