Question

I was wondering if there is a way to control audio output device patching in HTML5/JavaScript? Like, if the user wanted to have one sound in my web app to go out of one audio device, and another sound out of a different audio device. I know the user can set the default output device on their computer, but for the web app I'm working on, I would like them to be able to send individual sounds to individual outputs while other sounds are playing, similar to the interface below (from a program called QLab).

I feel like the obvious answer is NO, and I do not want to resort to using flash or java. I MIGHT be okay with having to write some sort of browser plugin that interfaces with javascript.

QLab screenshot

Was it helpful?

Solution

So, after receiving basically zero helpful answers - and finding no further helpful information online, I think I figured out something that we, as developers, NEED to start requesting from browser vendors and w3c. We need to be able to request hardware access from users, in a similar fashion that we can request to access a user's location, or how we can request to send a user push notifications.

Until web developers are allowed the same control as native application developers over hardware, we will be left at a huge disadvantage over what we can offer our users. I don't want to have my users install third/fourth party plugins to enable a little more control/access to their I/O. Users should not have to be inundated with keeping more software than just their web browser updated to have websites run well and securely. And I, for one, do not feel like it should be necessary to write in more languages than HTML, JavaScript, CSS, and PHP to get the same experience a user would get from a native application.

I have no idea how we approach browser vendors about this, but I feel like it would be good to start doing this.

OTHER TIPS

I know this is a little old, but just this year a method was added called "setSinkId" that you can apply to a media element (video, audio) to set the device that audio will be outputted to.

$('#video-element').setSinkId('default');

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/setSinkId

Though currently it seems only Chrome supports it. I haven't tested on Firefox or other web browsers.

I suggest you take a look at the Web Audio API: Specs --- Tutorial

There is the destination property in the Web audio API. However it is a readonly property ... so not settable.

Here:

The destination property always correlates to the default hardware output of sound, whether it’s through speakers, attached headphones, or a Bluetooth headset.

I'm working on a sound installation based off web audio and have run into the same problem. I want to map different channel outputs to different speakers. have you had any progress on this?

This gentleman seems to have managed to do it: http://www.brucewiggins.co.uk/?p=311 I tested this out on a apogee quartet and it worked - outputting to 8 different channels.

I also found this article useful: http://www.html5audio.org/2013/03/surround-audio-comes-to-the-web.html

if (context.destination.maxChannelCount >= 4) {
  context.destination.channelCount = 4;
}
// otherwise, let's down-mix to 2.0
else {
  context.destination.channelCount = 2;
}
context.destination.channelCountMode = "explicit";
context.destination.channelInterpretation = "discrete";
context.destination.numberOfOutputs = 4; 

While you can certainly use the splitter and merger nodes to assign to specific channels on the output, the actual devices you output are abstracted by the browser and inaccessible by your code.

I have done some experiments with 8-channel virtual audio cables and relaying that data to other sound devices outside of the browser. Unfortunately, I can't find a browser that will actually open an 8-channel sound card with more than 2 channels.

Hopefully, browsers in the future will provide more options. This flexibility will never come directly to JavaScript... and nor should it. This is an abstraction done for you, and if the browser uses it correctly, it won't be an issue.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top