在 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），感谢这位大佬，造福千万人。