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


Posted in HTML / CSS onApril 26, 2019

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

本文记录的是在网页上用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

在线测试: 点此测试

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微信功能

以上所述是小编给大家介绍的HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
CSS3教程(4):网页边框和网页文字阴影
Apr 02 HTML / CSS
css3实现的下拉菜单效果示例
Jan 22 HTML / CSS
CSS3 :default伪类选择器使用简介
Mar 15 HTML / CSS
如何使用css3实现一个类在线直播的队列动画的示例代码
Jun 17 HTML / CSS
CSS3制作皮卡丘动画壁纸的示例
Nov 02 HTML / CSS
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
Apr 10 HTML / CSS
将HTML5 Canvas的内容保存为图片借助toDataURL实现
May 20 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
Aug 06 HTML / CSS
会走动的图形html5时钟示例
Apr 27 HTML / CSS
HTML5中的Web Notification桌面右下角通知功能的实现
Apr 19 HTML / CSS
详解WebSocket跨域问题解决
Aug 06 HTML / CSS
CSS 左边固定宽右边自适应的6种方法
May 15 HTML / CSS
html5中监听canvas内部元素点击事件的三种方法
Apr 28 #HTML / CSS
Html5实现单张、多张图片上传功能
Apr 28 #HTML / CSS
鲜为人知的HTML5语音合成功能
May 17 #HTML / CSS
Html5内唤醒百度、高德APP的实现示例
May 20 #HTML / CSS
socket.io 和canvas 实现的共享画板功能
May 22 #HTML / CSS
Canvas 文字碰撞检测并抽稀的方法
May 27 #HTML / CSS
利用canvas实现图片下载功能来实现浏览器兼容问题
May 31 #HTML / CSS
You might like
PHP数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
php编写简单的文章发布程序
2015/06/18 PHP
简介WordPress中用于获取首页和站点链接的PHP函数
2015/12/17 PHP
Javascript拓展String方法小结
2013/07/08 Javascript
验证控件与Button的OnClientClick事件详细解析
2013/12/04 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
2013/12/05 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
2016/05/13 Javascript
angularjs 中$apply,$digest,$watch详解
2016/10/13 Javascript
Javascript 实现计算器时间功能详解及实例(二)
2017/01/08 Javascript
vue-cli webpack 开发环境跨域详解
2017/05/18 Javascript
原生JS发送异步数据请求
2017/06/08 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
[03:04]2018年度DOTA2玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
[15:07]lgd_OG_m2_BP
2019/09/10 DOTA
python 字符串split的用法分享
2013/03/23 Python
Python subprocess模块详细解读
2018/01/29 Python
python数据预处理方式 :数据降维
2020/02/24 Python
Python实现捕获异常发生的文件和具体行数
2020/04/25 Python
python 浮点数四舍五入需要注意的地方
2020/08/18 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
canvas小画板之平滑曲线的实现
2020/08/12 HTML / CSS
Spongelle官网:美国的创意护肤洗护品牌
2019/05/15 全球购物
MySQL面试题目集锦
2016/04/14 面试题
三年大学生活自我鉴定
2014/01/21 职场文书
《湘夫人》教学反思
2014/02/21 职场文书
市场营销大学生职业规划书
2014/02/25 职场文书
工作说明书格式
2014/07/29 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
四风问题自查自纠工作情况报告
2014/10/28 职场文书
财务审计整改报告
2014/11/06 职场文书
薪资证明范本
2015/06/19 职场文书
《秋天的雨》教学反思
2016/02/19 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
详解python字符串驻留技术
2021/05/21 Python