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

花了两天时间在前人基础上重复造了一个网页录音的轮子,顺带把github仓库使用研究了一下,扔到了github上,地址:https://github.com/xiangyuecn/Recorder

传送门:https://xiangyuecn.github.io/Recorder/

copy之前说点什么

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

当下环境html5的录音功能支持情况大为良好,微信完美支持(请忽略他家的jssdk)

如是,就造起了轮子。

以下内容copy自README

Recorder用于html5录音

支持大部分已实现getUserMedia的浏览器,包括微信,演示地址:https://xiangyuecn.github.io/Recorder/

录音默认输出mp3格式,另外可选wav格式(此格式录音文件超大)

mp3默认16kbps的比特率,大概2kb每秒,如果使用8kbps可达到1kb每秒,不过音质很渣,没有amr格式的可比性。

已内置lamejs依赖用于mp3编码,剥离后核心代码不足300行

快速使用

在需要录音功能的页面引入js文件代码即可,对于https的要求不做解释

<script src="recorder.js"></script>

然后使用,假设立即运行,只录3秒

var rec=Recorder();
rec.open(function(){//打开麦克风授权获得相关资源
    rec.start();//开始录音
},function(msg){
    console.log("无法录音:"+msg);
});
setTimeout(function(){
    rec.stop(function(blob){//到达指定条件停止录音,拿到blob对象想干嘛就干嘛:立即播放、上传
        console.log(URL.createObjectURL(blob));
        rec.close();//释放录音资源
    },function(msg){
        console.log("录音失败:"+msg);
    });
},3000);

方法文档

rec=Recorder(set)

拿到Recorder的实例,然后可以进行请求获取麦克风权限和录音。

set参数为配置对象,默认配置值如下:

set={
    type:"mp3" //输出类型:mp3,wav
    ,bitRate:16 //比特率 wav:16或8位,MP3:8比特1k/s,16比特2k/s 比较划得来

    ,sampleRate:16000 //采样率,wav专用

    ,bufferSize:8192 //AudioContext缓冲大小
                    //取值256, 512, 1024, 2048, 4096, 8192, or 16384,会影响onProcess调用速度

    ,onProcess:NOOP //接收到录音数据时的回调函数:fn(buffer,powerLevel,bufferDuration)
                //buffer=[缓冲数据,...],powerLevel:当前缓冲的音量级别0-100,bufferDuration:已缓冲时长
                //如果需要绘制波形之类功能,需要实现此方法即可,使用以计算好的powerLevel可以实现音量大小的直观展示,使用buffer可以达到更高级效果
}
rec.open(success,fail)

请求打开录音资源,如果用户拒绝麦克风权限将会调用fail,打开后需要调用close

注意:此方法是异步的;一般使用时打开,用完立即关闭;可重复调用,可用来测试是否能录音。

success=fn();

fail=fn(errMsg);

rec.close(success)

关闭释放录音资源,释放完成后会调用success()回调

rec.start()

开始录音,需先调用open;如果不支持、错误,不会有任何提示,因为stop时自然能得到错误。

rec.stop(success,fail)

结束录音并返回录音数据blob对象,拿到blob对象就可以为所欲为了,不限于立即播放、上传

success(blob,duration)blob:录音数据audio/mp3|wav格式,duration:录音时长,单位毫秒

fail(errMsg):录音出错回调

提示:stop时会进行音频编码,音频编码可能会很慢,10几秒录音花费2秒左右算是正常,编码并未使用Worker方案(文件多),内部采取的是分段编码+setTimeout来处理,界面卡顿不明显。

Recorder.IsOpen()

由于Recorder持有的录音资源是全局唯一的,可通过此方法检测是否有Recorder已调用过open打开了录音功能。

Recorder.lamejs

lamejs的引用

缩小js文件

recorder.js用Uglify压缩一下剩余156kb,不算大

如果不需要mp3格式,可以把lamejs代码全部移除,recorder.js精简到300来行代码,仅仅支持wav格式;mp3编码采用的是https://github.com/zhuker/lamejs/blob/bfb7f6c6d7877e0fe1ad9e72697a871676119a0e/lame.all.js这个版本的代码。

兼容性

对于支持录音的浏览器能够正常录音并返回录音数据;对于不支持的浏览器,引入此js和执行相关方法都不会产生异常,并且进入相关的fail回调。一般在open的时候就能检测到是否支持或者被用户拒绝,可在用户开始录音之前提示浏览器不支持录音或授权。

原文地址:https://www.cnblogs.com/xiangyuecn/p/9048771.html

时间: 2024-08-30 11:28:44

html5录音支持pc和Android、ios部分浏览器,微信也是支持的,JavaScript getUserMedia的相关文章

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

准备做一个网页版聊天界面,表情啊.图片啊.上传文件啊都应该要有,视频就算了,语音还是要的. 本文记录的是在网页上用GitHub上的Recorder进行在线录音和上传到服务器. 录音代码 本示例代码支持PC.Android.IOS(仅Safari)中使用,如果用RecordApp可增加对IOS(微信浏览器.小程序)的支持. 看万遍代码不如行动一遍,新建一个html文件,把下面三段代码复制到文件内,双击浏览器打开就能进行测试. <!-- 先加载js录音库,注意:你应该把js clone到本地使用 -

