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

本文记录的是在网页上用GitHub上的Recorder进行在线录音和上传到服务器,前几天升了一下级,以后有时间再专门写一篇记录。

录音代码

本示例代码支持PCAndroidIOS(仅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格式(此格式录音文件超大);有限支持oggwebmamr格式;支持任意格式扩展(前提有相应编码器)。

小巧:如果对录音文件大小没有特别要求,可以仅仅使用录音核心+wav编码器,源码不足300行,压缩后的recorder.wav.min.js不足4kb。mp3使用lamejs编码,压缩后的recorder.mp3.min.js开启gzip后54kb。

由于IOS(11.X、12.X)上只有Safari支持getUserMedia,其他浏览器均不支持H5录音,因此额外针对IOSRecorder进行了进一步的兼容封装,升级成了RecordApp,用于支持微信(含浏览器小程序web-view),另外RecordAppHybrid 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微信的更多相关文章

  1. div+css网页本地上和上传到服务器后在IE11上看到的效果不一样?

    div+css网页本地上和上传到服务器后在IE11上看到的效果不一样? 解决办法在html的head里加上一段:<meta http-equiv="X-UA-Compatible&qu ...

  2. html5网页录音和语音识别

    背景 在输入方式上,人们总是在追寻一种更高效,门槛更低的方式,来降低用户使用产品的学习成本.语音输入也是一种尝试较多的方式,有些直接使用语音(如微信语音聊天),有些需要将语音转化为文字(语音识别).接 ...

  3. HTML5网页录音和压缩,边猜边做..(附源码)

    宣传一下自己的qq群: (暗号:C#交流) 欢迎喜欢C#,热爱C#,正在学习C#,准备学习C#的朋友来这里互相学习交流,共同进步 群刚建,人不多,但是都是真正热爱C#的 我也是热爱C#的 希望大家可以 ...

  4. html5网页录音

    demo https://xiangyuecn.github.io/Recorder/

  5. .NET 开源了,Visual Studio 开始支持 Android 和 iOS 程序编写并自带 Android 模拟器

    .NET 开源了,Visual Studio 开始支持 Android 和 iOS 程序编写并自带 Android 模拟器 北京时间今天凌晨的 Connect(); 大会上,多少程序员的假想成为现实. ...

  6. .NET开源了,Visual Studio开始支持 Android 和 iOS 编程并自带Android模拟器

    北京时间今天凌晨的大会上,多少程序员的假想成为现实..NET 开源,集成 Clang 和 LLVM 并且自带 Android 模拟器,这意味着 Visual Studio 这个当下最好没有之一的 ID ...

  7. Visual Studio 开始支持编写 Android 程序并自带 Android 模拟器【转载】

    原文地址 本文内容 为什么需要一个 Android 模拟器 针对 Visual Studio Android 模拟器的调试 Visual Studio Android 模拟器的传感器模拟和其他功能 A ...

  8. html5录音支持pc和Android、ios部分浏览器,微信也是支持的,JavaScript getUserMedia

    以前在前人基础上重复造了一个网页录音的轮子,顺带把github仓库使用研究了一下,扔到了github上. 优势在于结构简单,可插拔式的录音格式支持,几乎可以支持任意格式(前提有相应的编码器):默认提供 ...

  9. HTML5 本地裁剪图片并上传至服务器(转)

    很多情况下用户上传的图片都需要经过裁剪,比如头像啊什么的.但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后返回给用户,让用户确定裁剪坐标,发送给服务器,服务器裁剪完再返回给用户,来回需要 ...

随机推荐

  1. Mybatis 系列5

    上篇系列4中 为大家介绍了mybatis中别名的使用,以及其源码.本篇将为大家介绍TypeHandler, 并简单分析其源码. Mybatis中的TypeHandler是什么? 无论是 MyBatis ...

  2. php根据地球上任意两点的经纬度计算两点间的距离 原理

    地球是一个近乎标准的椭球体,它的赤道半径为6378.140千米,极半径为6356.755千米,平均半径6371.004千米.如果我们假设地球是一个完美的球体,那么它的半径就是地球的平均半径,记为R.如 ...

  3. Java容器:Map

    1. Map概述 1.1. Map类的继承关系 1.2. 几个Map接口类概念 1.3. Map类的通用方法 2. HashMap 2.1. 构造函数 2.2. 数据结构 2.3. 存储实现 3. H ...

  4. Django入门二之模板语法

    一. 模板变量 Context传入的可以是一个str,dict,list,甚至是一个实例对象 在html中如何调用这些对象进行取值呢 1. 变量名 {{ variable }} 返回字符串,无论是st ...

  5. 在python中单线程,多线程,多进程对CPU的利用率实测以及GIL原理分析

    首先关于在python中单线程,多线程,多进程对cpu的利用率实测如下: 单线程,多线程,多进程测试代码使用死循环. 1)单线程: 2)多线程: 3)多进程: 查看cpu使用效率: 开始观察分别执行时 ...

  6. Python_marshal模块操作二进制文件

    import marshal #导入模块 x1=30 #待序列化的对象 x2=5.0 x3=[1,2,3] x4=(4,5,6) x5={'a':1,'b':2,'c':3} x6={7,8,9} x ...

  7. Python 3.6 中文手册——前言

    1. 前言 如果你在电脑上做了很多工作,最终你会发现有一些任务你想要自动化.例如,你可能希望对大量的文本文件执行搜索和替换,或者以复杂的方式重命名并排列一堆照片文件.也许你想写一个小的自定义数据库,或 ...

  8. Java 面试知识点解析(四)——版本特性篇

    前言: 在遨游了一番 Java Web 的世界之后,发现了自己的一些缺失,所以就着一篇深度好文:知名互联网公司校招 Java 开发岗面试知识点解析 ,来好好的对 Java 知识点进行复习和学习一番,大 ...

  9. 深入解读Resnet

    残差网络的设计目的 随着网络深度增加,会出现一种退化问题,也就是当网络变得越来越深的时候,训练的准确率会趋于平缓,但是训练误差会变大,这明显不是过拟合造成的,因为过拟合是指网络的训练误差会不断变小,但 ...

  10. mysql各种引擎对比、实战

    1)存储引擎概述: (2)MySQL各大存储引擎: (3)InnoDB和MyIsam使用及其原理对比: (4)InnoDB和MyIsam引擎原理: (5)剩余引擎的使用DEMO(主要是Mrg_Myis ...