recorder.js 基于Html5录音功能的实现


Posted in HTML / CSS onMay 26, 2020

recorder.js

microphone基于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: 44100, //采样频率,默认为44100Hz(标准MP3采样率)
    bitRate: 128, //比特率,默认为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 基于Html5录音功能的实现的文章就介绍到这了,更多相关Html5录音功能内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
纯CSS3打造动感漂亮时尚的扇形菜单
Mar 18 HTML / CSS
html5使用html2canvas实现浏览器截图的示例
Aug 31 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
Jan 30 HTML / CSS
详解HTML5中ol标签的用法
Sep 08 HTML / CSS
HTML5 Canvas入门学习教程
Mar 17 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
May 11 HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
Jul 24 HTML / CSS
五分钟学会HTML5的WebSocket协议
Nov 22 HTML / CSS
HTML5在手机端实现视频全屏展示方法
Nov 23 HTML / CSS
用CSS3画一个爱心
Apr 27 HTML / CSS
css让页脚保持在底部位置的四种方案
Jul 23 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
May 26 #HTML / CSS
H5 video poster属性设置视频封面的方法
May 25 #HTML / CSS
html5中嵌入视频自动播放的问题解决
May 25 #HTML / CSS
HTML5 FileReader对象的具体使用方法
May 22 #HTML / CSS
HTML5 Blob对象的具体使用
May 22 #HTML / CSS
详解如何获取localStorage最大存储大小的方法
May 21 #HTML / CSS
html5用video标签流式加载的实现
May 20 #HTML / CSS
You might like
利用phpexcel把excel导入数据库和数据库导出excel实现
2014/01/09 PHP
php无限极分类递归排序实现方法
2014/11/11 PHP
[原创]站长必须要知道的javascript广告代码
2007/05/30 Javascript
jquery $.ajax入门应用一
2008/11/19 Javascript
jquery动态添加删除div 具体实现
2013/07/20 Javascript
jquery滚动条插件jScrollPane的使用介绍
2013/11/08 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
JS中检测数据类型的几种方式及优缺点小结
2016/12/12 Javascript
基于pako.js实现gzip的压缩和解压功能示例
2017/06/13 Javascript
微信小程序引用公共js里的方法的实例详解
2017/08/17 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
2017/08/22 Javascript
fetch 如何实现请求数据
2018/12/20 Javascript
vue element自定义表单验证请求后端接口验证
2019/12/11 Javascript
Javascript实现秒表计时游戏
2020/05/27 Javascript
python读写文件操作示例程序
2013/12/02 Python
Python中的startswith和endswith函数使用实例
2014/08/25 Python
Python导出数据到Excel可读取的CSV文件的方法
2015/05/12 Python
在Django中限制已登录用户的访问的方法
2015/07/23 Python
玩转python selenium鼠标键盘操作(ActionChains)
2020/04/12 Python
python difflib模块示例讲解
2017/09/13 Python
python3常用的数据清洗方法(小结)
2019/10/31 Python
基于python实现复制文件并重命名
2020/09/16 Python
Pytorch1.5.1版本安装的方法步骤
2020/12/31 Python
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
html5录音功能实战示例
2019/03/25 HTML / CSS
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
护理专业的自荐信
2013/10/22 职场文书
节约用水倡议书
2014/04/16 职场文书
选秀节目策划方案
2014/06/06 职场文书
护理学专业求职信
2014/06/29 职场文书
机械专业毕业生自我鉴定2014
2014/10/04 职场文书
导游词之唐山景点
2019/12/18 职场文书
Redis读写分离搭建的完整步骤
2021/09/14 Redis
Golang Web 框架Iris安装部署
2022/08/14 Python