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); //返回响应成功
});

具体的编码过程我就不说了。

record.js三个文件中record.js与页面互动，执行具体的动作后会给worker.js发送消息，worker.js监听到对应消息执行一定的操作后又会给record.js发送消息，record.js监听到消息再执行后续操作，

这个项目为了能将record.js应用到实际项目中，所以对原来的record.js的代码做了一点调整。