Search code examples
javascriptweb-audio-apimediastream

Why do other tabs/windows playing back audio through Web Audio API cause audio glitches in audio recorded via MediaStream Recording API?

I'm facing an issue where audio recoded using MediaRecorder of the MediaStream Recording API will get heavily distorted, or even cut out completely, if any other browser tab or window is playing back audio through Web Audio API at the time the said MediaRecorder instance is recording audio.

I have found the issue to be reproducible using both my own implementation, as well as using any publicly available MediaRecorder demo out there.

How to reproduce using e.g. Wavesurfer.js along with it's Record plugin:

The pen creates a new AudioContext, and uses it to create a MediaElementSource with the <audio> element, then allows to control it's various aspects:

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

const audioElement = document.querySelector('audio');
const track = audioCtx.createMediaElementSource(audioElement);
  • increasing the volume of the codepen Web Audio demo may increase the severity of the resulting recording glitches
  • stop the codepen Web Audio demo - any audio recorded from this point onwards should be clear again

Is there a possibility to achieve an implementation of MediaStream Recording API, which would not suffer from the described issue? What could be the underlying for it behaving the way it does?

Solution

  • Based on the discussion me and @Kaiido had with chromium developers, it was revealed that the behaviour is by design for the signal-processing done by browsers based on this engine, and as long as echoCancellation constraint is in use on your media stream, the playback coming from other tabs/windows will get agressively muted.

    The recording that takes place in the same time (the one with the echoCancellation constraint) will end up heavily affected by the echo cancellation algorithms as well, so if you're facing this - your best bet is disabling the echoCancellation in your MediaStreamConstraints, which hopefully won't affect your output quality too much.

    If you need additional insight on the topic, please refer to these chromium issue threads: