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实现毛玻璃效果示例源码
Sep 25 HTML / CSS
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
Apr 01 HTML / CSS
css3弹性盒模型实例介绍
May 27 HTML / CSS
实列教程 一款基于jquery和css3的响应式二级导航菜单
Nov 13 HTML / CSS
总结30个CSS3选择器
Apr 13 HTML / CSS
浅谈CSS3 box-sizing 属性 有趣的盒模型
Apr 02 HTML / CSS
HTML5的结构和语义(1):前言
Oct 17 HTML / CSS
HTML5的download属性详细介绍和使用实例
Apr 23 HTML / CSS
前端实现打印图像功能
Aug 27 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
Jul 03 HTML / CSS
不要在HTML中滥用div
May 08 HTML / CSS
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
Dec 24 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
PHP4中实现动态代理
2006/10/09 PHP
分享php分页的功能模块
2015/06/16 PHP
Alliance vs Liquid BO3 第二场2.13
2021/03/10 DOTA
JScript的条件编译
2007/05/29 Javascript
Javascript注入技巧
2007/06/22 Javascript
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
JS批量操作CSS属性详细解析
2013/12/16 Javascript
jquery进行数组遍历如何跳出当前的each循环
2014/06/05 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
JavaScript中使用指数方法Math.exp()的简介
2015/06/15 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
2015/11/03 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
2017/09/30 Javascript
JS实现自定义状态栏动画文字效果示例
2017/10/12 Javascript
利用Vue2.x开发实现JSON树的方法
2018/01/04 Javascript
React中如何引入Angular组件详解
2018/08/09 Javascript
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
解决vue无法设置滚动位置的问题
2018/10/07 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
js实现跟随鼠标移动的小球
2019/08/26 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
2019/09/16 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
微信跳一跳python代码实现
2018/01/05 Python
浅谈python中真正关闭socket的方法
2018/12/18 Python
Django时区详解
2019/07/24 Python
PyTorch-GPU加速实例
2020/06/23 Python
css3利用transform变形结合事件完成扇形导航
2020/10/26 HTML / CSS
HTML5中Canvas与SVG的画图原理比较
2013/01/16 HTML / CSS
优秀大学生的自我评价
2014/01/16 职场文书
中学生演讲稿
2014/04/26 职场文书
机关保密承诺书
2014/06/03 职场文书
义和团口号
2014/06/17 职场文书
同意报考证明
2015/06/17 职场文书
golang interface判断为空nil的实现代码
2021/04/24 Golang
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android