HTML5网页录音和上传到服务器,支持PC、Android,支持IOS微信
准备做一个网页版聊天界面,表情啊、图片啊、上传文件啊都应该要有,视频就算了,语音还是要的。
本文记录的是在网页上用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
中。
最后
如果这个库有帮助到您,请 Star 一下。
HTML5网页录音和上传到服务器,支持PC、Android,支持IOS微信的更多相关文章
- div+css网页本地上和上传到服务器后在IE11上看到的效果不一样?
div+css网页本地上和上传到服务器后在IE11上看到的效果不一样? 解决办法在html的head里加上一段:<meta http-equiv="X-UA-Compatible&qu ...
- html5网页录音和语音识别
背景 在输入方式上,人们总是在追寻一种更高效,门槛更低的方式,来降低用户使用产品的学习成本.语音输入也是一种尝试较多的方式,有些直接使用语音(如微信语音聊天),有些需要将语音转化为文字(语音识别).接 ...
- HTML5网页录音和压缩,边猜边做..(附源码)
宣传一下自己的qq群: (暗号:C#交流) 欢迎喜欢C#,热爱C#,正在学习C#,准备学习C#的朋友来这里互相学习交流,共同进步 群刚建,人不多,但是都是真正热爱C#的 我也是热爱C#的 希望大家可以 ...
- html5网页录音
demo https://xiangyuecn.github.io/Recorder/
- .NET 开源了,Visual Studio 开始支持 Android 和 iOS 程序编写并自带 Android 模拟器
.NET 开源了,Visual Studio 开始支持 Android 和 iOS 程序编写并自带 Android 模拟器 北京时间今天凌晨的 Connect(); 大会上,多少程序员的假想成为现实. ...
- .NET开源了,Visual Studio开始支持 Android 和 iOS 编程并自带Android模拟器
北京时间今天凌晨的大会上,多少程序员的假想成为现实..NET 开源,集成 Clang 和 LLVM 并且自带 Android 模拟器,这意味着 Visual Studio 这个当下最好没有之一的 ID ...
- Visual Studio 开始支持编写 Android 程序并自带 Android 模拟器【转载】
原文地址 本文内容 为什么需要一个 Android 模拟器 针对 Visual Studio Android 模拟器的调试 Visual Studio Android 模拟器的传感器模拟和其他功能 A ...
- html5录音支持pc和Android、ios部分浏览器,微信也是支持的,JavaScript getUserMedia
以前在前人基础上重复造了一个网页录音的轮子,顺带把github仓库使用研究了一下,扔到了github上. 优势在于结构简单,可插拔式的录音格式支持,几乎可以支持任意格式(前提有相应的编码器):默认提供 ...
- HTML5 本地裁剪图片并上传至服务器(转)
很多情况下用户上传的图片都需要经过裁剪,比如头像啊什么的.但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后返回给用户,让用户确定裁剪坐标,发送给服务器,服务器裁剪完再返回给用户,来回需要 ...
随机推荐
- Angular HttpClient upload file with FormData
从sof上找到一个example:https://stackoverflow.com/questions/46206643/asp-net-core-2-0-and-angular-4-3-file- ...
- Angular为什么选择TypeScript?
原文地址:https://vsavkin.com/writing-angular-2-in-typescript-1fa77c78d8e8 本文转自:http://www.chinacion.cn/a ...
- Nginx接收的host值会影响alias的规则匹配
一般内网接收的HTTP请求都是内网唯一的网关传过来的,nginx的alias匹配会直接使用网关穿过的host值,而不是从URL解析出来的,从而导致的问题是,容器的alias相关Server_name规 ...
- MySQL 的索引优化
索引类似大学图书馆建书目索引,可以提高数据检索的效率,降低数据库的IO成本.MySQL在300万条记录左右性能开始逐渐下降,虽然官方文档说500~800w记录,所以大数据量建立索引是非常有必要的.My ...
- [Luogu 4135] 作诗
Description 神犇SJY虐完HEOI之后给傻×LYD出了一题: SHY是T国的公主,平时的一大爱好是作诗. 由于时间紧迫,SHY作完诗之后还要虐OI,于是SHY找来一篇长度为N的文章,阅读M ...
- C#将一个枚举里面所有描述和value绑定到下拉列表的方法
/// <summary> /// 获取枚举值的描述,如果没有描述,则返回枚举名称 /// </summary> /// <param name="en&quo ...
- pyCharm安装破解
补丁破解 下载 http://idea.lanyus.com/jar/JetbrainsCrack-2.7-release-str.jar 并将 JetbrainsCrack-2.7-release- ...
- Linux 命令行输入
这几天刚刚接触到Linux,在windows上安装的VMWare虚拟机,Centos7.安装什么都是贾爷和办公室的同事帮忙搞定的. 在虚拟机界面,按快捷键Ctrl+Alt+Enter,可以全屏显示Li ...
- 解决vue在ios或android中用webview打开H5链接时#号后面的参数被忽略问题angular同样适用
在ios或android如果直接用webview在打开H5链接例如: 打开:http://localhost:8080/#/answer?id=1509335039582001 会变成 http:// ...
- builder设计模式(摘录ITeye文章lintomny)
对于Builder模式很简单,但是一直想不明白为什么要这么设计,为什么要向builder要Product而不是向知道建造过程的Director要.刚才google到一篇文章,总算清楚了.在这里转贴一下 ...