html5 record 修改采样率导致声音无法播放解决方案

最近项目中用到web录音，但是录音的采样率需要设置为8000，而不是默认的44100.但是修改samplerate后，发现录音不能正常播放，播放出来的是噪音。在stackOverFlow上搜到解决方案如下：

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

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

原文链接：stackoverflow

发现集成到项目里面并不能完美的解决问题，找了很多资料发现一篇好的博文：html5 录音

读懂里面的细节后发现，downsampleBuffer(buffer, rate)函数中的

var sampleRateRatio = sampleRate / rate;并不是一个整数，所以修改为：var sampleRateRatio = Math.round(sampleRate / rate);

修改后的代码：

function downsampleBuffer(buffer, rate) {
if (rate == sampleRate) {
return buffer;
}
if (rate > sampleRate) {
throw "downsampling rate show be smaller than original sample rate";
}
var sampleRateRatio = Math.round(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;
}

function exportWAV(type) {
var buffers = [];
for (var channel = 0; channel < numChannels; channel++) {
buffers.push(mergeBuffers(recBuffers[channel], recLength));
}
if (numChannels === 2) {
var interleaved = interleave(buffers[0], buffers[1]);
var downsampledBuffer = downsampleBuffer(interleaved, 8000);
var dataview = encodeWAV(8000, downsampledBuffer);
} else {
var interleaved = buffers[0];
var downsampledBuffer = downsampleBuffer(interleaved, 8000);
}
var dataview = encodeWAV(8000,downsampledBuffer);
var audioBlob = new Blob([dataview], {
type: type
});

this.postMessage(audioBlob);
}

这里wav导出也需要做适当的修改。

这样将原来系统中默认采样率为44100修改成8000后，声音失真的问题得到完美的解决。