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 相关文章推荐
动态刷新 dorado树的js代码
Jun 12 Javascript
js实现发送验证码后的倒计时功能
May 28 Javascript
Ext JS动态加载JavaScript创建窗体的方法
Jun 23 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
Sep 19 Javascript
微信小程序 rpx 尺寸单位详细介绍
Oct 13 Javascript
Angular中$broadcast和$emit的使用方法详解
May 22 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
Dec 21 Javascript
原生JS实现的跳一跳小游戏完整实例
Jan 27 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
Sep 23 Javascript
JavaScript生成随机验证码代码实例
Sep 28 Javascript
vue设置一开始进入的页面教程
Oct 28 Javascript
JS实现简易留言板特效
Dec 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
不用数据库的多用户文件自由上传投票系统(1)
2006/10/09 PHP
在smarty模板中使用PHP函数的方法
2011/04/23 PHP
PHP 如何利用phpexcel导入数据库
2013/08/24 PHP
php 生成短网址原理及代码
2014/01/23 PHP
phpMyAdmin自动登录和取消自动登录的配置方法
2014/05/12 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
jQuery 连续列表实现代码
2009/12/21 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
2013/02/06 Javascript
table insertRow、deleteRow定义和用法总结
2014/05/14 Javascript
javascript 中that的含义示例介绍
2014/05/14 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
2016/05/10 Javascript
javascript三种代码注释方法
2016/06/02 Javascript
jQuery如何封装输入框插件
2016/08/19 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
2019/04/25 Javascript
ES6中Symbol、Set和Map用法详解
2019/08/20 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
Vue 监听元素前后变化值实例
2020/07/29 Javascript
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
python 异常处理总结
2016/10/18 Python
python中执行shell的两种方法总结
2017/01/10 Python
Python实现的朴素贝叶斯分类器示例
2018/01/06 Python
python 拷贝特定后缀名文件,并保留原始目录结构的实例
2018/04/27 Python
django之自定义软删除Model的方法
2019/08/14 Python
python实现多线程端口扫描
2019/08/31 Python
解决Python命令行下退格,删除,方向键乱码(亲测有效)
2020/01/16 Python
Keras:Unet网络实现多类语义分割方式
2020/06/11 Python
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
《白鹅》教学反思
2014/04/13 职场文书
十佳家长事迹材料
2014/08/26 职场文书
投标承诺函范文
2015/01/21 职场文书
工程部岗位职责
2015/02/10 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书
大学生实习证明
2015/06/16 职场文书
php去除数组中为0的元素的实例分析
2021/11/17 PHP