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 绘制BMW logo实的现代码
Apr 25 HTML / CSS
CSS3实现鼠标悬停显示扩展内容
Aug 24 HTML / CSS
CSS3 :not()选择器实现最后一行li去除某种css样式
Oct 19 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
May 20 HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
Apr 23 HTML / CSS
html5使用canvas画一条线
Dec 15 HTML / CSS
HTML5之tabindex属性全面解析
Jul 07 HTML / CSS
html5唤起app的方法
Nov 30 HTML / CSS
AmazeUI 导航条的实现示例
Aug 14 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
Jan 27 HTML / CSS
css3实现背景图片半透明内容不透明的方法示例
Apr 13 HTML / CSS
用CSS3画一个爱心
Apr 27 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常用函数的使用汇总
2013/06/08 PHP
php中substr()函数参数说明及用法实例
2014/11/15 PHP
php绘制一条弧线的方法
2015/01/24 PHP
php构造函数的继承方法
2015/02/09 PHP
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
PHP+MySql+jQuery实现的"顶"和"踩"投票功能
2016/05/21 PHP
php 比较获取两个数组相同和不同元素的例子(交集和差集)
2019/10/18 PHP
JS 实现点击a标签的时候让其背景更换
2013/10/15 Javascript
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
jQuery的remove()方法使用详解
2015/08/11 Javascript
AngularJS 中的指令实践开发指南(一)
2016/03/20 Javascript
JavaScript & jQuery完美判断图片是否加载完毕
2017/01/08 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
jQuery正则验证注册页面经典实例
2017/06/10 jQuery
详解vue express启动数据服务
2017/07/05 Javascript
详解JavaScript 为什么要有 Symbol 类型?
2019/04/03 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
2019/06/10 Javascript
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
python文件和目录操作方法大全(含实例)
2014/03/12 Python
教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
2014/07/04 Python
在Python的Flask中使用WTForms表单框架的基础教程
2016/06/07 Python
Python生成8位随机字符串的方法分析
2017/12/05 Python
python实现神经网络感知器算法
2017/12/20 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
详解Python 解压缩文件
2019/04/09 Python
python3射线法判断点是否在多边形内
2019/06/28 Python
Python 获取windows桌面路径的5种方法小结
2019/07/15 Python
Python Django中间件,中间件函数,全局异常处理操作示例
2019/11/08 Python
Pytorch生成随机数Tensor的方法汇总
2020/09/09 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
三月学雷锋月活动总结
2014/04/28 职场文书
中文专业自荐书
2014/06/29 职场文书
社区班子个人对照检查材料思想汇报
2014/10/07 职场文书
个人先进材料范文
2014/12/30 职场文书
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android