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实现动态的二级三级菜单效果实例源码
Jan 04 HTML / CSS
CSS3 伪类选择器 nth-child()说明
Jul 10 HTML / CSS
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
Oct 10 HTML / CSS
在HTML5中如何使用CSS建立不可选的文字
Oct 17 HTML / CSS
利用CSS3实现的文字定时向上滚动
Aug 29 HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
Mar 22 HTML / CSS
利用html5 canvas动态画饼状图的示例代码
Apr 02 HTML / CSS
HTML5安全介绍之内容安全策略(CSP)简介
Jul 10 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
Apr 26 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
Nov 14 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
Dec 06 HTML / CSS
HTML5 播放 RTSP 视频的实例代码
Jul 29 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
ThinkPHP 连接Oracle数据库的详细教程[全]
2012/07/16 PHP
PHP向socket服务器收发数据的方法
2015/01/24 PHP
CodeIgniter删除和设置Cookie的方法
2015/04/07 PHP
php使用number_format函数截取小数的方法分析
2016/05/27 PHP
分析 JavaScript 中令人困惑的变量赋值
2007/08/13 Javascript
Node.js实战 建立简单的Web服务器
2012/03/08 Javascript
jquery插件制作 提示框插件实现代码
2012/08/17 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
2014/05/05 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
2015/03/03 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
2015/03/15 Javascript
JavaScript数组和循环详解
2015/04/27 Javascript
JavaScript优化专题之Loading and Execution加载和运行
2016/01/20 Javascript
JS添加删除DIV的简单实例
2016/07/08 Javascript
js实现的在本地预览图片功能示例
2019/11/09 Javascript
Python Django使用forms来实现评论功能
2016/08/17 Python
python+django快速实现文件上传
2016/10/24 Python
python下载图片实现方法(超简单)
2017/07/21 Python
通过Py2exe将自己的python程序打包成.exe/.app的方法
2018/05/26 Python
python3实现随机数
2018/06/25 Python
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
利用python和百度地图API实现数据地图标注的方法
2019/05/13 Python
python程序输出无内容的解决方式
2020/04/09 Python
如何基于matlab相机标定导出xml文件
2020/11/02 Python
CSS3制作精致的照片墙特效
2016/06/07 HTML / CSS
CSS去掉A标签(链接)虚线框的方法
2014/04/01 HTML / CSS
html5通过postMessage进行跨域通信的方法
2017/12/04 HTML / CSS
女士和男士时尚鞋在线购物:Shoespie
2019/02/28 全球购物
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
大学生实习期自我评价范文
2013/10/03 职场文书
教师自荐信
2013/12/10 职场文书
家长通知书教师评语
2014/04/17 职场文书
讲党性心得体会
2014/09/03 职场文书
八项规定个人对照检查材料思想汇报
2014/09/25 职场文书
《假如》教学反思
2016/02/17 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书
Javascript使用integrity属性进行安全验证
2021/11/07 Javascript