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 相关文章推荐
js滚动条多种样式,推荐
Feb 05 Javascript
js相册效果代码(点击创建即可)
Apr 16 Javascript
JavaScript中的逻辑判断符&&、||与!介绍
Dec 31 Javascript
DOM节点深度克隆函数cloneNode()用法实例
Jan 12 Javascript
很棒的Bootstrap选项卡切换效果
Jul 01 Javascript
ES6概念 Symbol toString()方法
Dec 25 Javascript
在一个页面实现两个zTree联动的方法
Dec 20 Javascript
Vue进度条progressbar组件功能
Apr 17 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
Jul 06 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
Sep 18 Javascript
JS通用方法触发点击事件代码实例
Feb 17 Javascript
js正则匹配markdown里的图片标签的实现
Mar 24 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图像处理类库MagickWand用法实例分析
2015/05/21 PHP
php实现搜索类封装示例
2016/03/31 PHP
详解PHP素材图片上传、下载功能
2019/04/12 PHP
php日志函数error_log用法实例分析
2019/09/23 PHP
Javascript表单验证要注意的事项
2014/09/29 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
JavaScript设计模式之抽象工厂模式介绍
2014/12/28 Javascript
扒一扒JavaScript 预解释
2015/01/28 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
2016/02/24 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
2016/06/12 Javascript
xmlplus组件设计系列之列表(4)
2017/04/26 Javascript
js实现拖拽上传图片功能
2017/08/01 Javascript
vue-quill-editor实现图片上传功能
2017/08/08 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
2017/12/18 Javascript
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
Nuxt.js 数据双向绑定的实现
2019/02/17 Javascript
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
Vue项目环境搭建详细总结
2019/09/26 Javascript
详解react组件通讯方式(多种)
2020/05/06 Javascript
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
python使用百度翻译进行中翻英示例
2014/04/14 Python
利用QT写一个极简单的图形化Python闹钟程序
2015/04/07 Python
python关键字and和or用法实例
2015/05/28 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
Python3解释器知识点总结
2019/02/19 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
Django框架基础模板标签与filter使用方法详解
2019/07/23 Python
python3利用Axes3D库画3D模型图
2020/03/25 Python
Python 如何反方向迭代一个序列
2020/07/28 Python
德国大型的家具商店:Pharao24.de
2016/10/02 全球购物
优秀求职信
2014/05/29 职场文书
暑期培训心得体会
2014/09/02 职场文书
党员检讨书
2014/10/13 职场文书
2015年党员发展工作总结
2015/05/13 职场文书
2017寒假社会实践心得体会范文
2016/01/14 职场文书
javascript函数式编程基础
2021/09/15 Javascript