HTML5网页灌音和上传随处事器支持PC、Android，支持IOS微信成果

本示例代码支持PC、Android、IOS(仅Safari)中行使，假如用RecordApp可增进对IOS(微信赏识器、小措施)的支持。

看万遍代码不如动作一遍，新建一个html文件，把下面三段代码复制到文件内，双击赏识器打开就能举办测试。
 

<!-- 先加载js灌音库，留意：你应该把js clone到当地行使 --><meta charset="utf-8" /> <script src=http://www.jb51.net/html5/"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","修改成你的上传地点");//这个假地点在节制台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

在线测试: 点此测试

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中。

以上所述是小编给各人先容的HTML5网页灌音和上传随处事器支持PC、Android，支持IOS微信成果,但愿对各人有所辅佐，假如各人有任何疑问请给我留言，小编会实时回覆各人的。在此也很是感激各人对剧本之家网站的支持！
假如你认为本文对你有辅佐，接待转载，烦请注明出处，感谢！

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!