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 相关文章推荐
javascript 写类方式之十
Jul 05 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
Dec 28 Javascript
不得不分享的JavaScript常用方法函数集(下)
Dec 25 Javascript
laypage分页控件使用实例详解
May 19 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
Apr 11 Javascript
详解Vue 方法与事件处理器
Jun 20 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
Aug 11 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
vue和小程序项目中使用iconfont的方法
May 19 Javascript
vue - props 声明数组和对象操作
Jul 30 Javascript
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
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 setcookie(name, value, expires, path, domain, secure) 参数详解
2013/06/28 PHP
PHP 5.5 创建和验证哈希最简单的方法详解
2013/11/07 PHP
php生成短网址示例
2014/05/05 PHP
使用URL传输SESSION信息
2015/07/14 PHP
thinkPHP实现MemCache分布式缓存功能
2016/03/23 PHP
定义select的边框颜色
2008/04/28 Javascript
javascript 支持链式调用的异步调用框架Async.Operation
2009/08/04 Javascript
node.js学习总结之调式代码的方法
2014/06/25 Javascript
使用jquery制作弹出框效果
2015/04/03 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
2016/12/12 Javascript
NodeJS实现微信公众号关注后自动回复功能
2017/05/31 NodeJs
详解如何使用webpack打包JS
2018/06/21 Javascript
jQuery实现的淡入淡出图片轮播效果示例
2018/08/29 jQuery
vue实现评论列表功能
2019/10/25 Javascript
Vue实现简单计算器案例
2020/02/25 Javascript
OpenLayers3加载常用控件使用方法详解
2020/09/25 Javascript
js实现抽奖功能
2020/11/24 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
git使用.gitignore设置不生效或不起作用问题的解决方法
2017/06/01 Python
Django实现跨域请求过程详解
2019/07/25 Python
更新pip3与pyttsx3文字语音转换的实现方法
2019/08/08 Python
详解用Python为直方图绘制拟合曲线的两种方法
2019/08/21 Python
python解释器安装教程的方法步骤
2020/07/02 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
使用CSS3在触屏上为按钮实现激活效果
2013/09/27 HTML / CSS
英国著名的茶叶品牌:Whittard of Chelsea
2016/09/22 全球购物
NBA欧洲商店(法国):NBA Europe Store FR
2016/10/19 全球购物
欧洲最大的笔和书写专家:The Pen Shop
2017/03/19 全球购物
skyn ICELAND官网:冰岛成分天然护肤品
2020/08/24 全球购物
葛优非诚勿扰搞笑征婚台词
2014/03/17 职场文书
技校毕业生自荐书
2014/05/23 职场文书
2014年预备党员学习新党章思想汇报
2014/09/15 职场文书
2014年应急管理工作总结
2014/11/26 职场文书
行政经理岗位职责
2015/04/15 职场文书
幼儿园语言教学反思
2016/02/23 职场文书
Golang 编译成DLL文件的操作
2021/05/06 Golang