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。

调用示例

/*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,   //采样率,一般由设备提供,比如 48000bitRate: 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

写在最后

如果本文或本项目对您有帮助的话,请不吝点个赞。欢迎交流!

转载于:https://www.cnblogs.com/devin87/p/mp3-recorder.html

html5 录制mp3音频,支持采样率和比特率设置相关推荐

  1. html5录制mp3,html5 录制mp3音频,支持采样率和比特率设置

    13年的时候做过html5录音,一个问题是保存的wav格式文件很大,当初用了一个迂回的方式,上传到服务器后调用 lame 编码器转换,但由于文件大,上传较慢.不得不说,前端技术发展真是日新月异,有人实 ...

  2. Android开发音效中录制WAV音频和录制MP3音频的讲解及实战(超详细 附源码)

    需要源码请点赞关注收藏后评论区留下QQ~~~ 一.录制WAV音频 无论是MediaRecoredr录制的AMR和AAC音频,还是AudioRecord录制的PCM音频,都不能在计算机上直接播放,因为它 ...

  3. android录制mp3音频,Android MP3录制,波形显示,音频权限兼容与播放

    我又来掀桌子了(ノಠ益ಠ)ノ彡┻━┻,这次是MP3录制和显示声音波形的一个故事. 先看看效果┑( ̄Д  ̄)┍ 2 1 MP3录制的逻辑过程就忽略了(真的不是因为懒(.・・)ノ),这里用的是开源的And ...

  4. html5 手机录音上传 源码,Html5网页JavaScript录制MP3并上传

    [实例简介]后端为 asp.net [实例截图] [核心代码] Html5网页JavaScript录制MP3音频 Html5网页JavaScript录制MP3音频 录制 停止 上传 调试信息: var ...

  5. 音频参数获取:采样率、比特率,通道数

    获取音频文件采样率.比特率,通道数的一种方法: MediaExtractor mex = new MediaExtractor();try {mex.setDataSource(mp3Path);} ...

  6. java h5在线音频_html5 mp3音频播放代码网页在线录音

    特效描述:html5 mp3音频播放 网页在线录音.本地设置麦克风权限,才能正常预览 代码结构 1. 引入JS 2. HTML代码 Html5网页JavaScript录制MP3音频 录制 停止 上传 ...

  7. vlc录制网络流_基于PortAudio+LAME3实现的ASIO多通道音频录制mp3

    今天给大家分享一个之前做的ASIO多通道音频录音机程序,可以实时对多达64通道的ASIO音频进行录制MP3或WAV. 好了,话不多说,先给大家看东西. 整个录音软件采用Qt编写,使用了开源库PortA ...

  8. HTML5 audio 如何实现播放多个MP3音频

    <audio>标签是HTML5中的新标签,定义声音用于嵌入音频内容,比如音乐或其他音频流.用的比较多音频格式是.mp3. <audio>标签常用属性如下表 属性 值 描述 au ...

  9. html 多个mp3,HTML5 audio 如何实现播放多个MP3音频

    标签是HTML5中的新标签,定义声音用于嵌入音频内容,比如音乐或其他音频流.用的比较多音频格式是.mp3. 标签常用属性如下表 属性 值 描述 autoplay autoplay 添加该属性后,音频会 ...

最新文章

  1. python广告刷量_Python一日一练05----怒刷点击量
  2. android_通过高级应用程序开发策略在Android中进行用户参与
  3. FlexViewer入门资料
  4. 【转载】从Docker容器漏洞谈Docker安全
  5. 最小生成树 洛谷P3366【模板】最小生成树 洛谷P2820 局域网
  6. 数据表字段不存在 php,laravel 使用原生表达式增加原数据表不存在的字段
  7. 2.Jenkins 2 权威指南 --- 基础知识
  8. Fizz Buzz @leetcode Math
  9. 国内主流短信验证码平台收费价格对比「一」:阿里云、梦网云通讯、容联云通讯、互亿无线
  10. 星空下的新赛点,民营航空迎来新机会
  11. 福禄克OTDR系列OFP-100-Q光纤测试仪
  12. Python实现视频下载
  13. 湖北民院OJ 计算球体体积
  14. 联想笔记本修复计算机还原系统失败,联想电脑重置电脑失败怎么办
  15. 关于VBS调用MSWinsock控件
  16. Beyond Compare 相同文件对比结果仍显示红色 解决方案【转存】
  17. 关于JAVA字符编码:Unicode,ISO-8859-1,GBK,UTF-8编码及相互转换
  18. Codeforces Round #495 (Div. 2) D. Sonya and Matrix[思维构造]
  19. C#获取字符串的长度
  20. Python四行代码实现的猜数字小游戏,基于thinker,带GUI界面

热门文章

  1. java闯关小游戏+详解+完整源代码+测试结果
  2. 实现Android拖拽按钮接听电话效果
  3. ChatGPT可以帮助学生和工作专业人员的4种方法
  4. 【ESP32学习记录】ESP-IDF安装(Espressif-IDE)
  5. 中国智能家居设备行业竞争策略展望分析及投资战略规划研究报告2022-2028年
  6. RationalDMIS 2020 AeroTech转盘使用说明
  7. 解构云原生,从概念到落地:阿里云、声网、微博、好未来、CNCF的专家们怎么看?
  8. 电影媒体行业内容存储库制作渲染文件存储设备解决方案
  9. GIS地理信息系统的升维降维创新理念研究
  10. python生成图像公章_python库pillow:实现生成图片并加水印