android上传amr到服务器,科技常识：HTML5网页录音和上传到服务器支持PC、Android 支持IOS微信功能...

今天小编跟大家讲解下有关HTML5网页录音和上传到服务器支持PC、Android 支持IOS微信功能 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关HTML5网页录音和上传到服务器支持PC、Android 支持IOS微信功能 的相关资料，希望小伙伴们看了有所帮助。

准备做一个网页版聊天界面 表情啊、图片啊、上传文件啊都应该要有 视频就算了 语音还是要的。

本文记录的是在网页上用GitHub上的Recorder进行在线录音和上传到服务器。

录音代码

本示例代码支持PC、Android、IOS(仅Safari)中使用 如果用RecordApp可增加对IOS(微信浏览器、小程序)的支持。

看万遍代码不如行动一遍 新建一个html文件 把下面三段代码复制到文件内 双击浏览器打开就能进行测试。

---

var rec;

function startRec(){

rec=Recorder();//使用默认配置 mp3格式

//打开麦克风授权获得相关资源

rec.open(function(){

//开始录音

rec.start();

},function(msg,isUserNotAllow){

//用户拒绝了权限或浏览器不支持

alert((isUserNotAllow?"用户拒绝了权限 ":"")+"无法录音:"+msg);

});

};

上传服务器代码

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);

});

};

立即播放代码

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);

});

};

--------------------------------------------------------------------------------

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微信功能,希望对大家有所帮助 如果大家有任何疑问请给我留言 小编会及时回复大家的。在此也非常感谢大家对爱蒂网站的支持！

如果你觉得本文对你有帮助 欢迎转载 烦请注明出处 谢谢！

来源：爱蒂网

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时候联系我们修改或删除，多谢。