Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 Audio Output Patching

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

like image 979
CJT3 Avatar asked Apr 10 '14 00:04

CJT3


5 Answers

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.

like image 179
CJT3 Avatar answered Oct 23 '22 09:10

CJT3


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.

like image 40
Magnie Mozios Avatar answered Oct 23 '22 09:10

Magnie Mozios


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.

like image 45
Arnaud Leyder Avatar answered Oct 23 '22 09:10

Arnaud Leyder


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; 
like image 2
ttyling Avatar answered Oct 23 '22 10:10

ttyling


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.

like image 1
Brad Avatar answered Oct 23 '22 08:10

Brad