HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能

2020-04-24 19:41:40易采站长站整理


<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

在线测试: 点此测试

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拿来就能用,具体使用哪个请参考下表:

支持RecorderRecordApp
PC浏览器
Android浏览器
Android微信(含小程序)
Android Hybrid App
IOS Safari
IOS微信(含小程序) 
IOS Hybrid App 
IOS其他浏览器  
开发难度简单复杂
第三方依赖依赖微信公众号

* 可到github中查阅

RecordApp
源码,在目录
xiangyuecn/Recorder/app-support-sample
中。