How to capture audio in javascript?
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
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.
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