Recording browser audio using navigator.mediaDevices.getUserMedia

Question

I am recording browser audio input from the microphone, and sending it via websocket to a nodeJs service that writes the stream to a .wav file.

My problem is that the first recording comes out fine, but any subsequent recordings come out sounding very slow, about half the speed and are therefore unusable.

If I refresh the browser the first recording works again, and subsequent recordings are slowed down which is why I am sure the problem is not in the nodeJs service.

My project is an Angular 5 project.

I have pasted the code I am trying below.

I am using binary.js -> https://cdn.jsdelivr.net/binaryjs/0.2.1/binary.min.js

this.client = BinaryClient(`ws://localhost:9001`)

createStream() {
    window.Stream = this.client.createStream();

    window.navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
      this.success(stream);
    })
}

stopRecording() {
    this.recording = false;
    this.win.Stream.end();
}



success(e) {
    var audioContext = window.AudioContext || window.webkitAudioContext;
    var context = new audioContext();

    // the sample rate is in context.sampleRate
    var audioInput = context.createMediaStreamSource(e);

    var bufferSize = 2048;
    var recorder = context.createScriptProcessor(bufferSize, 1, 1);
}

recorder.onaudioprocess = (e) => {
  if (!this.recording) return;
  console.log('recording');
  var left = e.inputBuffer.getChannelData(0);
  this.win.Stream.write(this.convertoFloat32ToInt16(left));
}

audioInput.connect(recorder)
    recorder.connect(context.destination);
}

convertoFloat32ToInt16(buffer) {
    var l = buffer.length;
    var buf = new Int16Array(l)

    while (l--) {
      buf[l] = buffer[l] * 0xFFFF;    //convert to 16 bit
    }
    return buf.buffer
}

I am stumped as to what can be going wrong so if anyone has experience using this browser tech I would appreciate any help.

Thanks.

Answer 1

I've had this exact problem - your problem is the sample rate you are writing your WAV file with is incorrect.

You need to pass the sample rate used by the browser and the microphone to the node.js which writes the binary WAV file.

Client side:

After a successfull navigator.mediaDevices.getUserMedia (in your case, success function), get the sampleRate variable from the AudioContext element:

var _smapleRate = context.sampleRate;

Then pass it to the node.js listener as a parameter. In my case I used:

binaryClient.createStream({ SampleRate: _smapleRate });

Server (Node.js) side:

Use the passed SampleRate to set the WAV file's sample rate. In my case this is the code:

fileWriter = new wav.FileWriter(wavPath, {
                channels: 1,
                sampleRate: meta.SampleRate,
                bitDepth: 16
             });

This will prevent broken sounds, low pitch sounds, low or fast WAV files.

Hope this helps.