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 相关文章推荐
写了10年的Javascript也未必全了解的连续赋值运算
Mar 25 Javascript
js禁止小键盘输入数字功能代码
Aug 01 Javascript
js优化针对IE6.0起作用(详细整理)
Dec 25 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
Jan 20 Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 Javascript
浅谈JavaScript中的作用域和闭包问题
Jul 07 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
Oct 08 Javascript
理解JS事件循环
Jan 07 Javascript
移动端 一个简单易懂的弹出框
Jul 06 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
Dec 26 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
Mar 30 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
Dec 27 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通过串口实现发送短信
2015/07/08 PHP
Thinkphp实现站点静态化的方法详解
2017/03/21 PHP
PHP ADODB实现事务处理功能示例
2018/05/25 PHP
ThinkPHP5+Layui实现图片上传加预览功能
2018/08/17 PHP
Swoole实现异步投递task任务案例详解
2019/04/02 PHP
仅IE不支持setTimeout/setInterval函数的第三个以上参数
2011/05/25 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
2012/12/07 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
2014/03/19 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
jQuery on()方法使用技巧详解
2015/04/16 Javascript
jQuery实现图片文字淡入淡出效果
2015/12/21 Javascript
javascript基础语法学习笔记
2016/01/04 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
2016/09/06 Javascript
JavaScript Date 知识浅析
2017/01/29 Javascript
10 种最常见的 Javascript 错误(频率最高)
2018/02/08 Javascript
详解Vue源码学习之callHook钩子函数
2018/07/25 Javascript
vue完成项目后,打包成静态文件的方法
2018/09/03 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
2021/01/27 Javascript
[01:05:30]VP vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
简单文件操作python 修改文件指定行的方法
2013/05/15 Python
python决策树之CART分类回归树详解
2017/12/20 Python
Windows下Anaconda的安装和简单使用方法
2018/01/04 Python
Python爬取豆瓣视频信息代码实例
2019/11/16 Python
Python drop方法删除列之inplace参数实例
2020/06/27 Python
科室工作个人总结的自我评价
2013/10/29 职场文书
工艺工程师工作职责
2013/11/23 职场文书
副科级后备干部考察材料
2014/05/15 职场文书
科长竞聘演讲稿
2014/05/16 职场文书
关于运动会的口号
2014/06/07 职场文书
公司门卫岗位职责范本
2014/07/08 职场文书
项目合作协议书
2014/09/23 职场文书
单位一把手群众路线四风问题整改措施
2014/09/25 职场文书
2014年客服工作总结与计划
2014/12/09 职场文书
挂靠协议书
2015/01/27 职场文书
2015学生会文艺部工作总结
2015/04/03 职场文书