How to capture audio in javascript?

Question

I am currently using getUserMedia(), which is only working on Firefox and Chrome, yet it got deprecated and works only on https (in Chrome). Is there any other/

Answer 1

Chrome 60+ does require using https, since getUserMedia is a powerful feature. The API access shouldn't work in non-secure domains, as that API access may get bled over to non-secure actors. Firefox still supports getUserMedia over http, though.

I've been using RecorderJS and it served my purposes well. Here is a code example. (source)

function RecordAudio(stream, cfg) {

  var config = cfg || {};
  var bufferLen = config.bufferLen || 4096;
  var numChannels = config.numChannels || 2;
  this.context = stream.context;
  var recordBuffers = [];
  var recording = false;
  this.node = (this.context.createScriptProcessor ||
    this.context.createJavaScriptNode).call(this.context,
    bufferLen, numChannels, numChannels);

  stream.connect(this.node);
  this.node.connect(this.context.destination);

  this.node.onaudioprocess = function(e) {
    if (!recording) return;
    for (var i = 0; i < numChannels; i++) {
      if (!recordBuffers[i]) recordBuffers[i] = [];
      recordBuffers[i].push.apply(recordBuffers[i], e.inputBuffer.getChannelData(i));
    }
  }

  this.getData = function() {
    var tmp = recordBuffers;
    recordBuffers = [];
    return tmp; // returns an array of array containing data from various channels
  };

  this.start() = function() {
    recording = true;
  };

  this.stop() = function() {
    recording = false;
  };
}

The usage is straightforward:

var recorder = new RecordAudio(userMedia);
recorder.start();
recorder.stop();
var recordedData = recorder.getData()

Edit: You may also want to check this answer if nothing works.

Answer 2

The getUserMedia() isn't deprecated, deprecated is using it over http. How far I know the only browser which requires https for getUserMedia() right now is Chrome what I think is correct approach.

If you want ssl/tls for your test you can use free version of CloudFlare.

Whatsapp page doesn't provide any recording functions, it just allow you to launch application.

Good article about getUserMedia

Fully working example with use of MediaRecorder

Answer 3

Recorder JS does the easy job for you. It works with Web Audio API nodes

Chrome and Firefox Browsers has evolved now. There is an inbuilt MediaRecoder API which does audio recording for you.

navigator.mediaDevices.getUserMedia({audio:true})
    .then(stream => {
        rec = new MediaRecorder(stream);
        rec.ondataavailable = e => {
            audioChunks.push(e.data);
            if (rec.state == "inactive"){
               // Use blob to create a new Object URL and playback/download
            }
        }
    })
    .catch(e=>console.log(e));

Working demo

MediaRecoder support starts from

Chrome support: 47

Firefox support: 25.0