Web Audio API modulates the output sound if microphone input is directly connected to the output (with extra sound processing nodes it happens as well)




WebRTC: Audio/Video
5 months ago
2 months ago


(Reporter: Z@, Unassigned)


53 Branch

Firefox Tracking Flags

(Not tracked)


(Whiteboard: needinfo 2017-05-26 to jesup)


(2 attachments)



5 months ago
Created attachment 8871205 [details]

User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36

Steps to reproduce:

I tried to use Web Audio API like described in this example https://mdn.github.io/voice-change-o-matic/ in order to make distortion effect. I use this example.

Actual results:

In Google Chrome it works fine, but in Firefox sound comes out modulated kind of wah-wah effect or similar. I tried to put just sine wave to my microphone, but output is modulated. I made and attached a picture to demonstrate what is input, expected result and the actual result.

Expected results:

Output should not be modulated.

Comment 1

5 months ago
I did more tests and even without any effects if I just connect input node to output node I hear the modulation of the Sin wave.
Looks like it is more generic bug, not related to WaveShaperNode.


5 months ago
Component: Untriaged → Web Audio
Product: Firefox → Core

Comment 2

5 months ago
I made a simple demo of this bug here https://jsfiddle.net/zlelik/xfq3ykp7/18/

it just connects input microphone to output. and if I put Sine wave as input, then the output is modulated.

Code is like this:

console.log("test started");
navigator.getUserMedia = (navigator.getUserMedia ||
                            navigator.webkitGetUserMedia ||
                            navigator.mozGetUserMedia ||

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

console.log('audioCtx: ' + audioCtx);

if (navigator.getUserMedia) {
  console.log('getUserMedia supported.');
  if (navigator.mediaDevices.getUserMedia) {
    console.log("navigator.mediaDevices.getUserMedia exists");
    var p = navigator.mediaDevices.getUserMedia({ audio: true });
    p.then(function(stream) {
      console.log("navigator.mediaDevices.getUserMedia started processStream(stream)");
    p.catch(function(err) { console.log(err.name); });
} else {
  console.log('getUserMedia not supported on your browser!');

function processStream(stream) {
  console.log("ProcessingStream started");
  //get source
	source = audioCtx.createMediaStreamSource(stream);
  console.log("ProcessingStream source is created. source: " + source);


5 months ago
Summary: WaveShaperNode in Web Audio API distort (modulate) the sound → Web Audio API modulates the output sound if microphone input is directly connected to the output (with extra sound processing nodes it happens as well)

Comment 3

5 months ago
Created attachment 8871246 [details]
Web Audio bug demo (Modulated Output Sound) in case of direct input-output connection
Can you re-try with the following constraints (Firefox only) in getUserMedia:
{audio: {
 echoCancellation: false,
 mozNoiseSuppression: false,
 mozAutoGainControl: false

Comment 5

5 months ago
Thanks for reply. It really helps, no modulation, but a lot of noise.

if I do like this

{audio: {
 echoCancellation: false,
 mozNoiseSuppression: true,
 mozAutoGainControl: false

it is better. no modulation and noise level is the same as {audio: true}
jesup: Is that behavior expected?
Component: Web Audio → WebRTC: Audio/Video
Flags: needinfo?(rjesup)
Whiteboard: needinfo 2017-05-26 to jesup
If you have a lot of noise (fan noise (laptop), whatever) - yes.  

Chrome uses AGC by default, I believe; we don't.  I don't think that would matter.
Flags: needinfo?(rjesup)

Comment 8

5 months ago
For me this bug does not matter anymore because I have workaround. You decide what to do.
Only I would recommend to put it somewhere in documentation on MDN.

Comment 9

4 months ago
Sorry, maybe it is off topic question.

I tried to play with latency and I could not get it less than 170-200 milliseconds even with direct input->output connection without any effects/processing.

my example is here


I tried to use latency parameter like this, but it did not help.

var p = navigator.mediaDevices.getUserMedia({ audio: { latency: 0.002, echoCancellation: false, mozNoiseSuppression: true, mozAutoGainControl: false} });

Can you help me with it? Maybe there are some other parameters, which can help?

Ideally, it would be good to have it 20-50 ms.

Best Regards,
Looks like original problem was solved in comment 5, and caused by echoCancellation being on by default in Firefox. Closing.

See Firefox defaults for these values in https://blog.mozilla.org/webrtc/fiddle-of-the-week-audio-constraints/

(In reply to Z@ from comment #9)

The latency parameter has not yet been implemented. To minimal latency, turn off all audio processing with:

{audio: {
 echoCancellation: false,
 noiseSuppression: true,
 autoGainControl: false

(The moz-prefixes were removed in bug 1366415)
Last Resolved: 2 months ago
Resolution: --- → INVALID
Uh, I meant: To minimal latency, turn off all audio processing with:

{audio: {
 echoCancellation: false,
 noiseSuppression: false,
 autoGainControl: false
You need to log in before you can comment on or make changes to this bug.