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 相关文章推荐
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 Javascript
JS代码同步文本框内容的实例方法
Jul 12 Javascript
js+div实现图片滚动效果代码
Feb 10 Javascript
用jquery修复在iframe下的页面锚点失效问题
Aug 22 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
Apr 29 Javascript
Highcharts学习之数据列
Aug 03 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
Mar 14 Javascript
基于JavaScript实现飘落星星特效
Aug 10 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
Sep 01 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 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中与数组相关的函数
2007/03/22 PHP
PHP实现二维数组根据key进行排序的方法
2016/12/30 PHP
PHP实现基于PDO扩展连接PostgreSQL对象关系数据库示例
2018/03/31 PHP
TP3.2.3框架文件上传操作实例详解
2020/01/23 PHP
js indexOf()定义和用法
2012/10/21 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
2013/06/04 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
微信js-sdk界面操作接口用法示例
2016/10/12 Javascript
微信小程序 教程之列表渲染
2016/10/18 Javascript
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
前端Vue项目详解--初始化及导航栏
2019/06/24 Javascript
js 实现watch监听数据变化的代码
2019/10/13 Javascript
深入webpack打包原理及loader和plugin的实现
2020/05/06 Javascript
vue-router 按需加载 component: () => import() 报错的解决
2020/09/22 Javascript
python类继承与子类实例初始化用法分析
2015/04/17 Python
python中__call__内置函数用法实例
2015/06/04 Python
Python中几种属性访问的区别与用法详解
2018/10/10 Python
Python如何基于rsa模块实现非对称加密与解密
2020/01/03 Python
django模型类中,null=True,blank=True用法说明
2020/07/09 Python
Python 绘制可视化折线图
2020/07/22 Python
.net笔试题
2014/03/03 面试题
总经理助理的八要求
2013/11/12 职场文书
客服专员岗位职责范本
2013/11/29 职场文书
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
竞聘上岗演讲稿范文
2014/01/10 职场文书
小学新学期教师寄语
2014/01/18 职场文书
工程安全员岗位职责
2014/03/09 职场文书
应届生求职信
2014/05/31 职场文书
音乐之声音乐广播稿
2014/09/10 职场文书
2014年管理人员工作总结
2014/12/01 职场文书
初中作文评语集锦
2014/12/25 职场文书
环卫工人慰问信
2015/02/15 职场文书
2015年教师业务工作总结
2015/05/26 职场文书
MySQL数据库Innodb 引擎实现mvcc锁
2022/05/06 MySQL
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers
python缺失值填充方法示例代码
2022/12/24 Python