h5 如何录音保存上传_html5 网页录音、试听以及上传

在 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:".re