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 background-image颜色渐变的实现代码
Sep 13 HTML / CSS
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
Nov 05 HTML / CSS
CSS3 @font-face属性使用指南
Dec 12 HTML / CSS
HTML5是否真的可以取代Flash
Feb 10 HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
Jun 09 HTML / CSS
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
Apr 10 HTML / CSS
浅谈html5 响应式布局
Dec 24 HTML / CSS
HTML5不支持frameset的两种解决方法
Nov 14 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
Jan 30 HTML / CSS
吃透移动端 Html5 响应式布局
Dec 16 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
Dec 23 HTML / CSS
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
Apr 08 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 求质素(素数) 的实现代码
2011/04/12 PHP
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
PHP数学运算与数据处理实例分析
2016/04/01 PHP
php提交过来的数据生成为txt文件
2016/04/28 PHP
PHP将数据导出Excel表中的实例(投机型)
2017/07/31 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
JavaScript 全角转半角部分
2009/10/28 Javascript
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
jquery加载页面的方法(页面加载完成就执行)
2011/06/21 Javascript
基于jQuery的360图片展示实现代码
2012/06/14 Javascript
文本域中换行符的替换示例
2014/03/04 Javascript
jQuery中unwrap()方法用法实例
2015/01/16 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
2015/02/27 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
2015/08/07 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
2016/06/12 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
Vue.js 表单校验插件
2016/08/14 Javascript
nodejs读取并去重excel文件
2018/04/22 NodeJs
vue滚动tab跟随切换效果
2020/06/29 Javascript
Node.js系列之发起get/post请求(2)
2019/08/30 Javascript
vue+element表格导出为Excel文件
2019/09/26 Javascript
JavaScript缓动动画函数的封装方法
2020/11/25 Javascript
Python批量修改文件后缀的方法
2014/01/26 Python
Python多进程分块读取超大文件的方法
2016/04/13 Python
windows下安装Python虚拟环境virtualenvwrapper-win
2019/06/14 Python
Python 二叉树的层序建立与三种遍历实现详解
2019/07/29 Python
面向对象学习之pygame坦克大战
2019/09/11 Python
python 制作网站小说下载器
2021/02/20 Python
strlen的几种不同实现方法
2013/05/31 面试题
Linux面试题LINUX系统类
2014/11/19 面试题
电子专业推荐信范文
2013/11/18 职场文书
茶叶店创业计划书范文
2014/01/19 职场文书
企业优秀团员事迹材料
2014/08/20 职场文书
2015社区精神文明建设工作总结
2015/04/21 职场文书
如何用JS实现网页瀑布流布局
2021/04/24 Javascript