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实现信纸/同学录效果的示例代码
Dec 11 HTML / CSS
CSS中的字体大小设置属性总结
May 24 HTML / CSS
CSS的background属性及CSS3的背景图片设置总结
Jun 13 HTML / CSS
利用纯CSS3实现tab选项卡切换示例代码
Sep 21 HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
Aug 04 HTML / CSS
HTML5 对各个标签的定义与规定:body的介绍
Jun 21 HTML / CSS
多视角3D逼真HTML5水波动画
Mar 03 HTML / CSS
Html5获取高德地图定位天气的方法
Dec 26 HTML / CSS
canvas实现手机的手势解锁的步骤详细
Mar 16 HTML / CSS
HTML5 层的叠加的实现
Jul 07 HTML / CSS
Canvas 帧动画吃苹果小游戏
Aug 05 HTML / CSS
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
Apr 07 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 socke 向指定页面提交数据
2008/07/23 PHP
打造超酷的PHP数据饼图效果实现代码
2011/11/23 PHP
php 字符串替换的方法
2012/01/10 PHP
PHP ignore_user_abort函数详细介绍和使用实例
2014/07/15 PHP
CI框架验证码CAPTCHA辅助函数用法实例
2014/11/05 PHP
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
javascript全局变量封装模块实现代码
2012/11/28 Javascript
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
JavaScript异步加载浅析
2014/12/28 Javascript
深入理解JavaScript单体内置对象
2016/06/06 Javascript
jQuery插件扩展操作入门示例
2017/01/16 Javascript
js操作浏览器的参数方法
2017/01/21 Javascript
mac上node.js环境的安装测试
2017/07/03 Javascript
详解Node.js中的Async和Await函数
2018/02/22 Javascript
vue通过点击事件读取音频文件的方法
2018/05/30 Javascript
element-ui多文件上传的实现示例
2019/04/10 Javascript
js简单的分页器插件代码实例
2019/09/11 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
[48:51]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第一场 11.28
2020/12/02 DOTA
Python编程求解二叉树中和为某一值的路径代码示例
2018/01/04 Python
Python基于多线程实现ping扫描功能示例
2018/07/23 Python
对python:print打印时加u的含义详解
2018/12/15 Python
Python3.6.x中内置函数总结及讲解
2019/02/22 Python
Python中正则表达式的用法总结
2019/02/22 Python
浅析Python 读取图像文件的性能对比
2019/03/07 Python
python将字符串转变成dict格式的实现
2019/11/18 Python
python 实现方阵的对角线遍历示例
2019/11/29 Python
6行Python代码实现进度条效果(Progress、tqdm、alive-progress​​​​​​​和PySimpleGUI库)
2020/01/06 Python
tensorflow入门:tfrecord 和tf.data.TFRecordDataset的使用
2020/01/20 Python
匈牙利最大的健身制造商和销售商:inSPORTline
2018/10/30 全球购物
大学本科毕业生求职信范文
2013/12/18 职场文书
公司副总经理岗位职责
2014/10/01 职场文书
紧急通知
2015/04/17 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书
基于go interface{}==nil 的几种坑及原理分析
2021/04/24 Golang
Python基础之常用库常用方法整理
2021/04/30 Python