recorder.js 基于H5录音功能
recorder.js
基于HTML5的录音功能,输出格式为mp3文件。
前言
完全依赖H5原生API
所涉及的API:WebRTC、AudioContext、Worker、Video/Audio API、Blob、URL
兼容性
Chrome、FF、Edge、QQ、360(注:目前IE和Safari全版本不兼容)
其中Chrome47以上以及QQ浏览器强制要求HTTPS的支持
请尝试使用FF、Edge、360等浏览器进行体验,或将项目下载到本地通过localhost的方式
使用方式
var recorder = new Recorder({
sampleRate: , //采样频率,默认为44100Hz(标准MP3采样率)
bitRate: , //比特率,默认为128kbps(标准MP3质量)
success: function(){ //成功回调函数
},
error: function(msg){ //失败回调函数
},
fix: function(msg){ //不支持H5录音回调函数
}
});
API
//开始录音
recorder.start();
//停止录音
recorder.stop();
//获取MP3编码的Blob格式音频文件
recorder.getBlob(function(blob){ //获取成功回调函数,blob即为音频文件
// ...
},function(msg){ //获取失败回调函数,msg为错误信息
// ...
});
recorder.js 基于H5录音功能的更多相关文章
- 基于H5的摄像头视频数据流采集
最近,为了支持部门团队的项目,通过H5实现摄像头的视频流数据的捕获,抓取到视频流后,传输到视频识别服务器进行后续的逻辑处理. 视频数据的采集过程,其实是比较没有谱的过程,因为之前没有研究过HTML5操 ...
- 基于H5的微信支付开发详解
这次总结一下用户在微信内打开网页时,可以调用微信支付完成下单功能的模块开发,也就是在微信内的H5页面通过jsApi接口实现支付功能.当然了,微信官网上的微信支付开发文档也讲解的很详细,并且有实现代码可 ...
- ****基于H5的微信支付开发详解[转]
这次总结一下用户在微信内打开网页时,可以调用微信支付完成下单功能的模块开发,也就是在微信内的H5页面通过jsApi接口实现支付功能.当然了,微信官网上的微信支付开发文档也讲解的很详细,并且有实现代码可 ...
- 基于h5的图片无刷新上传(uploadifive)
基于h5的图片无刷新上传(uploadifive) uploadifive简介 了解uploadify之前,首先了解来一下什么是uploadify,uploadfy官网,uploadify和uploa ...
- ***PHP基于H5的微信支付开发详解(CI框架)
这次总结一下用户在微信内打开网页时,可以调用微信支付完成下单功能的模块开发,也就是在微信内的H5页面通过jsApi接口实现支付功能.当然了,微信官网上的微信支付开发文档也讲解的很详细,并且有实现代码可 ...
- 前端视频直播技术总结及video.js在h5页面中的应用
全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/12557070.html,多谢,=.=~ (如果对你有帮助的话请帮我点个赞啦) 目前有一个需求是在 ...
- 基于H5的移动端开发,window.location.href在IOS系统无法触发问题
最近负责公司的微信公众号开发项目,基于H5进行开发,某些页面window.location.href在Android机上能正常运行而IOS系统上无法运行,导致无法重定向到指定页面,查了好久终于找到方法 ...
- Arctext.js - 基于 CSS3 & jQuery 的文本弯曲效果
Arctext.js 是基于 Lettering.js 的文本旋转插件,根据设置的旋转半径准确计算每个字母的旋转弧度并均匀分布.虽然 CSS3 也能够实现字符旋转效果,但是要让安排每个字母都沿着弯曲路 ...
- Vue.js – 基于 MVVM 实现交互式的 Web 界面
Vue.js 是用于构建交互式的 Web 界面的库.它提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单.灵活的 API.从技术上讲, Vue.js 集中在 MVVM 模式上的视图模型层,并 ...
随机推荐
- 在linux 下查询某个进程被那个程序占用
ps -ef|grep pid ps -aux | grep pid 清除linux 缓存: echo 1 > /proc/sys/vm/drop_caches
- mongo之$max
原集合: { _id: 1, highScore: 800, lowScore: 200 } 应用: #意思是:更新_id 等于1 的记录,条件是highScore 950>原纪录的highSc ...
- matlab计时超好用
方法一: profile on <body?> profile viewer 会把所有代码的时间,都显示出来,每行每个函数用时统计,一目了然: 方法二: tic; <body-par ...
- Burnside引理&Pólya定理
Burnside's lemma 引例 题目描述 一个由2*2方格组成的正方形,每个格子上可以涂色或不涂色, 问共有多少种本质不同的涂色方案. (若两种方案可通过旋转互相得到,称作本质相同的方案) 解 ...
- FFmpeg Download
https://ffmpeg.zeranoe.com/builds/
- Typora使用入门
使用sublime编写markdown语法不太方便,使用专门的markdown编辑软件会更方便一些! 1.typora常用快捷键 ctrl + / 切换编辑语法模式/预览模式 ctrl + 1 ...
- 云cassandra 重磅发布dynamodb特性
云cassandra全新发布dynamodb特性 nosql主力数据库再上新台阶 9月阿里云cassandra产品发布,具体参考阿里云全球首发云Cassandra服务.迄今为止,已有上百大B客户开通了 ...
- JavaScript中的节流和防抖
节流: 在规定时间内,多次触发事件,但是只执行一次 场景:输入框搜索,地图渲染 优化用户体验 /** * 节流 规定时间内不管触发多少次只执行一次 * @param {Function} fn 实际要 ...
- (转)C++实现RTMP协议发送H.264编码及AAC编码的音视频,摄像头直播
转:http://www.cnblogs.com/haibindev/archive/2011/12/29/2305712.html C++实现RTMP协议发送H.264编码及AAC编码的音视频 RT ...
- 使用Beyond Compare作为Perforce默认的文件比较工具
使用perforce自带的文件比较工具有时候会遇到乱码的情况,如下: 暂时不知道如何解决上述问题,因此想换个文件比对工具,比如Beyond Compare. 设定位置:Edit->prefere ...