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)

RESOLVED INVALID

Status

()

Core
WebRTC: Audio/Video
RESOLVED INVALID
5 months ago
2 months ago

People

(Reporter: Z@, Unassigned)

Tracking

53 Branch
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

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

Attachments

(2 attachments)

(Reporter)

Description

5 months ago
Created attachment 8871205 [details]
FireFoxBug.png

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.
(Reporter)

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.

Updated

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

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 ||
                            navigator.msGetUserMedia);

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)");
      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);
  source.connect(audioCtx.destination);
}
(Reporter)

Updated

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)
(Reporter)

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
}}
(Reporter)

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)
(Reporter)

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.
(Reporter)

Comment 9

4 months ago
Hi,
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

https://jsfiddle.net/zlelik/xfq3ykp7/49/

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,
Z@
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)
Status: UNCONFIRMED → RESOLVED
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.