HTML/js select audio output device in browser

Question

I have a created a simple soundboard in HTML which includes simple lines like this:

<body>
    <audio id="sound1" src="mysound.wav"></audio>
    <button class="button" onclick="document.getElementById('sound1').play()">My sound</button>
</body>

Is there any way the user can select which audio output device the sound will be played through, with a dropdown menu or similar?

The browser is not aware of audio devices. They are controlled at an OS level. — Tom
– Tom, Commented Oct 2, 2017 at 10:09
@Tomm That's not the case any more, WebRTC has access to I/O devices. — Jamie
– Jamie, Commented Jul 5, 2018 at 10:06

Roman Azarov · Accepted Answer · 2020-12-20 10:07:23Z

3

Now it is possible.

First you can gather possible audiooutput devices by running navigator.mediaDevices.enumerateDevices() and filtering found devices by property 'kind' equal to 'audiooutput'.

Then you should use setSinkId() method of DOM's audio/video element. Looks like you have to run setSingId(someSelectedDeviceId) for each video/audio element on your HTML-page

This is quite new feature that still not supported by Safari. But Chrome and partially FireFox already have this support https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/setSinkId

answered Dec 20, 2020 at 10:07

Roman Azarov

1318 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

P.S. · Accepted Answer · 2017-10-02 10:19:57Z

-1

Here is the example how to change audio.src via select:

function play() {
  document.getElementById('sound1').play()
  console.log(document.getElementById('sound1').getAttribute('src') + " starts playing")
}

function changeSound() {
  document.getElementById('sound1').src = document.getElementById('select').value
  console.log("selected sound: " + document.getElementById('sound1').src)
}

<audio id="sound1" src="mysound1.wav"></audio>
<select id="select" onchange="changeSound()">
  <option value="mysound1.wav">mysound1.wav</option>
  <option value="mysound2.wav">mysound2.wav</option>
  <option value="mysound3.wav">mysound3.wav</option>
</select>
<button class="button" onclick="play()">My sound</button>

answered Oct 2, 2017 at 10:19

P.S.

16.4k14 gold badges65 silver badges86 bronze badges

Collectives™ on Stack Overflow

HTML/js select audio output device in browser

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related