在 long long ago，需要做一个网页录音并上传的功能，网上千万般寻觅，看遍 flash 和 html5 实现，终于找到了一个很好的库。今天突然想起，谨以此记录，方便日后再用。

这个录音插件支持录音、停止、回放、上传等，基本一条龙。关于使用方法，插件的demo 和说明里面都已经很清楚。下面大概记录一下我的使用过程(时间太久远，有些实在记不清了)。。

写在开头的提醒：此插件支持大部分已实现 getUserMedia 的移动端、PC端浏览器。具体支持种类请看插件说明书。只支持 在https下。本地测试可不用https。

1 引入资源

我的项目中是 jquery 为基础，首先把库下载下来，然后引入即可。我引入了 recorder.wav.min 以及 waveview。

2 使用

1.打开录音

// 检测浏览器是否支持录音

if(!Recorder.Support()){

$.alert('当前浏览器不支持录音功能');

return;

}

// 打印录音相关信息方法

recInfo: function(info){

var self = this;

self.$recordStatus.html(info); // $recordStatus: 全局声明的录音状态 dom

},

// 打开录音

openRecord: function(){

var self = this;

rec = Recorder({

type:'wav'

,bitRate:16

,sampleRate:16000

,onProcess:function(buffers,level,time,sampleRate){

wave.input(buffers[buffers.length-1],level,sampleRate); // 录音波形显示初始化

}

});

rec.open(function(){

self.recInfo("已打开录音");

wave = Recorder.WaveView({elem:".recwave"}); // .recwave: 录音波形容器

self.openSuccess = true; // 录音是否开启成功

},function(e,isUserNotAllow){

self.recInfo((isUserNotAllow?"用户不允许使用麦克风":"")+"打开录音失败："+e);

self.openSuccess = false;

});

},

2.开始录音

startRecord: function($target){

var self = this;

if(self.isRecording){

$.alert('当前正在录音！');

return;

}

if(!self.openSuccess){

$.alert('打开录音失败！');

return;

}

if(rec){

rec.start();

$target.find('.recPlay').attr('src', ''); // 此处 src 是录音音频 src

self.recordTime = 0;

$target.find('.record-time').html(self.formateTime(self.recordTime)); // 初始化计时显示

ecordTimer = setInterval(function(){

self.recordTime ++;

$target.find('.record-time').html(self.formateTime(self.recordTime)); // 计时

}, 1000);

self.recInfo("录音中");

self.isRecording = true; // 记录是否正在录音

};

},

3.暂停、继续录音

pauseRecord: function(){

if(rec){

rec.pause();

console.log("已暂停");

};

},

resumeRecord: function(){

if(rec){

rec.resume();

console.log("继续录音中...");

};

},

4.停止录音

stopRecord: function($target){

var self = this;

if(rec){

// console.log("正在编码"+rec.set.type+"...");

var t1 = Date.now();

rec.stop(function(blob,time){

self.recblob = { // 录音文件对象

blob: blob,

set: $.extend({},rec.set),

time: time

};

var blob = self.recblob.blob;

// console.log(blob)

self.recInfo('录音成功');

},function(s){

self.recInfo("录音失败："+s);

});

clearInterval(recordTimer); // 停止录音计时

self.isRecording = false;

};

},

5.试听录音

playRecord: function($target, key){

var self = this;

var o = self.recblob;

if(self.isRecording){

$.alert('请先停止录音再试听！');

return;

}

if(o){

$target.find('.recPlay').removeClass('none');

var audio = $($target.find(".recPlay"))[0];

if(!(audio.ended || audio.paused)){

audio.pause();

};

var end = function(blob){

audio.src = URL.createObjectURL(blob); // 将录音文件转成可播放的音频 src

audio.play();

};

var wav = Recorder[o.set.type+"2wav"];

if(wav){

console.log("正在转码成wav...");

wav(o.blob, function(blob){

end(blob);

console.log("已转码成wav播放");

}, function(msg){

console.log("转码成wav失败："+msg);

});

}else{

end(o.blob);

};

};

},

6.关闭录音

closeRecord: function(){

var self = this;

if(rec){

rec.close(function(){

self.recInfo("已关闭录音");

clearInterval(recordTimer);

self.isRecording = false;

});

}

},

7.将录音保存到服务器

saveRecord: function($target, $this, $recordBtn){

var self = this,

url = "xxx", // 音频要上传到的服务器地址

blob = self.recblob.blob,

fileExt = blob.type.split('/')[1],

formData = new FormData(),

// data = {

// ext: fileExt

// };

// 重点

formData.append('file', blob);

formData.append('type', blob.type);

formData.append('size', blob.size);

$.ajax({

'type': 'POST',

'url': url,

'data': formData,

'contentType': false,

'async': false,

'processData':false,

'dataType': 'json',

success: function(res){

// 进行将文件存到存储服务器之后的操作

},

error: function(){

// 上传错误的操作

}

})

},

ex:格式化时间方法

addZero: function(number){

if(number < 10)

return "0" + number;

else

return number;

},

formateTime: function(count){

var self = this,

h = Math.floor(count / 3600),

m = Math.floor(count / 60) % 60,

s = Math.floor(count % 60);

h = self.addZero(h);

m = self.addZero(m);

s = self.addZero(s);

return h + ":" + m + ":" + s;

},

哒哒哒，网页录音插件基本完成使用。页面上只需要录音相关操作的按钮，如果需要波形的话，放一个波形容器。我的按钮有 打开录音、开始录音、停止、播放、关闭录音。(波形样式的相关代码找不到了。。。。)