Visual Studio 2015 预览版 - 支持跨平台开发Android/iOS应用程序(内置安卓模拟器)

微软最近的惊人举动真多,对普通消费者Office 移动版宣布免费,对开发者也发布了完全免费的 VS2013 社区版! 不仅如此,就连 .Net 开发框架环境也竟然「开源」并且跨平台支持 Mac 及 Linux 了!! 同时宣布的 Visual Studio 2015 和 .Net 2015 预览版均也开放下载了.作为微软跨平台新战略下的开发工具, VS2015 支持开发人员编写跨平台应用程序,从 Windows 到 Mac.Linux.甚至是编写 iOS 和 Android 代码! 此外,微软还

C++实现,支持跨平台(Windows,Android,IOS),支持跨语言(C++,C#,Java)的网络库

这个网络库是在 CppNetworkLibrary(http://www.cnblogs.com/winter-yu/p/4688481.html )的基础之上做的一些优化与调整. 具体的亮点如下: 1,支持跨跨平台,包括主流的Windows,Android,IOS,Linux等等. 2,跨语言,客户端支持C++,C#,Java.服务端目前只支持C++. 3,数据包增加了加密及压缩功能,密码会动态随机修改,而不是双方都使用固定密码,保证了数据包的传输安全. 4,客户端支持P2P的消息传输,而不需

即时通信系统中如何实现:支持PC端和移动端同时在线(即支持同帐号多设备同时登录)?

如果我们开发的即时通信系统(IM系统)要支持同帐号多设备同时登录的场景(或称"多地登录"),即需要像QQ一样,在PC端登录的同时,也可以使用同一个帐号登录移动端(iOS或Android),那么,如何才能做到了? 在ESFramework/ESPlatform体系中,是使用 UserID 作为唯一标志来标记每一个用户的,也就是说,对于一个指定的UserID,只能有一个客户端在线.所以,ESFramework 虽然支持多种类型的客户端设备,但是,ESFramework并不支持不同类型的客户

[IOS_HTML5]各种JS框架介绍--用HTML5/CSS3/JS开发Android/IOS应用

现在人人都想成为安卓/IOS应用开发工程师.其实,安卓/IOS应用可以用很多种语言来实现.由于我们前端开发工程师,对HTML5/CSS/JavaScript的网络编程已经相当熟悉了.所以,今天大家将会认识到一些利用前端语言来开发安卓/IOS应用的工具. 在文章的末尾,也介绍了使用JAVA.C#.Lua以及AS3来开发安卓应用的工具. 希望大家都能找到适合自己的开发工具!祝大家开发安卓/IOS应用一切顺利! PhoneGap 开发语言: HTML, CSS, JavaScript 开发工具: Ph

DEPHI XE5 XE6 ANDROID IOS开发的几点体会

DEPHI XE5 XE6 ANDROID IOS开发的几点体会 2014-09-04 20:48 1.不纠结于APK或者APP的大小.现在的客户端设备都很廉价,300元以上的新安卓设备都不在乎软件的大小.一般情况下(指未携带打包数据库.图片等资源)APK或者APP大小在5M(APP与APK都差不多).增加了FDAC等数据库功能,会达到7M左右,增加datasnap会增加到10M左右. 2.忘了SHOWMODAL.FMX 只在WINDOWS下很好地支持SHOWMODAL,ANDROID\IOS基

jquery支持PC端手机端幻灯片代码

分享一款支持PC端手机端幻灯片代码是一款支持移动触摸,支持鼠标拖拽切换,支持带进度条的自动播放模式.交果图如下 : 在线预览   源码下载 实现的代码. html代码: <div class="flex"> <ul class="slides"> <li data-title="Slide 1"> <img alt="" src="img/beasts_feature.jpg

解决浏览器background-image属性不支持css3动画

问题 最近在使用background-image属性来实现CSS3的逐帧动画时,碰到了个问题.在chrome浏览器上,background-image属性是支持css3动画的,但是到了firefox上,就完全看不到任何动画. 原因 通过网上查找,才发现W3C标准中明确background-image属性是不支持动画的,所以firefox由于遵循了该标准,并没有给该属性支持动画. 解决过程 解决方法是使用backgrond-position属性,该属性在W3C标准中是支持动画的,因此所有浏览器应该

优化Recorder H5录音:可边录边转码上传服务器,支持微信提供Android IOS Hybrid App源码

目录 一.Recorder H5录音库的特性 (1)浏览器支持 (2)功能支持 二.使用预览截图 (1)移动端H5 (2)IOS Hybrid App (3)Android Hybrid App 三.应用场景 四.优化过程记录 (1)为什么要升级优化 (2)开始使用Web Worker加速转码 (3)剩下的问题 五.Hybrid App存在的意义 六.更多支持 Recorder H5 GitHub开源库随着支持功能的增多,音频转码处理效率渐渐的跟不上需求了,近期抽时间对音频转码部分进行了升级优化