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实例分享--超炫checkbox复选框和radio单选框
Sep 01 HTML / CSS
CSS3弹性盒模型开发笔记(二)
Apr 26 HTML / CSS
css3的过滤效果简单实例
Aug 03 HTML / CSS
css3 实现元素弧线运动的示例代码
Apr 24 HTML / CSS
基于 HTML5 WebGL 实现的垃圾分类系统
Oct 08 HTML / CSS
web页面录屏实现
Feb 12 HTML / CSS
canvas绘制圆角头像的实现方法
Jan 17 HTML / CSS
Canvas图片分割效果的实现
Jul 29 HTML / CSS
html5默认气泡修改的代码详解
Mar 13 HTML / CSS
html5拖拽应用记录及注意点
May 27 HTML / CSS
清除canvas画布内容(点擦除+线擦除)
Aug 12 HTML / CSS
html网页引入svg图片的4种方式
Aug 05 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
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
PDO::beginTransaction讲解
2019/01/27 PHP
JS 面向对象的5钟写法
2009/07/31 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
2013/01/15 Javascript
鼠标焦点离开文本框时验证的js代码
2013/07/19 Javascript
jquery鼠标滑过提示title具体实现代码
2013/08/06 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
2014/01/26 Javascript
js匿名函数的调用示例(形式多种多样)
2014/08/20 Javascript
最实用的jQuery分页插件
2016/10/09 Javascript
微信开发 消息推送实现代码
2016/10/21 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
node实现简单的反向代理服务器
2017/07/26 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
[01:08]2014DOTA2展望TI 剑指西雅图LGD战队专访
2014/06/30 DOTA
Python tempfile模块学习笔记(临时文件)
2014/05/25 Python
python使用Berkeley DB数据库实例
2014/09/26 Python
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
python读取文本中数据并转化为DataFrame的实例
2018/04/10 Python
基于Python log 的正确打开方式
2018/04/28 Python
django DRF图片路径问题的解决方法
2018/09/10 Python
Python实现获取汉字偏旁部首的方法示例【测试可用】
2018/12/18 Python
Python中使用双下划线防止类属性被覆盖问题
2019/06/27 Python
python3正则模块re的使用方法详解
2020/02/11 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
使用bandit对目标python代码进行安全函数扫描的案例分析
2021/01/27 Python
浅析两列自适应布局的3种思路
2016/05/03 HTML / CSS
Mountain Warehouse德国官网:英国户外零售商
2019/08/11 全球购物
新东方旗下远程教育网站:新东方在线
2020/03/19 全球购物
Piercing Pagoda官网:耳环、戒指、项链、手链等
2020/09/28 全球购物
工程造价与财务管理专业应届生求职信
2013/10/06 职场文书
思想汇报范文
2013/11/04 职场文书
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
企业年检委托书范本
2014/10/14 职场文书
群众路线专项整治工作情况报告
2014/10/28 职场文书
嘉宾邀请函
2015/01/31 职场文书
2016会计专业自荐信范文
2016/01/28 职场文书