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实例教程 一款纯css3实现的环形导航菜单
Oct 20 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
Jul 02 HTML / CSS
如何使用html5与css3完成google涂鸦动画
Dec 16 HTML / CSS
html5教程实现Photoshop渐变色效果
Dec 04 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
Apr 10 HTML / CSS
整理HTML5移动端开发的常用触摸事件
Apr 15 HTML / CSS
HTML5制作表格样式
Nov 15 HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
Aug 05 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
Dec 04 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
Jan 25 HTML / CSS
html5表单的required属性使用
Jul 07 HTML / CSS
css让页脚保持在底部位置的四种方案
Jul 23 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
《超神学院》霸气归来, 天使彦上演维多利亚的秘密
2020/03/02 国漫
PHP采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
php实现随机生成易于记忆的密码
2015/06/19 PHP
php简单判断两个字符串是否相等的方法
2015/07/13 PHP
百万级别知乎用户数据抓取与分析之PHP开发
2015/09/28 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
用Javascript读取中文COOKIE的解决办法
2007/02/15 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
2011/04/07 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
2013/08/21 Javascript
php跨域调用json的例子
2013/11/13 Javascript
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
JavaScript动态添加事件之事件委托
2016/07/12 Javascript
Javascript使用function创建类的两种方法(推荐)
2016/11/19 Javascript
laydate日历控件使用方法详解
2017/11/20 Javascript
基于vue cli重构多页面脚手架过程详解
2018/01/23 Javascript
微信小程序使用map组件实现解析经纬度功能示例
2019/01/22 Javascript
vue cli 3.x 项目部署到 github pages的方法
2019/04/17 Javascript
关于微信小程序map组件z-index的层级问题分析
2019/07/09 Javascript
vue-next/runtime-core 源码阅读指南详解
2019/10/25 Javascript
element跨分页操作选择详解
2020/06/29 Javascript
python+mysql实现简单的web程序
2014/09/11 Python
浅谈python中的变量默认是什么类型
2016/09/11 Python
python中单下划线_的常见用法总结
2018/07/10 Python
python递归实现快速排序
2018/08/18 Python
英国马莎百货官网:Marks & Spencer
2016/07/29 全球购物
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
保洁主管岗位职责
2013/11/20 职场文书
考博专家推荐信模板
2013/12/02 职场文书
企业军训感言
2014/02/08 职场文书
老人祝寿主持词
2014/03/28 职场文书
中学生操行评语
2014/04/24 职场文书
消防安全标语
2014/06/07 职场文书
2014年检察院个人工作总结
2014/12/09 职场文书
北京青年观后感
2015/06/15 职场文书
陈斌强事迹观后感
2015/06/17 职场文书
Python使用MapReduce进行简单的销售统计
2022/04/22 Python