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实现简单验证码提示解决方案
Dec 20 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
Apr 03 Javascript
javascript中动态函数用法实例分析
May 14 Javascript
animate 实现滑动切换效果【实例代码】
May 05 Javascript
微信小程序 数据访问实例详解
Oct 08 Javascript
Angular企业级开发——MVC之控制器详解
Feb 20 Javascript
JavaScript实现左右下拉框动态增删示例
Mar 09 Javascript
深入学习 JavaScript中的函数调用
Mar 23 Javascript
微信小程序tabbar底部导航
Nov 05 Javascript
Vue中的组件及路由使用实例代码详解
May 22 Javascript
Vue打包后访问静态资源路径问题
Nov 08 Javascript
使用preload预加载页面资源时注意事项
Feb 03 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 DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
php程序内部post数据的方法
2015/03/31 PHP
详解阿里云视频直播PHP-SDK接入教程
2020/07/09 PHP
ExtJs3.0中Store添加 baseParams 的Bug
2010/03/10 Javascript
js循环改变div颜色具体方法
2013/06/25 Javascript
关于extjs4如何获取grid修改后的数据的问题
2013/08/07 Javascript
JS 实现导航栏悬停效果
2013/09/23 Javascript
jQuery中append()方法用法实例
2014/12/25 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
2015/05/04 Javascript
jquery+php实现滚动的数字特效
2015/11/29 Javascript
微信小程序 开发之快递查询功能的实现
2017/01/09 Javascript
jquery实现百叶窗效果
2017/01/12 Javascript
Nodejs进阶之服务端字符编解码和乱码处理
2017/09/04 NodeJs
node版本管理工具n包使用教程详解
2018/11/09 Javascript
Python开发实例分享bt种子爬虫程序和种子解析
2014/05/21 Python
Python中str is not callable问题详解及解决办法
2017/02/10 Python
python3使用SMTP发送HTML格式邮件
2018/06/19 Python
解决新django中的path不能使用正则表达式的问题
2018/12/18 Python
python安装requests库的实例代码
2019/06/25 Python
Python用字典构建多级菜单功能
2019/07/11 Python
利用Python复制文件的9种方法总结
2019/09/02 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
详解Python中list[::-1]的几种用法
2020/11/16 Python
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
澳大利亚首屈一指的鞋类品牌:Tony Bianco
2018/03/13 全球购物
美国排名第一的泳池用品直接来源:In The Swim
2019/09/23 全球购物
阿联酋最好的手机、电子产品和家用电器网上商店:Eros Digital Home
2020/08/09 全球购物
计算机操作自荐信
2013/12/07 职场文书
贷款担保申请书
2014/05/20 职场文书
2014年党员承诺书范文
2014/05/20 职场文书
生产操作工岗位职责
2014/09/16 职场文书
师德师风自我剖析材料
2014/09/27 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
共青团优秀团员申请书(范文)
2019/08/15 职场文书
关于食品安全的演讲稿范文(三篇)
2019/10/21 职场文书
Windows下用Nginx配置https服务器及反向代理的问题
2021/09/25 Servers