准备做一个网页版聊天界面, 表情啊, 图片啊, 上传文件啊都应该要有, 视频就算了, 语音还是要的.
本文记录的是在网页上用 GitHub 上的 Recorder 进行在线录音和上传到服务器.
录音代码
本示例代码支持 PC,Android,iOS(仅 Safari)中使用, 如果用 RecordApp 可增加对 iOS(微信浏览器, 小程序)的支持.
看万遍代码不如行动一遍, 新建一个 html 文件, 把下面三段代码复制到文件内, 双击浏览器打开就能进行测试.
- <!-- 先加载 js 录音库, 注意: 你应该把 js clone 到本地使用 --><meta charset="utf-8" />
- <script src="https://xiangyuecn.github.io/Recorder/recorder.mp3.min.js"></script>
- <input type="button" onclick="startRec()" value="开始录音">
- <hr>
- <input type="button" onclick="playRec()" value="结束并播放">
- <input type="button" onclick="uploadRec()" value="结束并上传">
- <script>
- var rec;
- function startRec(){
- rec=Recorder();// 使用默认配置, mp3 格式
- // 打开麦克风授权获得相关资源
- rec.open(function(){
- // 开始录音
- rec.start();
- },function(msg,isUserNotAllow){
- // 用户拒绝了权限或浏览器不支持
- alert((isUserNotAllow?"用户拒绝了权限,":"")+" 无法录音:"+msg);
- });
- };
- </script>
上传服务器代码
- <script>
- function uploadRec(){
- // 停止录音, 得到了录音文件 blob 二进制对象, 想干嘛就干嘛
- rec.stop(function(blob,duration){
- /*
- blob 文件对象, 可以用 FileReader 读取出内容
- , 或者用 FormData 上传, 本例直接上传二进制文件
- , 对于普通 application/x-www-form-urlencoded 表单上传
- , 请参考 GitHub 里面的例子
- */
- var form=new FormData();
- form.append("upfile",blob,"recorder.mp3"); // 和普通 form 表单并无二致, 后端接收到 upfile 参数的文件, 文件名为 recorder.mp3
- // 直接用 Ajax 上传
- var xhr=new XMLHttpRequest();
- xhr.open("POST","http://baidu.com / 修改成你的上传地址");// 这个假地址在控制台 network 中能看到请求数据和格式, 请求结果无关紧要
- xhr.onreadystatechange=function(){
- if(xhr.readyState==4){
- alert(xhr.status==200?"上传成功":"测试请先打开浏览器控制台, 然后重新录音, 在 network 选项卡里面就能看到上传请求数据和格式了");
- }
- }
- xhr.send(form);
- },function(msg){
- alert("录音失败:"+msg);
- });
- };</script>
立即播放代码
- <script>
- function playRec(){
- // 停止录音, 得到了录音文件 blob 二进制对象, 想干嘛就干嘛
- rec.stop(function(blob,duration){
- var audio=document.createElement("audio");
- audio.controls=true;
- document.body.appendChild(audio);
- // 非常简单的就能拿到 blob 音频 url
- audio.src=URL.createObjectURL(blob);
- audio.play();
- },function(msg){
- alert("录音失败:"+msg);
- });
- };</script>
- Recorder
GitHub 地址: https://github.com/xiangyuecn/Recorder
在线测试: 点此测试 https://xiangyuecn.github.io/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 一下.
来源: https://www.cnblogs.com/xiangyuecn/p/10772227.html