Reputation: 1
I'm working on a web application that requires assigning different audio output devices using setSinkId in Windows 11, but I'm encountering an issue where the audio always defaults to the system speaker regardless of my selection.
Here's a snippet of my code:
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();
};
}
I've set up a [JSFiddle]
https://jsfiddle.net/wvjtg79e/ example to demonstrate the issue.
Steps to Reproduce:
JSFiddle
link and run the code.Issue: The audio is played through the connected external speaker instead of the selected system speaker.
Environment: Browser: Microsoft Edge (latest version) OS: Windows 11
Questions:
Your insights and suggestions would be greatly appreciated! This feature is crucial for my application, and any help would be incredibly valuable.
Upvotes: 0
Views: 118