html5 录制mp3音频,支持采样率和比特率设置
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音频,支持采样率和比特率设置相关推荐
- html5录制mp3,html5 录制mp3音频,支持采样率和比特率设置
13年的时候做过html5录音,一个问题是保存的wav格式文件很大,当初用了一个迂回的方式,上传到服务器后调用 lame 编码器转换,但由于文件大,上传较慢.不得不说,前端技术发展真是日新月异,有人实 ...
- Android开发音效中录制WAV音频和录制MP3音频的讲解及实战(超详细 附源码)
需要源码请点赞关注收藏后评论区留下QQ~~~ 一.录制WAV音频 无论是MediaRecoredr录制的AMR和AAC音频,还是AudioRecord录制的PCM音频,都不能在计算机上直接播放,因为它 ...
- android录制mp3音频,Android MP3录制,波形显示,音频权限兼容与播放
我又来掀桌子了(ノಠ益ಠ)ノ彡┻━┻,这次是MP3录制和显示声音波形的一个故事. 先看看效果┑( ̄Д  ̄)┍ 2 1 MP3录制的逻辑过程就忽略了(真的不是因为懒(.・・)ノ),这里用的是开源的And ...
- html5 手机录音上传 源码,Html5网页JavaScript录制MP3并上传
[实例简介]后端为 asp.net [实例截图] [核心代码] Html5网页JavaScript录制MP3音频 Html5网页JavaScript录制MP3音频 录制 停止 上传 调试信息: var ...
- 音频参数获取:采样率、比特率,通道数
获取音频文件采样率.比特率,通道数的一种方法: MediaExtractor mex = new MediaExtractor();try {mex.setDataSource(mp3Path);} ...
- java h5在线音频_html5 mp3音频播放代码网页在线录音
特效描述:html5 mp3音频播放 网页在线录音.本地设置麦克风权限,才能正常预览 代码结构 1. 引入JS 2. HTML代码 Html5网页JavaScript录制MP3音频 录制 停止 上传 ...
- vlc录制网络流_基于PortAudio+LAME3实现的ASIO多通道音频录制mp3
今天给大家分享一个之前做的ASIO多通道音频录音机程序,可以实时对多达64通道的ASIO音频进行录制MP3或WAV. 好了,话不多说,先给大家看东西. 整个录音软件采用Qt编写,使用了开源库PortA ...
- HTML5 audio 如何实现播放多个MP3音频
<audio>标签是HTML5中的新标签,定义声音用于嵌入音频内容,比如音乐或其他音频流.用的比较多音频格式是.mp3. <audio>标签常用属性如下表 属性 值 描述 au ...
- html 多个mp3,HTML5 audio 如何实现播放多个MP3音频
标签是HTML5中的新标签,定义声音用于嵌入音频内容,比如音乐或其他音频流.用的比较多音频格式是.mp3. 标签常用属性如下表 属性 值 描述 autoplay autoplay 添加该属性后,音频会 ...
最新文章
- python广告刷量_Python一日一练05----怒刷点击量
- android_通过高级应用程序开发策略在Android中进行用户参与
- FlexViewer入门资料
- 【转载】从Docker容器漏洞谈Docker安全
- 最小生成树 洛谷P3366【模板】最小生成树 洛谷P2820 局域网
- 数据表字段不存在 php,laravel 使用原生表达式增加原数据表不存在的字段
- 2.Jenkins 2 权威指南 --- 基础知识
- Fizz Buzz @leetcode Math
- 国内主流短信验证码平台收费价格对比「一」:阿里云、梦网云通讯、容联云通讯、互亿无线
- 星空下的新赛点,民营航空迎来新机会
- 福禄克OTDR系列OFP-100-Q光纤测试仪
- Python实现视频下载
- 湖北民院OJ 计算球体体积
- 联想笔记本修复计算机还原系统失败,联想电脑重置电脑失败怎么办
- 关于VBS调用MSWinsock控件
- Beyond Compare 相同文件对比结果仍显示红色 解决方案【转存】
- 关于JAVA字符编码:Unicode,ISO-8859-1,GBK,UTF-8编码及相互转换
- Codeforces Round #495 (Div. 2) D. Sonya and Matrix[思维构造]
- C#获取字符串的长度
- Python四行代码实现的猜数字小游戏,基于thinker,带GUI界面
热门文章
- java闯关小游戏+详解+完整源代码+测试结果
- 实现Android拖拽按钮接听电话效果
- ChatGPT可以帮助学生和工作专业人员的4种方法
- 【ESP32学习记录】ESP-IDF安装(Espressif-IDE)
- 中国智能家居设备行业竞争策略展望分析及投资战略规划研究报告2022-2028年
- RationalDMIS 2020 AeroTech转盘使用说明
- 解构云原生,从概念到落地:阿里云、声网、微博、好未来、CNCF的专家们怎么看?
- 电影媒体行业内容存储库制作渲染文件存储设备解决方案
- GIS地理信息系统的升维降维创新理念研究
- python生成图像公章_python库pillow:实现生成图片并加水印