最近我们公司打算搞个网页录音的功能，好麻烦涉及到前后端编程技术。结果我们在实际操作过程中，遇到了不少难题，比如怎么上传录音，还有那个录音文件太大了怎么办等等。接下来我就来说说遇到的这些问题以及我找到的解决办法。
上传录音文件的问题
return new Blob([dataview], { type: type })
var fd = new FormData();
fd.append("audioData", blob);var xhr = new XMLHttpRequest();
xhr.open("POST", url);
xhr.send(fd);
用网页录屏功能时，让人头疼的就是怎么把录好的视频传上去。因为它总是以Blob那种有点儿怪异的数据格式给你。不过别急，HTML5中有个神器叫formData，能帮你大大简化这一步骤。只要你在后台用C#稍微改改程序，接收formData里的数据就很容易了，然后上传你的录屏文件就大功告成！
public void ProcessRequest(HttpContext context)
{ if (context.Request.Files.Count > 0)
{
context.Request.Files[0].SaveAs("d:\1.wav");
}
}
要处理录音文件的话，也得留个心眼儿，别忘了文件大小这茬。有时候短短一段录音就能占掉好大一块硬盘空间！这样一来，传文件或存起来岂不就麻烦多？
解决文件体积过大的方法
function encodeWAV(samples){
var buffer = new ArrayBuffer(44 + samples.length * 2);
var view = new DataView(buffer);
/* RIFF identifier */
writeString(view, 0, 'RIFF'); /* file length */
view.setUint32(4, 32 + samples.length * 2, true); /* RIFF type */
writeString(view, 8, 'WAVE'); /* format chunk identifier */
writeString(view, 12, 'fmt '); /* format chunk length */
view.setUint32(16, 16, true); /* sample format (raw) */
view.setUint16(20, 1, true); /* channel count */
view.setUint16(22, 2, true); /* sample rate */
view.setUint32(24, sampleRate, true); /* byte rate (sample rate * block align) */
view.setUint32(28, sampleRate * 4, true); /* block align (channel count * bytes per sample) */
view.setUint16(32, 4, true); /* bits per sample */
view.setUint16(34, 16, true); /* data chunk identifier */
writeString(view, 36, 'data'); /* data chunk length */
view.setUint32(40, samples.length * 2, true);
floatTo16BitPCM(view, 44, samples);
return view;
}
你说文件太大了？没啥大不了，咱们来给它瘦身！第一招就是把原来录成双声道改成单声道，只留下一边的声音就行了，这样数据能少一半呢；再有一招，就是把采样位数降低到8位，又是整整一半的压力没了。
其实不只是记得那些方法，咱们试过调低些采样率说不定也能缩小文件大小！就像咱们丢掉点数据，降点儿采样率，然后整个文件里的东西就少。比方说，把足够多的数据储存在缓存里，再按比例丢掉点，那就相当于降了采样率咯。这种办法虽然有点伤感，但确实能让我们的音频文件瘦不少，同时也能保持好音质~
// 创建声音的缓存节点，createJavaScriptNode方法的
// 第二个和第三个参数指的是输入和输出都是双声道。
//recorder = context.createJavaScriptNode(bufferSize, 2, 2);
recorder = context.createJavaScriptNode(bufferSize, 1, 1);//这里改成1
this.node.onaudioprocess = function(e){
if (!recording) return;
worker.postMessage({
command: 'record',
buffer: [
e.inputBuffer.getChannelData(0)//,
//e.inputBuffer.getChannelData(1)// 这里只需要保存一个
]
});
}
function exportWAV(type){
var bufferL = mergeBuffers(recBuffersL, recLength);
//var bufferR = mergeBuffers(recBuffersR, recLength);
var interleaved = interleave(bufferL);//, bufferR); //合并数据的时候去到对右声道的处理
var dataview = encodeWAV(interleaved);
var audioBlob = new Blob([dataview], { type: type });
this.postMessage(audioBlob);
}
function interleave(inputL){//, inputR){//混合声道的时候去掉对右声道的处理
var length = inputL.length ;//+ inputR.length;
var result = new Float32Array(length);
var index = 0,
inputIndex = 0;
while (index < length){
result[index++] = inputL[inputIndex];
//result[index++] = inputR[inputIndex];
inputIndex++;
}
return result;
}
优化代码与封装
function encodeWAV(samples) {
var dataLength = samples.length * 2;
var buffer = new ArrayBuffer(44 + dataLength);
var view = new DataView(buffer);
var sampleRateTmp = sampleRate;
var sampleBits = 16;
var channelCount = 1;
var offset = 0;
/* 资源交换文件标识符 */
writeString(view, offset, 'RIFF'); offset += 4;
/* 下个地址开始到文件尾总字节数,即文件大小-8 */
view.setUint32(offset, /*32这里地方栗子中的值错了,但是不知道为什么依然可以运行成功*/ 36 + dataLength, true); offset += 4;
/* WAV文件标志 */
writeString(view, offset, 'WAVE'); offset += 4;
/* 波形格式标志 */
writeString(view, offset, 'fmt '); offset += 4;
/* 过滤字节,一般为 0x10 = 16 */
view.setUint32(offset, 16, true); offset += 4;
/* 格式类别 (PCM形式采样数据) */
view.setUint16(offset, 1, true); offset += 2;
/* 通道数 */
view.setUint16(offset, channelCount, true); offset += 2;
/* 采样率,每秒样本数,表示每个通道的播放速度 */
view.setUint32(offset, sampleRateTmp, true); offset += 4;
/* 波形数据传输率 (每秒平均字节数) 通道数×每秒数据位数×每样本数据位/8 */
view.setUint32(offset, sampleRateTmp * channelCount * (sampleBits / 8), true); offset += 4;
/* 快数据调整数 采样一次占用字节数 通道数×每样本的数据位数/8 */
view.setUint16(offset, channelCount * (sampleBits / 8), true); offset += 2;
/* 每样本数据位数 */
view.setUint16(offset, sampleBits, true); offset += 2;
/* 数据标识符 */
writeString(view, offset, 'data'); offset += 4;
/* 采样数据总数,即数据总大小-44 */
view.setUint32(offset, dataLength, true); offset += 4;
/* 采样数据 */
floatTo16BitPCM(view, 44, samples);
return view;
}
搞定了录音文件的压缩与处理之后，要把这部分代码弄得更方便好用！就是要把这个过程变成个小函数或者类，到时候需要用的话就直接调用，省心又省力。这样有啥好处？既能增加代码的可重用性，让整个系统简单明了，还便于以后维护~
搞定了，web录音功能上传来的大文件问题和上传速度慢这事儿全都处理好了！我们把代码给优化升级后还特意打包了起来。这个处理过程可真好用，下次遇到类似情况也可以派上用场。
function encodeWAV(samples) {
var sampleBits = 8;//16;//这里改成8位
var dataLength = samples.length * (sampleBits / 8);
var buffer = new ArrayBuffer(44 + dataLength);
var view = new DataView(buffer);
var sampleRateTmp = sampleRate;
var channelCount = 1;
var offset = 0;
/* 资源交换文件标识符 */
writeString(view, offset, 'RIFF'); offset += 4;
/* 下个地址开始到文件尾总字节数,即文件大小-8 */
view.setUint32(offset, /*32这里地方栗子中的值错了,但是不知道为什么依然可以运行成功*/ 36 + dataLength, true); offset += 4;
/* WAV文件标志 */
writeString(view, offset, 'WAVE'); offset += 4;
/* 波形格式标志 */
writeString(view, offset, 'fmt '); offset += 4;
/* 过滤字节,一般为 0x10 = 16 */
view.setUint32(offset, 16, true); offset += 4;
/* 格式类别 (PCM形式采样数据) */
view.setUint16(offset, 1, true); offset += 2;
/* 通道数 */
view.setUint16(offset, channelCount, true); offset += 2;
/* 采样率,每秒样本数,表示每个通道的播放速度 */
view.setUint32(offset, sampleRateTmp, true); offset += 4;
/* 波形数据传输率 (每秒平均字节数) 通道数×每秒数据位数×每样本数据位/8 */
view.setUint32(offset, sampleRateTmp * channelCount * (sampleBits / 8), true); offset += 4;
/* 快数据调整数 采样一次占用字节数 通道数×每样本的数据位数/8 */
view.setUint16(offset, channelCount * (sampleBits / 8), true); offset += 2;
/* 每样本数据位数 */
view.setUint16(offset, sampleBits, true); offset += 2;
/* 数据标识符 */
writeString(view, offset, 'data'); offset += 4;
/* 采样数据总数,即数据总大小-44 */
view.setUint32(offset, dataLength, true); offset += 4;
/* 采样数据 */
//floatTo16BitPCM(view, 44, samples);
floatTo8BitPCM(view, 44, samples);//这里改为写入8位的数据
return view;
}
评论0