html5 录制mp3音频支持采样率和比特率设置


Posted in Javascript onJuly 15, 2021

13年的时候做过html5录音,一个问题是保存的wav格式文件很大,当初用了一个迂回的方式,上传到服务器后调用 lame 编码器转换,但由于文件大,上传较慢。不得不说,前端技术发展真是日新月异,有人实现了js版本的lame编码器,可以直接在浏览器端录制MP3音频。

lamejs介绍

最初有个开源项目libmp3lame-js,直接将 lame 源码编译为 js版本,后来有人基于libmp3lame使用 js 进行了重写,就是如今的lamejs 项目。相比libmp3lame ,自身体积更小,而且能实现更快的编码速度。据介绍说,编码一个132秒长度的音频仅需6.5秒。

录制mp3音频

我对代码进行了梳理和封装,已发布到Github,参见 mp3-recorder。对实现过程有兴趣或对使用lamejs有兴趣的,可以参考我的源码。支持Firefox 及 Webkit浏览器。

采用64kbps比特率,录制一分钟音频长度约为480KB。

html5 录制mp3音频支持采样率和比特率设置

调用示例

/*
    MP3的采样频率分为 48000 44100 32000 24000 22050 16000 12050 8000

    比特率值与现实音频对照(仅供参考)
  16Kbps=电话音质
  24Kbps=增加电话音质、短波广播、长波广播、欧洲制式中波广播
  40Kbps=美国制式中波广播
  56Kbps=话音
  64Kbps=增加话音(手机铃声最佳比特率设定值、手机单声道MP3播放器最佳设定值)
  112Kbps=FM调频立体声广播
  128Kbps=磁带(手机立体声MP3播放器最佳设定值、低档MP3播放器最佳设定值)
  160Kbps=HIFI高保真(中高档MP3播放器最佳设定值)  
   192Kbps=CD(高档MP3播放器最佳设定值)
  256Kbps=Studio音乐工作室(音乐发烧友适用)
*/

//唯一影响mp3文件大小的参数为 bitRate
//sampleRate 仅供特殊需求的人使用
var recorder = new MP3Recorder({
    //numChannels: 1,     //声道数,默认为1
    //sampleRate: 8000,   //采样率,一般由设备提供,比如 48000
    bitRate: 64,        //比特率,不要低于64,否则可能录制无声音(人声)

    //录音结束事件
    complete: function (data, type) {
        //blob为mp3音频数据
        var blob = new Blob(data, { type: type });
    }
});

//开始录音
recorder.start(onSuccess, onError);

//停止录音
recorder.stop();

//暂停录音
recorder.pause();

//恢复录音
recorder.resume();

使用很简单,demo有详细代码,在此就不多说了。

代码下载

源码及示例代码

源码更新请关注Github

到此这篇关于html5 录制mp3音频支持采样率和比特率设置的文章就介绍到这了,更多相关html5 录制mp3音频内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScipt基本教程之JavaScript语言的基础
Jan 16 Javascript
jQuery 在光标定位的地方插入文字的插件
May 10 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
Jul 08 Javascript
JS判断图片是否加载完成方法汇总(最新版)
May 13 Javascript
原生Javascript和jQuery做轮播图简单例子
Oct 11 Javascript
ES6中Proxy代理用法实例浅析
Apr 06 Javascript
JavaScript中立即执行函数实例详解
Nov 04 Javascript
Vue.js 踩坑记之双向绑定
May 03 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
Intellij IDEA搭建vue-cli项目的方法步骤
Oct 20 Javascript
详解vue父子组件关于模态框状态的绑定方案
Jun 05 Javascript
js实现简单商品筛选功能
Feb 02 Javascript
js基础语法与maven项目配置教程案例
JavaScript与JQuery框架基础入门教程
Jul 15 #Javascript
Python机器学习之决策树和随机森林
微信小程序scroll-view不能左右滑动问题的解决方法
Vue Element-ui表单校验规则实现
Jul 09 #Vue.js
JavaScript数组reduce()方法的语法与实例解析
Jul 07 #Javascript
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 #Vue.js
You might like
常用的php对象类型判断
2008/08/27 PHP
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
JS高级拖动技术 setCapture,releaseCapture
2011/07/31 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
2013/11/28 Javascript
javascript中不等于的代码是什么怎么写
2013/12/29 Javascript
关于Javascript加载执行优化的研究报告
2014/12/16 Javascript
jquery实现动态操作select选中
2015/02/11 Javascript
AngularJS 自定义指令详解及示例代码
2016/08/17 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
2016/10/18 Javascript
jquery 手势密码插件
2017/03/17 Javascript
JS数组搜索之折半搜索实现方法分析
2017/03/27 Javascript
Vue组件选项props实例详解
2017/08/18 Javascript
微信小程序input框中加入小图标的实现方法
2018/06/19 Javascript
详解处理Vue单页面应用SEO的另一种思路
2018/11/09 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
2019/04/16 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
python网络编程实例简析
2014/09/26 Python
Python对数据库操作
2016/03/28 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
django 使用全局搜索功能的实例详解
2019/07/18 Python
python如何爬取网页中的文字
2020/07/28 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
英国高级百货公司:Harvey Nichols
2017/01/29 全球购物
自荐信格式技巧有哪些呢
2013/11/19 职场文书
资料员的岗位职责
2013/11/20 职场文书
优秀员工个人的自我评价
2013/11/29 职场文书
创意婚礼策划方案
2014/05/18 职场文书
森林病虫害防治方案
2014/06/02 职场文书
客房服务员岗位职责
2015/02/09 职场文书
警告通知
2015/04/25 职场文书
员工工作表扬信
2015/05/05 职场文书
浅谈Python numpy创建空数组的问题
2021/05/25 Python