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代码
Aug 13 Javascript
百度判断手机终端并自动跳转js代码及使用实例
Jun 11 Javascript
Windows8下搭建Node.js开发环境教程
Sep 03 Javascript
JavaScript中的变量作用域介绍
Dec 31 Javascript
全面解析JavaScript中“&&”和“||”操作符(总结篇)
Jul 18 Javascript
jQuery的deferred对象使用详解
Sep 25 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 Javascript
Bootstrap标签页(Tab)插件使用方法
Mar 21 Javascript
用vue快速开发app的脚手架工具
Jun 11 Javascript
JavaScript基础之this和箭头函数详析
Sep 05 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 Javascript
Vue 修改网站图标的方法
Dec 31 Vue.js
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依赖注入的理解实例分析
2016/10/09 PHP
HTML中事件触发列表与解说
2007/07/09 Javascript
js将控件隐藏的方法及display属性介绍
2013/07/04 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
2014/10/07 Javascript
JavaScript中对象property的删除方法介绍
2014/12/30 Javascript
jQuery鼠标事件汇总
2015/08/30 Javascript
jQuery基于扩展实现的倒计时效果
2016/05/14 Javascript
JavaScript排序算法动画演示效果的实现方法
2016/10/18 Javascript
关于Angularjs中跨域设置白名单问题
2018/04/17 Javascript
vue中锚点的三种方法
2018/07/06 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
小程序input数据双向绑定实现方法
2019/10/17 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
2020/06/11 Javascript
[39:02]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs VGJ.T
2018/04/01 DOTA
Python中用memcached来减少数据库查询次数的教程
2015/04/07 Python
python实现自动更换ip的方法
2015/05/05 Python
Python回调函数用法实例详解
2015/07/02 Python
python学习笔记之调用eval函数出现invalid syntax错误问题
2015/10/18 Python
使用Python保存网页上的图片或者保存页面为截图
2016/03/05 Python
浅谈Python基础之I/O模型
2017/05/11 Python
Python实现两个list对应元素相减操作示例
2017/06/09 Python
Keras实现DenseNet结构操作
2020/07/06 Python
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
澳大利亚运动鞋商店:Platypus Shoes
2019/09/27 全球购物
护理学毕业生求职信
2013/11/14 职场文书
关于毕业的广播稿
2014/01/10 职场文书
九年级科学教学反思
2014/01/29 职场文书
个人委托书
2014/07/31 职场文书
研究生毕业论文导师评语
2014/12/31 职场文书
毕业生评语大全
2015/01/04 职场文书
毕业论文答辩稿范文
2015/06/23 职场文书
高中物理教学反思
2016/02/19 职场文书
深入理解以DEBUG方式线程的底层运行原理
2021/06/21 Java/Android
springboot如何接收application/x-www-form-urlencoded类型的请求
2021/11/02 Java/Android
实操Python爬取觅知网素材图片示例
2021/11/27 Python