CODEWITHSUNDEEP
javascripthtmlweb-audio-apirecorder.js
Saqib
Saqib

Reputation: 7412

Web Audio API: Prevent microphone input from being played through speakers

I'm using Recorder.JS to record audio in an HTML app. On the whole, this works fine, except that microphone input is echo'd through the speakers (causing an echo if I don't use headphones).

Various posts I've found suggest this is because the input is connected to the AudioContext destination - but this is not true for my case.

Furthermore, if I run the Recorder.JS example, I do not get any such echo (same machine, same browser), even though the code is identical as far as I can tell:

// At the top of the script:
var recorder = null;

// in DOMContentLoaded:
navigator.getUserMedia({ video: true, audio: true }, function(stream) {
    // Video stuff.
    var audioContext = new AudioContext();
    var microphone = audioContext.createMediaStreamSource(stream);
    recorder = new Recorder(microphone, { numChannels: 1, sampleRate: 16000 });
}, onError);

// In start button handler:
recorder.record();

// And in the stop button handler:
recorder.stop();
recorder.exportWAV(function(audio) { /* omited */ });

Really peculiar that what I believe to be exactly the same code has this different behaviour - appreciate any pointers.

Upvotes: 2

Views: 2886

Answers (1)

Kaiido
Kaiido

Reputation: 136638

This will be a blind try, but I'm pretty confident that what you do hide in your // Video stuff. comment is the root of your problem.

When, and if you do load the stream into a <video> element, you are appending the whole gUM stream into its src, video and audio channels.

So when you do play() the video stream, the audio one is also played.

So if my assumptions are correct, you just have to mute the video element thanks to its muted attribute.

video.src = URL.createObjectURL(stream);
video.muted = true;
video.play();

Note that we should be able to call the MediaStream() constructor with only the VideoStreamTrack so the video doesn't get access to the audio streams.

But as of today, only Firefox seems to support it. 

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
    .then(function(stream) {
        var videoStream = stream.getVideoTracks()[0];
        var mediaStream = new MediaStream([videoStream]) ;
        v.src = URL.createObjectURL(mediaStream);
        v.play();
        // audio stuff
      });

Upvotes: 3

Related Questions