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实现input输入框颜色渐变发光效果代码
Apr 02 HTML / CSS
使用CSS3来匹配横屏竖屏的简单方法
Aug 04 HTML / CSS
CSS3 实现弹幕的示例代码
Aug 07 HTML / CSS
css3 仿写阿里云水纹效果的示例代码
Feb 10 HTML / CSS
localStorage 设置过期时间的方法实现
Dec 21 HTML / CSS
HTML5的结构和语义(3):语义性的块级元素
Oct 17 HTML / CSS
Canvas与Image互相转换示例代码
Aug 09 HTML / CSS
HTML5+CSS3绘制锯齿状的矩形
Mar 01 HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
Mar 22 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
Jan 11 HTML / CSS
HTML5视频播放插件 video.js介绍
Sep 29 HTML / CSS
web前端之css水平居中代码解析
May 20 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/18 PHP
php5.3 goto函数介绍和示例
2014/03/21 PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
Javascript-Mozilla和IE中的一个函数直接量的问题分析
2007/08/12 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
2012/04/07 Javascript
禁用页面部分JavaScript方法的具体实现
2013/07/31 Javascript
纯JavaScript代码实现文本比较工具
2016/02/17 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
2016/08/11 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
2016/09/06 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
2017/06/12 Javascript
webpack常用构建优化策略小结
2019/11/21 Javascript
JavaScript鼠标拖拽事件详解
2020/04/03 Javascript
[05:59]带你看看DPC的台前幕后
2021/03/11 DOTA
python3编写C/S网络程序实例教程
2014/08/25 Python
python批量提取word内信息
2015/08/09 Python
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
Python 搭建Web站点之Web服务器与Web框架
2016/11/06 Python
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
Python中实现switch功能实例解析
2018/01/11 Python
Python中一行和多行import模块问题
2018/04/01 Python
使用Python读取二进制文件的实例讲解
2018/07/09 Python
python多进程实现文件下载传输功能
2018/07/28 Python
Python给定一个句子倒序输出单词以及字母的方法
2018/12/20 Python
Python自动化运维之Ansible定义主机与组规则操作详解
2019/06/13 Python
Python中拆分字符串的操作方法
2019/07/23 Python
python实现单张图像拼接与批量图片拼接
2020/03/23 Python
selenium自动化测试入门实战
2020/12/21 Python
加拿大高尔夫超市:Golf Town
2018/01/12 全球购物
充分就业社区汇报材料
2014/05/07 职场文书
责任书格式范文
2014/07/28 职场文书
青年标兵事迹材料
2014/08/16 职场文书
学校元旦晚会开场白
2015/05/29 职场文书
导游词之杭州西湖
2019/09/19 职场文书
Python时间操作之pytz模块使用详解
2022/06/14 Python