php手机网页在线录音ios,HTML5网页录音和上传到服务器,支持PC、Android,支持IOS微信...
HTML5网页录音和上传到服务器,支持PC、Android,支持IOS微信
发布时间:2019-04-26 08:20,
浏览次数:1064
, 标签:
HTML
PC
Android
IOS
准备做一个网页版聊天界面,表情啊、图片啊、上传文件啊都应该要有,视频就算了,语音还是要的。
本文记录的是在网页上用GitHub上的Recorder进行在线录音和上传到服务器,前几天升了一下级,以后有时间再专门写一篇记录。
录音代码
本示例代码支持PC、Android、IOS(仅Safari)中使用,如果用RecordApp可增加对IOS(微信浏览器、小程序)的支持。
看万遍代码不如行动一遍,新建一个html文件,把下面三段代码复制到文件内,双击浏览器打开就能进行测试。
type="button" οnclick="playRec()" value="结束并播放">
οnclick="uploadRec()" value="结束并上传">
rec=Recorder();//使用默认配置,mp3格式 //打开麦克风授权获得相关资源 rec.open(function(){ //开始录音
rec.start(); },function(msg,isUserNotAllow){ //用户拒绝了权限或浏览器不支持
alert((isUserNotAllow?"用户拒绝了权限,":"")+"无法录音:"+msg); }); };
上传服务器代码
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); }); };
立即播放代码
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中。
最后
如果这个库有帮助到您,请 Star 一下。
php手机网页在线录音ios,HTML5网页录音和上传到服务器,支持PC、Android,支持IOS微信...相关推荐
- HTML5网页录音和上传到服务器,支持PC、Android,支持IOS微信
准备做一个网页版聊天界面,表情啊.图片啊.上传文件啊都应该要有,视频就算了,语音还是要的. 本文记录的是在网页上用GitHub上的Recorder进行在线录音和上传到服务器,前几天升了一下级,以后有时 ...
- 123房地产行业响应式html5模板 二手房源网站模板手机wap页html模板中介推广专题网页模板网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响应。
123房地产行业响应式html5模板 二手房源网站模板手机wap页html模板中介推广专题网页模板网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响应. 不仅仅是首 ...
- 流媒体服务器+终端(android,ios,web)来实现实时监控或着说是直播
简介说明: 流媒体服务器+终端(android,ios,web)来实现实时监控或着说是直播 以下几个因素建议考虑 采集.预处理.编码.传输.服务器转码.解码 采集采集是播放环节中的第一环,iOS 系统 ...
- ios应用的分发和上传
ios应用的分发和上传. 主要分两个步骤:一是进入开发者账号在iTunes Connect申请和布局一个新的应用资料 :二是归档打包 上传 一:在iTunes Connect申请和布局一个新的应用资料 ...
- 怎么让在线视频播放html,HTML5网页视频强制变速倍速播放
Video Speed Controller 是一款倍速播放视频的浏览器插件! 现在网站上播放的视频,基本上都可以实现倍速播放,但偶尔也有些网站上的视频:没有倍速播放功能. 有时候看一些没有倍速播放功 ...
- html与网页设计 实践课,HTML5网页设计课程混合式教学设计与实践
郦丽华 [摘要]研究是针对HTML5网页设计课程基于在线的混合式教学进行了设计,并在浙江育英职业技术学院信息技术类专业群开展了两年多的教学实践.文章对该模式下的教学进行了总结和反思. [关键词]混合式 ...
- html5网页前端设计 当当,HTML5网页前端设计实战
本书是一本从零开始学习的Web前端开发教材,无需额外的基础.本书以项目驱动为宗旨,详细介绍了HTML5.CSS3与JavaScript的基础知识与使用技巧.本书包含例题228个,均在浏览器中调试通过. ...
- 电脑端浏览器调试移动端网页 支持调试Android和ios
Android 1. 谷歌浏览器 Chrome (需要翻墙) ① USB连接电脑并开启USB调试 (以vivo为例 其他手机找到版本号多次点击) 设置--更多设置--关于手机--多次点击软件版本号(开 ...
- 网页游戏五子棋php,HTML5网页版黑白子五子棋游戏的示例代码分享
闲来无事做,用H5搞了几个小游戏,当然本人只是菜鸟,搞出来玩玩,大神莫喷哦, 1.HTML5网页版黑白子五子棋游戏代码,源码请下载附件! 部分前端代码: 五子棋 *{ margin:0; paddin ...
- html5 网页水印底纹,实现HTML5网页水印SDK的方法
# 实现HTML5网页水印SDK的方法 在网站浏览中,常常需要网页水印,以便防止用户截图或录屏暴露敏感信息后,追踪用户来源.如我们常用的钉钉软件,聊天背景就会有你的名字.那么如何实现网页水印效果呢? ...
最新文章
- .net中窗体之间的数据交换总结
- 问卷星作答能不能检测到屏幕共享_云端检测,别样精彩——大厂回族自治县王必屯中心小学线上期末检测纪实...
- eclipse自动补全的设置
- dataframe 如何选中某列的一行_PySpark和SparkSQL基础:如何利用Python编程执行Spark(附代码)
- 移动场景在其缩略图中显示场景中所显示的区域
- mootools温习与深入_Element_1
- javascript getBoundingClientRect()获取元素四个边相对于窗口或文档的位置
- 开课吧-Java常见面试题:重载和重写的区别?
- Android Handler异步通信:深入详解Handler机制源码
- 定时开关机软件推荐及相关特点介绍
- 何凯明最新一作MAE解读系列1
- IE插件加载问题调试
- matlab用矩形法求函数定积分,C语言使用矩形法求定积分的通用函数
- embed预览pdf_09.html使用iframe、embed查看pdf不显示(未解决),使用pdf.js预览pdf
- mysql 日期group_MySql 使用GROUP BY 按照日期分组统计
- 【001】Cortex-R5体系结构概述
- 御龙在天以前服务器信息,细数御龙在天的名人以及其崛起的服务器
- 武汉晴川学院软件工程导论可行性分析(梅宇欣)
- 南昌三本计算机学校,2019南昌三本大学有哪些 最新院校名单
- 2023最新ChatGPT商业版4.8.4破解+GPT4.0(包含3.5)+AI绘画midjourney
热门文章
- MacBook 运维软件
- 计算机毕业设计asp.net家庭个人理财系统(源码+系统+mysql数据库+Lw文档)
- 人工智能产品经理工作流程
- 【论文笔记】视频分类系列 Appearance-and-Relation Networks for Video Classification (ARTNet)
- C语言 三角函数 时钟周期,三角函数的周期公式
- 扫地机器人不取出水箱可以吗_小米扫地机器人水箱不出水是怎么回事
- ios python3.0编程软件_ios编程软件-7款学习Python编程的iPhone/iPad应用
- 等保二级和等保三级的三大区别讲解
- Stp文件在线浏览工具包
- ios 8 地图定位