CODEWITHSUNDEEP
javascripthtmlaudio-recordingweb-audio-api
João Mosmann
João Mosmann

Reputation: 2902

HTML5 Recording audio with low kbps

I did a audio recorder using the getUserMedia(). And saving the file using the Recorder.js

But the output file is far heavier than I'd like it was.

A 4 minutes audio record have something like 40mb. And i can't send it to my server. If so,it will crash.

So, I searched how to reduce the recording kbps. But I found nothing. Just some Flash solutions. But these don't fit to my project.

So, my question is, is possible to reduce the kbps of a audio record using the getUserMedia() ?

Upvotes: 7

Views: 4585

Answers (3)

ciri-cuervo
ciri-cuervo

Reputation: 1756

In my case Chrome records audio at 96kHz and Firefox at 44.1kHz, that makes huge WAV files. I implemented a downsampling function inside recorderWorker.js where you can select the sample ratio you want, like 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 the 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);
}

Upvotes: 11

shaka87
shaka87

Reputation: 21

The way to downsample in recorderWorker.js is explained pretty well in this question from April/May: Decrease bitrate on WAV file created with recorderjs.

Upvotes: 0

Kevin Ennis
Kevin Ennis

Reputation: 14466

You've got a couple options.

First, for smaller size reductions, you can always modify the recorderWorker.js file in RecorderJS to use a lower sample rate and bit depth. This would require a bit of knowledge of how digital audio works, and some level of comfort working with typed arrays - but shouldn't be too hard. If you go down that road, this page has a decent explanation of the WAVE format. Reducing bit depth should be fairly straight-forward. Downsampling can be a little more complex, but should still be pretty doable with a little bit of research. Once you've got the bit depth and sample rate you want, changing the header in RecorderJS's encodeWAV function should be pretty trivial.

The other option would be to convert to a lossy format (e.g. MP3). This is the only library I know of right now that will do that, although there may be more. I haven't actually used this, and have heard it's a bit slow - but you can probably run it in a web worker if it's a problem.

Upvotes: 1

Related Questions