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 变量命名规则
Sep 23 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
Aug 27 Javascript
JSON无限折叠菜单编写实例
Dec 16 Javascript
纯javascript制作日历控件
Jul 17 Javascript
jQuery添加和删除指定标签的方法
Dec 16 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
Mar 09 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
Aug 31 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 Javascript
Vue实现数据表格合并列rowspan效果
Nov 30 Javascript
Vue 中使用 typescript的方法详解
Feb 17 Javascript
学前端,css与javascript重难点浅析
Jun 11 Javascript
vantUI 获得piker选中值的自定义ID操作
Nov 04 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
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
Jquery getJSON方法详细分析
2013/12/26 Javascript
javascript实现仿腾讯游戏选择
2015/05/14 Javascript
jquery制做精致的倒计时特效
2016/06/13 Javascript
JavaScript中点击事件的写法
2016/06/28 Javascript
AngularJS基础 ng-repeat 指令简单示例
2016/08/03 Javascript
详解Javascript中prototype属性(推荐)
2016/09/03 Javascript
基于JS实现的随机数字抽签实例
2016/12/08 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
2017/01/08 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
Java与JavaScript中判断两字符串是否相等的区别
2017/03/13 Javascript
bootstrap daterangepicker汉化以及扩展功能
2017/06/15 Javascript
jquery实现一个全局计时器(商城可用)
2017/06/30 jQuery
vue中appear的用法
2017/08/17 Javascript
React styled-components设置组件属性的方法
2018/08/07 Javascript
JavaScript常见事件对象与操作实例总结
2019/01/05 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
微信小程序组件生命周期的踩坑记录
2021/03/03 Javascript
python利用hook技术破解https的实例代码
2013/03/25 Python
对python中的pop函数和append函数详解
2018/05/04 Python
pycharm中成功运行图片的配置教程
2018/10/28 Python
python 读取dicom文件,生成info.txt和raw文件的方法
2019/01/24 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
Python使用Paramiko控制liunx第三方库
2020/05/20 Python
Python测试框架:pytest学习笔记
2020/10/20 Python
Staples美国官方网站:办公用品一站式采购
2016/07/28 全球购物
理肤泉加拿大官网:La Roche-Posay加拿大
2018/07/06 全球购物
美丽的现代设计家具:2Modern
2018/07/26 全球购物
资产评估专业大学生求职信
2013/09/29 职场文书
《最可爱的人》教学反思
2014/02/14 职场文书
标准演讲稿格式结尾应该怎么书写?
2019/07/17 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书