HTML5 以低 kbps 录制音频答案

【问题标题】：HTML5 Recording audio with low kbpsHTML5 以低 kbps 录制音频
【发布时间】：2013-08-23 07:35:54
【问题描述】：

我使用 getUserMedia() 做了一个录音机。并使用 Recorder.js 保存文件

但是输出文件比我想要的要重得多。

4 分钟的录音大约有 40mb。而且我无法将其发送到我的服务器。如果是这样，它会崩溃。

所以，我搜索了如何降低录制 kbps。但我什么也没找到。只是一些 Flash 解决方案。但这些不适合我的项目。

所以，我的问题是，是否可以使用 getUserMedia() 减少音频记录的 kbps ？

【问题讨论】：

标签： javascript html audio-recording web-audio-api

【解决方案1】：

在我的例子中，Chrome 以 96kHz 录制音频，Firefox 以 44.1kHz 录制音频，这会产生巨大的 WAV 文件。我在 recorderWorker.js 中实现了下采样功能，您可以在其中选择所需的采样率，例如 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;
}

我在导出 wav 文件时调用它：

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);
}

【讨论】：

不错！我会尽快测试的！
另一种策略可能是不计算平均比特率，每一步只考虑一个样本：result[offsetResult] = buffer[offsetBuffer];

【解决方案2】：

你有几个选择。

首先，为了减小尺寸，您可以随时修改 RecorderJS 中的 recorderWorker.js 文件以使用较低的采样率和位深度。这需要一些关于数字音频如何工作的知识，以及使用类型数组的一定程度的舒适度——但应该不会太难。如果你走这条路，this page 对 WAVE 格式有一个不错的解释。减少位深度应该是相当直接的。下采样可能会更复杂一些，但通过一些研究应该仍然是可行的。获得所需的位深度和采样率后，更改 RecorderJS 的 encodeWAV 函数中的标头应该非常简单。

另一种选择是转换为有损格式（例如 MP3）。 This 是我现在知道的唯一一个可以做到这一点的图书馆，尽管可能还有更多。我实际上并没有使用过它，并且听说它有点慢 - 但如果有问题，您可能可以在 web worker 中运行它。

【讨论】：

【解决方案3】：

在 4 月/5 月的这个问题中很好地解释了 recorderWorker.js 中的下采样方式：Decrease bitrate on WAV file created with recorderjs。

【讨论】：