欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-10 11:06:08
html5 录制mp3音频支持采样率和比特率设置最初有个开源项目libmp3lame-js,直接将 lame 源码编译为 js版本,后来有人基于libmp3lame使用 js 进行了重写,就是如今的lamejs 项目。相比libmp3lame ,自身体积更小,而且能实现更... 21-07-12...

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音频内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!

相关标签: HTML5 mp3 音频