准备做一个网页版聊天界面，表情啊、图片啊、上传文件啊都应该要有，视频就算了，语音还是要的。
本文记录的是在网页上用GitHub上的Recorder进行在线录音和上传到服务器，前几天升了一下级，以后有时间再专门写一篇记录。
录音代码
本示例代码支持PC、Android、IOS(仅Safari)中使用，如果用RecordApp可增加对IOS(微信浏览器、小程序)的支持。
看万遍代码不如行动一遍，新建一个html文件，把下面三段代码复制到文件内，双击浏览器打开就能进行测试。
上传服务器代码
立即播放代码
Recorder
GitHub地址：https://github.com/xiangyuecn/Recorder
在线测试: 点此测试
Recorder用于html5录音，为一个纯粹的js库，支持大部分已实现getUserMedia的移动端、PC端浏览器，包括腾讯Android X5内核(QQ、微信)。
录音默认输出mp3格式，另外可选wav格式（此格式录音文件超大）；有限支持ogg、webm、amr格式；支持任意格式扩展（前提有相应编码器）。
小巧：如果对录音文件大小没有特别要求，可以仅仅使用录音核心+wav编码器，源码不足300行，压缩后的recorder.wav.min.js不足4kb。mp3使用lamejs编码，压缩后的recorder.mp3.min.js开启gzip后54kb。
由于IOS(11.X、12.X)上只有Safari支持getUserMedia，其他浏览器均不支持H5录音，因此额外针对IOS对Recorder进行了进一步的兼容封装，升级成了RecordApp，用于支持微信（含浏览器、小程序web-view），另外RecordApp对Hybrid App也提供了更加优秀的支持。
由于
RecordApp需要微信公众(订阅)号提供JsSDK录音支持，所以开发难度会大些，但支持的环境更多。Recorder拿来就能用，具体使用哪个请参考下表：
| 支持 | Recorder | RecordApp |
|---|---|---|
| PC浏览器 | √ | √ |
| Android浏览器 | √ | √ |
| Android微信(含小程序) | √ | √ |
| Android Hybrid App | √ | √ |
| IOS Safari | √ | √ |
| IOS微信(含小程序) | √ | |
| IOS Hybrid App | √ | |
| IOS其他浏览器 | ||
| 开发难度 | 简单 | 复杂 |
| 第三方依赖 | 无 | 依赖微信公众号 |
* 可到github中查阅RecordApp源码，在目录xiangyuecn/Recorder/app-support-sample中。
最后
如果这个库有帮助到您，请 Star 一下。