花了兩天時間在前人基礎上重複造了一個網頁錄音的輪子，順帶把github倉庫使用研究了一下，扔到了github上，地址：https://github.com/xiangyuecn/Recorder

copy之前說點什麼

準備做一個網頁版聊天介面，表情啊、圖片啊、上傳檔案啊都應該要有，視訊就算了，語音還是要的。

當下環境html5的錄音功能支援情況大為良好，微信完美支援（請忽略他家的jssdk）

如是，就造起了輪子。

以下內容copy自README

Recorder用於html5錄音

錄音預設輸出mp3格式，另外可選wav格式（此格式錄音檔案超大）

mp3預設16kbps的位元率，大概2kb每秒，如果使用8kbps可達到1kb每秒，不過音質很渣，沒有amr格式的可比性。

已內建lamejs依賴用於mp3編碼，剝離後核心程式碼不足300行

快速使用

在需要錄音功能的頁面引入js檔案程式碼即可，對於https的要求不做解釋

<script src="recorder.js"></script>

然後使用，假設立即執行，只錄3秒

var rec=Recorder();
rec.open(function(){//開啟麥克風授權獲得相關資源
    rec.start();//開始錄音
},function(msg){
    console.log("無法錄音:"+msg);
});
setTimeout(function(){
    rec.stop(function
 
(blob){//到達指定條件停止錄音，拿到blob物件想幹嘛就幹嘛：立即播放、上傳
        console.log(URL.createObjectURL(blob));
        rec.close();//釋放錄音資源
    },function(msg){
        console.log("錄音失敗:"+msg);
    });
},3000);

方法文件

rec=Recorder(set)

拿到Recorder的例項，然後可以進行請求獲取麥克風許可權和錄音。
set引數為配置物件，預設配置值如下：

set={
    type:"mp3" //輸出型別：mp3,wav
    ,bitRate:16
 
 //位元率 wav:16或8位，MP3：8位元1k/s，16位元2k/s 比較划得來

    ,sampleRate:16000 //取樣率，wav專用

    ,bufferSize:8192 //AudioContext緩衝大小
                    //取值256, 512, 1024, 2048, 4096, 8192, or 16384，會影響onProcess呼叫速度

    ,onProcess:NOOP //接收到錄音資料時的回撥函式：fn(buffer,powerLevel,bufferDuration) 
                //buffer=[緩衝資料,...]，powerLevel：當前緩衝的音量級別0-100，bufferDuration：已緩衝時長
                //如果需要繪製波形之類功能，需要實現此方法即可，使用以計算好的powerLevel可以實現音量大小的直觀展示，使用buffer可以達到更高階效果
}

rec.open(success,fail)

請求開啟錄音資源，如果使用者拒絕麥克風許可權將會呼叫fail，開啟後需要呼叫close。
注意：此方法是非同步的；一般使用時開啟，用完立即關閉；可重複呼叫，可用來測試是否能錄音。
success=fn();
fail=fn(errMsg);

rec.close(success)

關閉釋放錄音資源，釋放完成後會呼叫success()回撥

rec.start()

開始錄音，需先呼叫open；如果不支援、錯誤，不會有任何提示，因為stop時自然能得到錯誤。

rec.stop(success,fail)

結束錄音並返回錄音資料blob物件，拿到blob物件就可以為所欲為了，不限於立即播放、上傳
success(blob,duration)：blob：錄音資料audio/mp3|wav格式，duration：錄音時長，單位毫秒
fail(errMsg)：錄音出錯回撥

提示：stop時會進行音訊編碼，音訊編碼可能會很慢，10幾秒錄音花費2秒左右算是正常，編碼並未使用Worker方案(檔案多)，內部採取的是分段編碼+setTimeout來處理，介面卡頓不明顯。

Recorder.IsOpen()

由於Recorder持有的錄音資源是全域性唯一的，可通過此方法檢測是否有Recorder已呼叫過open打開了錄音功能。

Recorder.lamejs

lamejs的引用

縮小js檔案

recorder.js用Uglify壓縮一下剩餘156kb，不算大

如果不需要mp3格式，可以把lamejs程式碼全部移除，recorder.js精簡到300來行程式碼，僅僅支援wav格式；mp3編碼採用的是https://github.com/zhuker/lamejs/blob/bfb7f6c6d7877e0fe1ad9e72697a871676119a0e/lame.all.js這個版本的程式碼。

相容性

對於支援錄音的瀏覽器能夠正常錄音並返回錄音資料；對於不支援的瀏覽器，引入此js和執行相關方法都不會產生異常，並且進入相關的fail回撥。一般在open的時候就能檢測到是否支援或者被使用者拒絕，可在使用者開始錄音之前提示瀏覽器不支援錄音或授權。