html5 錄制mp3音頻支持采樣率和比特率設(shè)置

發(fā)布時(shí)間：2021-07-12 14:59:34 作者： Devin Liu

最初有個(gè)開源項(xiàng)目libmp3lame-js，直接將 lame 源碼編譯為 js版本，后來有人基于libmp3lame使用 js 進(jìn)行了重寫，就是如今的lamejs 項(xiàng)目。相比libmp3lame ，自身體積更小，而且能實(shí)現(xiàn)更快的編碼速度。據(jù)介紹說，編碼一個(gè)132秒長(zhǎng)度的音頻僅需6.5秒

13年的時(shí)候做過html5錄音，一個(gè)問題是保存的wav格式文件很大，當(dāng)初用了一個(gè)迂回的方式，上傳到服務(wù)器后調(diào)用 lame 編碼器轉(zhuǎn)換，但由于文件大，上傳較慢。不得不說，前端技術(shù)發(fā)展真是日新月異，有人實(shí)現(xiàn)了js版本的lame編碼器，可以直接在瀏覽器端錄制MP3音頻。

lamejs介紹

最初有個(gè)開源項(xiàng)目libmp3lame-js，直接將 lame 源碼編譯為 js版本，后來有人基于libmp3lame使用 js 進(jìn)行了重寫，就是如今的lamejs 項(xiàng)目。相比libmp3lame ，自身體積更小，而且能實(shí)現(xiàn)更快的編碼速度。據(jù)介紹說，編碼一個(gè)132秒長(zhǎng)度的音頻僅需6.5秒。

錄制mp3音頻

我對(duì)代碼進(jìn)行了梳理和封裝，已發(fā)布到Github，參見 mp3-recorder。對(duì)實(shí)現(xiàn)過程有興趣或?qū)κ褂胠amejs有興趣的，可以參考我的源碼。支持Firefox 及 Webkit瀏覽器。

采用64kbps比特率，錄制一分鐘音頻長(zhǎng)度約為480KB。

調(diào)用示例

/*
    MP3的采樣頻率分為 48000 44100 32000 24000 22050 16000 12050 8000

    比特率值與現(xiàn)實(shí)音頻對(duì)照（僅供參考）
　　16Kbps=電話音質(zhì)
　　24Kbps=增加電話音質(zhì)、短波廣播、長(zhǎng)波廣播、歐洲制式中波廣播
　　40Kbps=美國(guó)制式中波廣播
　　56Kbps=話音
　　64Kbps=增加話音（手機(jī)鈴聲最佳比特率設(shè)定值、手機(jī)單聲道MP3播放器最佳設(shè)定值）
　　112Kbps=FM調(diào)頻立體聲廣播
　　128Kbps=磁帶（手機(jī)立體聲MP3播放器最佳設(shè)定值、低檔MP3播放器最佳設(shè)定值）
　　160Kbps=HIFI高保真（中高檔MP3播放器最佳設(shè)定值） 　
  　192Kbps=CD（高檔MP3播放器最佳設(shè)定值）
　　256Kbps=Studio音樂工作室（音樂發(fā)燒友適用）
*/

//唯一影響mp3文件大小的參數(shù)為 bitRate
//sampleRate 僅供特殊需求的人使用
var recorder = new MP3Recorder({
    //numChannels: 1,     //聲道數(shù),默認(rèn)為1
    //sampleRate: 8000,   //采樣率,一般由設(shè)備提供,比如 48000
    bitRate: 64,        //比特率,不要低于64,否則可能錄制無聲音（人聲）

    //錄音結(jié)束事件
    complete: function (data, type) {
        //blob為mp3音頻數(shù)據(jù)
        var blob = new Blob(data, { type: type });
    }
});

//開始錄音
recorder.start(onSuccess, onError);

//停止錄音
recorder.stop();

//暫停錄音
recorder.pause();

//恢復(fù)錄音
recorder.resume();

使用很簡(jiǎn)單，demo有詳細(xì)代碼，在此就不多說了。

代碼下載

源碼及示例代碼

源碼更新請(qǐng)關(guān)注Github

到此這篇關(guān)于html5 錄制mp3音頻支持采樣率和比特率設(shè)置的文章就介紹到這了,更多相關(guān)html5 錄制mp3音頻內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！