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 相关文章推荐
超强的IE背景图片闪烁(抖动)的解决办法
Sep 09 Javascript
一个简单的javascript类定义例子
Sep 12 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
Sep 15 Javascript
基于Jquery的淡入淡出的特效基础练习
Dec 13 Javascript
Document:getElementsByName()使用方法及示例
Oct 28 Javascript
javascript图片预加载实例分析
Jul 16 Javascript
浅析JS原型继承与类的继承
Apr 07 Javascript
手机软键盘弹出时影响布局的解决方法
Dec 15 Javascript
Bootstrap popover用法详解
Dec 22 Javascript
微信小程序图片横向左右滑动案例
May 19 Javascript
iView框架问题整理小结
Oct 16 Javascript
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
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 中的批处理的实现
2007/06/14 PHP
PHP使用array_merge重新排列数组下标的方法
2015/07/22 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
jquery 事件执行检测代码
2009/12/09 Javascript
jquery $.ajax()取xml数据的小问题解决方法
2010/11/20 Javascript
将查询条件的input、select清空
2014/01/14 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
jQuery ztree实现动态树形多选菜单
2016/08/12 Javascript
AngularJS实现动态编译添加到dom中的方法
2016/11/04 Javascript
微信小程序 form组件详解及简单实例
2017/01/10 Javascript
js实现旋转木马效果
2017/03/17 Javascript
Angular2入门--架构总览
2017/03/29 Javascript
vue页面跳转实现页面缓存操作
2020/07/22 Javascript
js实现微信聊天效果
2020/08/09 Javascript
Vuejs通过拖动改变元素宽度实现自适应
2020/09/02 Javascript
解决vue项目 build之后资源文件找不到的问题
2020/09/12 Javascript
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
举例讲解Python中字典的合并值相加与异或对比
2016/06/04 Python
python中import学习备忘笔记
2017/01/24 Python
Python中列表list以及list与数组array的相互转换实现方法
2017/09/22 Python
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
对Python _取log的几种方式小结
2019/07/25 Python
Django框架HttpRequest对象用法实例分析
2019/11/01 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
Python常用base64 md5 aes des crc32加密解密方法汇总
2020/11/06 Python
IE支持HTML5的解决方法
2009/10/20 HTML / CSS
Unix里面如何在后台运行程序
2016/10/14 面试题
暑期实习鉴定
2013/12/16 职场文书
优秀管理者获奖感言
2014/02/17 职场文书
大课间体育活动方案
2014/03/12 职场文书
学校爱心捐款倡议书
2014/05/13 职场文书
大学新闻系求职信
2014/06/03 职场文书
护士节活动总结
2014/08/29 职场文书
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书