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 页面输出值
Nov 30 Javascript
非主流的textarea自增长实现js代码
Dec 20 Javascript
window.location.href中url中数据量太大时的解决方法
Dec 23 Javascript
JavaScript将数字转换成大写中文的方法
Mar 23 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
May 25 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
Jul 11 Javascript
JAVA中截取字符串substring用法详解
Apr 14 Javascript
Vue.js学习教程之列表渲染详解
May 17 Javascript
vue改变对象或数组时的刷新机制的方法总结
Apr 24 Javascript
微信小程序实现渐入渐出动画效果
Jun 13 Javascript
JavaScript代理模式原理与用法实例详解
Mar 10 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
Nov 16 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抓取、分析国内视频网站的视频信息工具类
2014/04/02 PHP
PHP exif扩展方法开启详解
2014/07/28 PHP
symfony表单与页面实现技巧
2015/01/26 PHP
php代码检查代理ip的有效性
2016/08/19 PHP
php使用Jpgraph创建3D饼形图效果示例
2017/02/15 PHP
PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
2017/06/16 PHP
PHP常见字符串操作函数与用法总结
2019/03/04 PHP
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
2008/12/02 Javascript
jquery multiSelect 多选下拉框
2010/07/09 Javascript
js 弹出菜单/窗口效果
2011/10/30 Javascript
浅谈JavaScript事件的属性列表
2015/03/01 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
jQuery EasyUI中DataGird动态生成列的方法
2016/04/05 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
2017/03/06 Javascript
javascript 玩转Date对象(实例讲解)
2017/07/11 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
2017/10/24 Javascript
Vue隐藏显示、只读实例代码
2018/07/18 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
2019/04/11 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
原生js代码能实现call和bind吗
2019/07/31 Javascript
python将多个文本文件合并为一个文本的代码(便于搜索)
2011/03/13 Python
python实现机器学习之元线性回归
2018/09/06 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
对python:threading.Thread类的使用方法详解
2019/01/31 Python
浅析python函数式编程
2020/09/26 Python
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
PHP如何去执行一个SQL语句
2016/03/05 面试题
中层干部竞争上岗演讲稿
2014/01/13 职场文书
国旗下的讲话演讲稿
2014/05/08 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
升学宴学生答谢词
2015/01/05 职场文书
北京英语导游词
2015/02/12 职场文书
2015年暑假生活总结
2015/07/13 职场文书
微软Win11什么功能最惊艳? Windows11新功能特性汇总
2021/11/21 数码科技
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