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 相关文章推荐
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
Apr 15 Javascript
javascript ajax 仿百度分页函数
Oct 29 Javascript
setinterval()与clearInterval()JS函数的调用方法
Jan 21 Javascript
javascript创建对象、对象继承的实用方式详解
Mar 08 Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 Javascript
React Native基础入门之调试React Native应用的一小步
Jul 02 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
在vue中读取本地Json文件的方法
Sep 06 Javascript
详解webpack模块加载器兼打包工具
Sep 11 Javascript
Vue路由切换页面不更新问题解决方案
Jul 10 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
Jul 20 Javascript
详解TypeScript的基础类型
Feb 18 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时的知识积累总结
2013/06/07 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
PHP静态方法和静态属性及常量属性的区别与介绍
2019/03/22 PHP
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
jquery实现触发时更新下拉列表内容的方法
2015/12/02 Javascript
微信小程序 Nginx环境配置详细介绍
2017/02/14 Javascript
浅析javaScript中的浅拷贝和深拷贝
2017/02/15 Javascript
webpack学习--webpack经典7分钟入门教程
2017/06/28 Javascript
weui框架实现上传、预览和删除图片功能代码
2017/08/24 Javascript
深入浅析ES6 Class 中的 super 关键字
2017/10/20 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
2018/06/14 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
详解利用nodejs对本地json文件进行增删改查
2019/09/20 NodeJs
微信小程序实现选项卡滑动切换
2020/10/22 Javascript
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
横向对比分析Python解析XML的四种方式
2016/03/30 Python
详解python开发环境搭建
2016/12/16 Python
python用pickle模块实现“增删改查”的简易功能
2017/06/07 Python
python GUI实例学习
2017/11/21 Python
TensorFlow如何实现反向传播
2018/02/06 Python
Python饼状图的绘制实例
2019/01/15 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
pycharm 中mark directory as exclude的用法详解
2020/02/14 Python
Python多线程threading创建及使用方法解析
2020/06/17 Python
通过实例了解python__slots__使用方法
2020/09/14 Python
python中xlrd模块的使用详解
2021/02/01 Python
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
2013/04/24 HTML / CSS
动态密码技术
2012/10/18 面试题
九月份红领巾广播稿
2014/01/22 职场文书
运动会方阵解说词
2014/02/12 职场文书
上课睡觉检讨书300字
2014/11/18 职场文书
2014年残联工作总结
2014/11/21 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
浅谈python中的多态
2021/06/15 Python
Python利用机器学习算法实现垃圾邮件的识别
2021/06/28 Python