node+express搭建record.js录音实例

93 阅读 0 评论 62 点赞

我是靠谱客的博主炙热音响，最近开发中收集的这篇文章主要介绍node+express搭建record.js录音实例，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

这个项目是拿来测试record.js实时录音并将录音数据发送给后台做处理，后台期望拿到实时的录音数据并能立马正常播放。

首先用node+express搭建开发环境，引入record.js相关文件，目录结构如下：

其中，JavaScript中的三个文件就是引入的record.js的所有文件。

npm start启动后，在浏览器访问localhost:3000。

首先new一个record的实例对象，给index.html页面对录音和停止按钮绑定点击事件，调用record对象的start()和stop()方法。

start.addEventListener('click',function(){
this.disabled = true;

stop.disabled = false;

var audio = document.querySelectorAll('audio');

for(var i = 0; i < audio.length; i++){
if(!audio[i].paused){
audio[i].pause();

}
}
recorder.start();
});
stop.addEventListener('click',function(){
this.disabled = true;

start.disabled = false;

recorder.stop();

recorder.getBlob(function(blob){
var audio = document.createElement('audio');

audio.src = URL.createObjectURL(blob);

audio.controls = true;

container.appendChild(audio);

});
});

点击录音或是停止，会跳到record.js中去执行对应的方法：

//开始录音
_this.start = function(){
if(processor && microphone){
microphone.connect(processor);

processor.connect(context.destination);

Util.log('开始录音');

}
};
//结束录音
_this.stop = function(){
if(processor && microphone){
microphone.disconnect();

processor.disconnect();

Util.log('录音结束');

}
};

下面只讲开始录音这一条线。其他动作都和录音差不多的流程。

开始录音后进程监听中会获取到整个录音过程，就是下面这段代码。获取到音频录制过程后realTimeWorker做了一个发送消息的动作，告诉接受方这里获取到录音数据了，可以进行编码了。监听这个消息的是worker.js。

processor.onaudioprocess = function(event){
//监听音频录制过程

var array = event.inputBuffer.getChannelData(0);

realTimeWorker.postMessage({ cmd: 'encode', buf: array });
};

var realTimeWorker = new Worker('/javascripts/worker.js'); //开启后台线程

worker.js接受到对应的消息就会去执行对应的方法：

self.onmessage = function(e){
switch(e.data.cmd){
case 'init':
init(e.data.config);

break;

case 'encode':
encode(e.data.buf);

break;

case 'finish':
finish();

break;

}
};

这里worker接收到“encode”这个消息就去执行encode（）这个方法。

var encode = function(arrayBuffer){
samplesMono = convertBuffer(arrayBuffer);

var remaining = samplesMono.length;

for(var i = 0; remaining >= 0; i += maxSamples){
var left = samplesMono.subarray(i, i + maxSamples);

var mp3buf = mp3Encoder.encodeBuffer(left);

appendToBuffer(mp3buf);

remaining -= maxSamples;

}
self.postMessage({
cmd: 'encode',

buf: dataBuffer
});
};

encode()这个方法对传输过来的数据进行编码后又个record.js发现送了一个“encode”消息，并把编码好的数据作为参数返回。

realTimeWorker.onmessage = function(e){ //主线程监听后台线程，实时通信

switch(e.data.cmd){
case 'init':
Util.log('初始化成功');

if(config.success){
config.success();

}
break;

case 'encode':
var blob = new Blob(e.data.buf,{ type: 'audio/mp3'});

Util.log('encode Mp3 blob：' + blob);

var xhr = ajaxFunction();

xhr.open("POST", "/microm", true);


//如果是POST请求方式，设置请求首部信息

xhr.setRequestHeader("Content-type", "multipart/form-data");

var data = new FormData();

data.append('fname','liyangli.mp3');

data.append('file',blob);

// xhr.setRequestHeader("mimeType", "audio/mpeg");

xhr.send(data);
//xhr.send(null);

break;

case 'end':
if(successCallback){
var blob = new Blob(e.data.buf, { type: 'audio/mp3' });

successCallback(blob);

Util.log('MP3大小：' + blob.size + '%cB', 'color:#0000EE');

}
break;

case 'error':
Util.log('错误信息：' + e.data.error);

if(errorCallback){
errorCallback(e.data.error);

}
break;

default:
Util.log('未知信息：' + e.data);

}
};

record.js中接收到“encode”的消息后就用一个ajax请求将返回的数据以formData的形式发送给后台。

后台接收到数据直接将数据写入到一个mp3文件中，这个文件可以直接播放，而且是一边录音，文件中的数据一边追加，可以边录边播。

router.route("/microm").get(function(req,res){
res.render("microm",{title:'microm demo'});
}).post(function(req,res){
var out = fs.createWriteStream('e:/hell.mp3');

//同步追加到文件中

req.on('data', function (data) {
out.write(data);

});

req.on('end', function(){
out.end("",function(){
console.log('文件全部写入完毕');

console.log('共写入'+out.bytesWritten+'数据');

})
});

res.sendStatus(200); //返回响应成功
});