Add the option to set a custom 'sinkId' (audio output device)

[fartek]

I needed this functionality for a project we were building, so I decided to add it to the library. Basically, when you create the Howl object, you add the parameter 'sinkId' and set it to the id of a custom audiooutput device (also set html5 to true). For more info on this: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices

[goldfire]

Interesting, I hadn't heard about this until just now. As it stands right now, it would need to be added as its own plugin since the howler.js core needs to have full compatibility between HTML5 and Web Audio. I'd also like to see this get a little less "experimental," so I'll leave this for now and re-asses in the future. Thanks!

[ibc]

Hi, any update or planning for this feature?
Thanks.

[danjenkins]

I also need to be able to set this. I wouldnt class this as experimental any longer. Considering forking the project for the time being until we can get this PR merged.

[fartek]

Hey, I haven't been paying too much attention to this to this thread as we've ended up using my fork. Can anyone comment what's the current state regarding setting sink ids? @goldfire?

[xdumaine]

Related: https://github.com/WebAudio/web-audio-api/issues/445

[xdumaine]

Here's a little hacky way to make howler's webaudio mode fallback to html5 for playing sounds to alternate sinkIds:

const mediaStreamNode = Howler.ctx.createMediaStreamDestination();
Howler.masterGain.connect(mediaStreamNode);

const devices = await navigator.mediaDevices.enumerateDevices();
const dests = devices.filterBy('kind', 'audiooutput');

const promises = dests.map(async dest => {
  const audio = document.createElement('audio');
  audio.autoplay = true;
  document.body.append(audio);
  audio.srcObject = mediaStreamNode.stream;
  await audio.setSinkId(dest.deviceId);
});

await Promise.all(promises);

Obviously, we'd want to integrate this with the html 5 node in howler, but the fact that this mixes WebAudio with HTML5 would probably cause some issues with howler core.

[danjenkins]

@xdumaine this is exactly how I've worked around it before

And yes, the fact that you need to have a html element to set a sink Id sucks and should be fixed within web audio

[n3tman]

Thanks for this PR! Helped me understand how to edit the library, since I had the same problem.
Though I had to add some more lines to Sound.prototype methods init and reset:

self._sinkId = parent._sinkId;

You might want to check wavesurfer.js implementation of setSinkID:

• WebAudio
• MediaElement