18

I have been using web audio api and have created a context, and populated a source buffer with data. It plays fine over the default output device, but i don't understand how to choose the destination. In an old w3 spec you were able to pass in the correct deviceId to the audio context constructor, but i can't figure out how to do it now without using a media element. Any suggestions?

source = context.createBufferSource()
source.loop = true;
source.buffer = globalAudioBuffer;
source.connect(context.destination);
context.resume();
source.start(0);
3
  • 1/2 Are there nowadays a way to select the audio output device for a HTML page using WebAudioAPI, supported in the latest stable Chrome or latest stable Firefox? Maybe using Audio Output Devices API? A simple runnable example would be interesting for many purposes.
    – Basj
    Feb 9 at 23:54
  • 2/2 Let's say I want the browser audio output to go to ASIO4ALL (to benefit from very low latency - for a in-browser musical sampler I'm currently building), how to do this in Chrome or Firefox for Windows?
    – Basj
    Feb 9 at 23:55
  • PS: in the case of Chrome or Firefox for Windows
    – Basj
    Feb 10 at 0:29

2 Answers 2

20

Unfortunately, setting the destination audio device of a webaudio graph isn't yet implemented, and the api for this is not yet finalized.

What you can do for now, is connect the webaudio graph to an HTML element, and set the sinkid of the element (currently works on Chrome only)

Here is a simple example:

var ac = new AudioContext();
var audio = new Audio();
var o = ac.createOscillator();
o.start();
var dest = ac.createMediaStreamDestination();
o.connect(dest);
audio.src = URL.createObjectURL(dest.stream);
audio.play();

Now your oscillator will play through the audio element and you can now call audio.setSinkId() with the deviceId of a connected output device.

10
  • 1
    Good luck. If you want to know the status of this feature you can follow the open issue.
    – Asher
    Mar 29, 2017 at 5:58
  • 2
    Strangely, this approach is causing audio glitching for us with heavy main thread load (e.g. lots of oscillators started in a short period of time), and a detuned audio output (!) for a few seconds afterwards, observable from chrome 56 all the way to 63 (current). My assumption is that main thread load interferes either with the MediaStream object, or the HTMLAudioElement. Any experience with this?
    – John Weisz
    Dec 31, 2017 at 11:56
  • 1
    @JohnWeisz Could you be experiencing these issues? bugs.chromium.org/p/chromium/issues/detail?id=595635#c1 and bugs.chromium.org/p/chromium/issues/detail?id=766198
    – Asher
    Dec 31, 2017 at 15:12
  • 1
    @JohnWeisz Here is a more updated Chrome issue: bugs.chromium.org/p/chromium/issues/detail?id=766198
    – Asher
    Jan 3, 2018 at 8:09
  • 1
    @Asher I think you can omit the creation of an ObjectUrl. As the audio.srcObject takes in a stream, you can adapt the second to last line by: audio.srcObject = dest.stream; Everything else should work fine, but you won't have a memory leak if you don't revoke your created ObjectURL. Jul 7, 2021 at 13:37
1

Complete example that works in Chrome 100, but not in Firefox 98.

Posting this here since the other answer at https://stackoverflow.com/a/43069474/1005419 doesn't work here (the call to createObjectURL is invalid) and because the other answer doesn't show the setSinkId() usage.

The snippet below plays the audio on the 3rd audio output device found on the system (audioDevices[2]).

Try it out at JSFiddle.

async function playAudio() {
  await navigator.mediaDevices.getUserMedia({
    audio: { deviceId: undefined },
    video: false
  });
  const devices = await navigator.mediaDevices.enumerateDevices();
  const audioDevices = devices.filter((device) => {
    return (
      device.kind === "audiooutput"
    );
  });
  const audioDevice = audioDevices[2];

  var audioContext = new AudioContext();
  var audioElement = new Audio();
  await audioElement.setSinkId(audioDevice.deviceId);
  var oscillator = audioContext.createOscillator();
  var mediaStreamDestination = audioContext.createMediaStreamDestination();
  oscillator.connect(mediaStreamDestination);
  audioElement.srcObject = mediaStreamDestination.stream;

  oscillator.start();
  audioElement.play();
  await new Promise((r) => setTimeout(r, 2000));
  oscillator.stop();
}

playAudio();

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.