在 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;
},
哒哒哒，网页录音插件基本完成使用。页面上只需要录音相关操作的按钮，如果需要波形的话，放一个波形容器。我的按钮有 打开录音、开始录音、停止、播放、关闭录音。（波形样式的相关代码找不到了。。。。）
这个记录并不完整，在记录的时候也复习了一遍。详细的请看插件（https://github.com/xiangyuecn/Recorder），感谢这位大佬，造福千万人。
网友评论