Recorder.js HTML5+JS实现网页录音

最近项目有个需求，想要通过网页形式实现录音功能，经过多方查阅资料。总结可得，目前IOS系统不支持此功能，一部分浏览器和安卓支持。我们在网页端实现播放音频/视频现在已经没那么难了，但是有的奇怪需求，比如想要你实现在网页上录音/录视频/拍照，这些就没那么轻而易举了。

1.  经过查阅得知，以前进行媒体音视频得录制，通常是使用Flash和Sliverlight等等进行的。如果想进行网页录音/录视频，MDN提供了API——MediaRecorder() ；还有一个API——navigator.getUserMedia()；html5中提供了API——getUserMedia()能够调用电脑的摄像头，结合

2.  运行过程中我们应该注意：

因为安全问题, chrome 对于本地文件禁用了很多功能(以file:///开头). 所以如果你直接把html文件拖进chrome是看不到效果的 (getUserMedia 失败)——亲测确实是这样的！

3.  如何解决：

1. 使用IDE webstrom采用localhost形式运行，而不用sublime以被内地file://形式运行（亲测无效）
2. 配合http服务器，如apache等
3. 关闭所有chrome窗口（否则参数无效），在命令行中增加如下参数启动    chrome：     chrome --allow-file-access-from-files

4.   recorder.js

recorder.js基于HTML5的录音功能，输出格式为mp3文件。

它完全依赖H5原生API，其所涉及的API：WebRTC、AudioContext、Worker、Video/Audio API、Blob、URL

目前来说兼容Chrome、FF、Edge、QQ、360(注：目前IE和Safari全版本不兼容)，其中Chrome47以上以及QQ浏览器强制要求HTTPS的支持，请尝试使用FF、Edge、360等浏览器进行体验，或将项目下载到本地通过localhost的方式  

使用方式有：

var recorder = new Recorder({
    sampleRate: 44100, //采样频率，默认为44100Hz(标准MP3采样率)
    bitRate: 128, //比特率，默认为128kbps(标准MP3质量)
    success: function(){ //成功回调函数
    },
    error: function(msg){ //失败回调函数
    },
    fix: function(msg){ //不支持H5录音回调函数
    }
});

API有：

//开始录音
recorder.start();
//停止录音
recorder.stop();
//获取MP3编码的Blob格式音频文件
recorder.getBlob(function(blob){ //获取成功回调函数，blob即为音频文件
//  ...
},function(msg){ //获取失败回调函数，msg为错误信息
//  ...
});

相关的demo下载包有：

https://download.csdn.net/download/qq_40556950/11964400

https://download.csdn.net/download/qq_40556950/11966067

https://download.csdn.net/download/qq_40556950/11966190

这几个是本人上传的资源包，亲测有效，如有疑问可留言讨论！