HTML5 Low kbps audio recording

Question

I made an audio recording using getUserMedia (). Save the file using Recorder.js

But the output file is much heavier than we would like.

A 4 minute audio recording has something like 40mb. And I can not send it to my server. If so, a failure will occur.

So, I was looking for how to reduce kbps recording. But I didn’t find anything. Just some flash solutions. But this does not fit my project.

So my question is: is it possible to reduce kbps audio recordings using getUserMedia ()?

Answer 1

In my case, Chrome records audio at 96 kHz and Firefox at 44.1 kHz, which makes huge WAV files. I implemented the downsampling function inside recorderWorker.js, where you can select the desired sample factor, for example 16000.

function downsampleBuffer(buffer, rate) { if (rate == sampleRate) { return buffer; } if (rate > sampleRate) { throw "downsampling rate show be smaller than original sample rate"; } var sampleRateRatio = sampleRate / rate; var newLength = Math.round(buffer.length / sampleRateRatio); var result = new Float32Array(newLength); var offsetResult = 0; var offsetBuffer = 0; while (offsetResult < result.length) { var nextOffsetBuffer = Math.round((offsetResult + 1) * sampleRateRatio); var accum = 0, count = 0; for (var i = offsetBuffer; i < nextOffsetBuffer && i < buffer.length; i++) { accum += buffer[i]; count++; } result[offsetResult] = accum / count; offsetResult++; offsetBuffer = nextOffsetBuffer; } return result; } 

and I call it when exporting a wav file:

 function exportWAV(rate, type) { var bufferL = mergeBuffers(recBuffersL, recLength); var bufferR = mergeBuffers(recBuffersR, recLength); var interleaved = interleave(bufferL, bufferR); var downsampledBuffer = downsampleBuffer(interleaved, rate); var dataview = encodeWAV(rate, downsampledBuffer, false); var audioBlob = new Blob([ dataview ], { type : type }); this.postMessage(audioBlob); } 

Answer 2

You have a couple of options.

First, to reduce the size, you can always modify the recorderWorker.js file in RecorderJS to use a lower sample rate and bit depth. This will require a little knowledge about how digital sound works, and some level of comfort that works with typed arrays but doesn't have to be too complicated. If you go down this road, this page has a decent explanation of the WAVE format. Reducing bit depth should be quite simple. Downsampling may be a little more complicated, but it still needs to do a bit of research. Once you get the right depth and sample rate, changing the header in the RecorderJS encodeWAV function should be pretty trivial.

Another option is to convert to a lossy format (e.g. MP3). This is the only library that I know right now that will do this, although there may be more. I didn't actually use this, and I heard it a little slowly - but you can run it in a web worker if this is a problem.

Answer 3

The way to write downsample in recorderWorker.js is very well explained in this question from April to May: Reduce the bitrate in the WAV file created using recorderjs .