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 相关文章推荐
jquery-easyui关闭tab自动切换到前一个tab
Jul 29 Javascript
javascript自动改变文字大小和颜色的效果的小例子
Aug 02 Javascript
JavaScript SetInterval与setTimeout使用方法详解
Nov 15 Javascript
JavaScript异步回调的Promise模式封装实例
Jun 07 Javascript
js正则表达式匹配数字字母下划线等
Apr 14 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
May 22 Javascript
javascript 封装Date日期类实例详解
May 28 Javascript
详解vue-cli开发环境跨域问题解决方案
Jun 06 Javascript
JavaScript实现各种排序的代码详解
Aug 28 Javascript
es6 filter() 数组过滤方法总结
Apr 03 Javascript
一次微信小程序内地图的使用实战记录
Sep 09 Javascript
详解node登录接口之密码错误限制次数(含代码)
Oct 25 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图片水印类的封装
2017/07/06 PHP
PHP使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
浅谈laravel框架sql中groupBy之后排序的问题
2019/10/17 PHP
JS启动应用程序的一个简单例子
2008/05/11 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
2012/02/27 Javascript
JQuery伸缩导航练习示例
2013/11/13 Javascript
JavaScript中遍历对象的property的3种方法介绍
2014/12/30 Javascript
Javascript中innerHTML用法实例分析
2015/01/12 Javascript
JS随机调用指定函数的方法
2015/07/01 Javascript
javascript实现将文件保存到本地方法汇总
2015/07/26 Javascript
js和jquery实现监听键盘事件示例代码
2020/06/24 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
JavaScript中的 new 命令
2019/05/22 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
vue分页插件的使用方法
2019/12/25 Javascript
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
python 制作磁力搜索工具
2021/03/04 Python
css3 中translate和transition的使用方法
2020/03/26 HTML / CSS
法国在线药房:1001Pharmacies
2021/03/07 全球购物
Eclipse面试题
2014/03/22 面试题
指针和引用有什么区别
2013/01/13 面试题
怎样写留学自荐信
2013/11/11 职场文书
模具毕业生推荐信
2014/02/15 职场文书
代办委托书怎样写
2014/04/08 职场文书
公务员中国梦演讲稿
2014/08/19 职场文书
社区娱乐活动方案
2014/08/21 职场文书
办公室文员工作自我鉴定
2014/09/19 职场文书
专家推荐信怎么写
2015/03/25 职场文书
公司文体活动总结
2015/05/07 职场文书
教师学习中国梦心得体会
2016/01/05 职场文书
redis缓存存储Session原理机制
2021/11/20 Redis