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星级插件、支持页面中多次使用
Mar 25 Javascript
iphone safari不支持position fixed的解决方法
May 04 Javascript
JavaScript也谈内存优化
Jun 06 Javascript
jQuery Migrate 1.1.0 Released 注意事项
Jun 14 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
May 13 Javascript
js实现鼠标点击文本框自动选中内容的方法
Aug 20 Javascript
AngularJS 使用$sce控制代码安全检查
Jan 05 Javascript
jQuery AjaxUpload 上传图片代码
Feb 02 Javascript
js仿支付宝多方框输入支付密码效果
Sep 27 Javascript
JavaScript生成图形验证码
Aug 24 Javascript
vue h5移动端禁止缩放代码
Oct 28 Javascript
JavaScript如何利用Promise控制并发请求个数
May 14 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
phpwind中的数据库操作类
2007/01/02 PHP
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
详解yii2使用多个数据库的案例
2017/06/16 PHP
确保Laravel网站不会被嵌入到其他站点中的方法
2019/10/18 PHP
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
2007/02/15 Javascript
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
jQuery 源码分析笔记(7) Queue
2011/06/19 Javascript
jQuery :first选择器使用介绍
2013/08/09 Javascript
extjs表格文本启用选择复制功能具体实现
2013/10/11 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
关于数据与后端进行交流匹配(点亮星星)
2016/08/03 Javascript
JS实现仿百度文库评分功能
2017/01/12 Javascript
jQuery实现淡入淡出的模态框
2017/02/09 Javascript
JavaScript和JQuery获取DIV值的方法示例
2017/03/07 Javascript
基于require.js的使用(实例讲解)
2017/09/07 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
2017/12/05 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
2018/08/13 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018/11/08 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
使用Flask-Cache缓存实现给Flask提速的方法详解
2019/06/11 Python
pycharm配置当鼠标悬停时快速提示方法参数
2019/07/31 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
python属于跨平台语言码
2020/06/09 Python
CSS3 真的会替代 SCSS 吗
2021/03/09 HTML / CSS
一套英文Java笔试题面试题
2016/04/21 面试题
学生实习自我鉴定
2013/10/11 职场文书
小学学校评估方案
2014/06/08 职场文书
旅游活动总结
2014/08/27 职场文书
博士生专家推荐信
2015/03/25 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书
八年级作文之友情
2019/11/25 职场文书
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP
linux下导入、导出mysql数据库命令的实现方法
2021/05/26 MySQL