JSFiddle - React, Tailwind, and code Playground

HTML

<button id="btn">get list of outputs</button>

JavaScript

btn.onclick = async (evt) => {
  // request device access the bad way,
  // until we get a proper mediaDevices.selectAudioOutput
  (await navigator.mediaDevices.getUserMedia({audio:true}))
      .getTracks().forEach(track => track.stop());
  
  const devices = await navigator.mediaDevices.enumerateDevices();
  const audio_outputs = devices.filter( (device) => device.kind === "audiooutput" );
  
  const sel = document.createElement("select");
  audio_outputs.forEach( (device, i) => sel.append(new Option( device.label || `device ${i}`, device.deviceId )) );
  document.body.append(sel);
  
  btn.textContent = "play audio in selected output";
  btn.onclick = (evt) => {
    const aud = new Audio("https://upload.wikimedia.org/wikipedia/en/d/dc/Strawberry_Fields_Forever_%28Beatles_song_-_sample%29.ogg");
    aud.setSinkId(sel.value);
    aud.play();
  };
}