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 相关文章推荐
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
JavaScript DOM 学习第二章 编辑文本
Feb 19 Javascript
JSON.parse 解析字符串出错的解决方法
Jul 08 Javascript
JS根据生日算年龄的方法
May 05 Javascript
需要牢记的JavaScript基础知识
Sep 25 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
Oct 19 Javascript
vue左右侧联动滚动的实现代码
Jun 06 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 Javascript
ios设备中angularjs无法改变页面title的解决方法
Sep 13 Javascript
浅谈vue限制文本框输入数字的正确姿势
Sep 02 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
Dec 27 Javascript
React实现类似淘宝tab居中切换效果的示例代码
Jun 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仿博客园 个人博客(1) 数据库与界面设计
2013/07/05 PHP
ThinkPHP使用心得分享-上传类UploadFile的使用
2014/05/15 PHP
PHP实现使用优酷土豆视频地址获取swf播放器分享地址
2014/06/05 PHP
解密ThinkPHP3.1.2版本之模块和操作映射
2014/06/19 PHP
PHP简单数据库操作类实例【支持增删改查及链式操作】
2016/10/10 PHP
javascript textContent与innerText的异同分析
2010/10/22 Javascript
js 浏览器事件介绍
2012/03/30 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
深入理解javascript严格模式(Strict Mode)
2014/11/28 Javascript
JavaScript动态添加列的方法
2015/03/25 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
jQuery遍历节点方法汇总(推荐)
2017/05/13 jQuery
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
2017/09/26 Javascript
Vue中的Vux配置指南
2017/12/08 Javascript
js拖动滑块和点击水波纹效果实例代码
2018/10/16 Javascript
angular 服务随记小结
2019/05/06 Javascript
Js逆向实现滑动验证码图片还原的示例代码
2020/03/10 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
详解vue 中 scoped 样式作用域的规则
2020/09/14 Javascript
[57:18]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#3VP VS VG
2016/03/03 DOTA
实例讲解Python中函数的调用与定义
2016/03/14 Python
python 如何快速找出两个电子表中数据的差异
2017/05/26 Python
python通过微信发送邮件实现电脑关机
2018/06/20 Python
python 检查文件mime类型的方法
2018/12/08 Python
对python 自定义协议的方法详解
2019/02/13 Python
python 实现的发送邮件模板【普通邮件、带附件、带图片邮件】
2019/07/06 Python
linux中如何使用python3获取ip地址
2019/07/15 Python
PyTorch和Keras计算模型参数的例子
2020/01/02 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
介绍一下木马病毒的种类
2015/07/26 面试题
2014年教师教学工作总结
2014/11/08 职场文书
李强为自己工作观后感
2015/06/11 职场文书
校园安全学习心得体会
2016/01/18 职场文书
详解Python中__new__方法的作用
2022/03/31 Python
python运行脚本文件的三种方法实例
2022/06/25 Python