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 相关文章推荐
Javascript结合css实现网页换肤功能
Nov 02 Javascript
jQuery实现公告文字左右滚动的实例代码
Oct 29 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
Mar 10 Javascript
js实现带有介绍的Select列表菜单实例
Aug 18 Javascript
分享javascript实现的冒泡排序代码并优化
Jun 05 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 Javascript
js判断手机系统是android还是ios
Mar 07 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
Jan 28 Javascript
基于Vue CSR的微前端实现方案实践
May 27 Javascript
微信小程序实现电子签名并导出图片
May 27 Javascript
vue中watch和computed的区别与使用方法
Aug 23 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数组去除空值函数分享
2015/02/02 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
2012/05/03 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
JavaScript中的splice方法用法详解
2016/07/20 Javascript
Bootstrap栅格系统的使用和理解2
2016/12/14 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
2017/03/13 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
详解vue组件化开发-vuex状态管理库
2017/04/10 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
vue项目中v-model父子组件通信的实现详解
2017/12/10 Javascript
Vue实现页面添加水印功能
2019/11/09 Javascript
微信小程序实现抖音播放效果的实例代码
2020/04/11 Javascript
关于vue 项目中浏览器跨域的配置问题
2020/11/10 Javascript
Python使用MONGODB入门实例
2015/05/11 Python
Python实现网络端口转发和重定向的方法
2016/09/19 Python
如何在Python中实现goto语句的方法
2019/05/18 Python
利用python计算windows全盘文件md5值的脚本
2019/07/27 Python
python接口调用已训练好的caffe模型测试分类方法
2019/08/26 Python
使用pygame写一个古诗词填空通关游戏
2019/12/03 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
舒适的豪华鞋:Taryn Rose
2018/05/03 全球购物
几个常见的消息中间件(MOM)
2014/01/08 面试题
《小动物过冬》教学反思
2014/04/17 职场文书
企业家王石演讲稿:坚持与放下
2014/04/27 职场文书
祖国在我心中演讲稿300字
2014/05/04 职场文书
学位证书委托书
2014/09/30 职场文书
校园学雷锋广播稿
2014/10/08 职场文书
2016年大学光棍节活动总结
2016/04/05 职场文书
mysql查询的控制语句图文详解
2021/04/11 MySQL
为什么在foreach循环中JAVA集合不能添加或删除元素
2021/06/11 Java/Android
Javascript中async与await的捕捉错误详解
2022/03/03 Javascript