HTML5網頁錄音和上傳到服務器，支持PC、Android，支持IOS微信

準備作一個網頁版聊天界面，表情啊、圖片啊、上傳文件啊都應該要有，視頻就算了，語音仍是要的。

本文記錄的是在網頁上用GitHub上的Recorder進行在線錄音和上傳到服務器，前幾天升了一下級，之後有時間再專門寫一篇記錄。

錄音代碼

本示例代碼支持PC、Android、IOS(僅Safari)中使用，若是用RecordApp可增長對IOS(微信瀏覽器、小程序)的支持。

看萬遍代碼不如行動一遍，新建一個html文件，把下面三段代碼複製到文件內，雙擊瀏覽器打開就能進行測試。

<!-- 先加載js錄音庫，注意：你應該把js clone到本地使用 --><meta charset="utf-8" />
<script src="https://xiangyuecn.github.io/Recorder/recorder.mp3.min.js"></script>

<input type="button" onclick="startRec()" value="開始錄音">
<hr>
<input type="button" onclick="playRec()" value="結束並播放">
<input type="button" onclick="uploadRec()" value="結束並上傳">

<script>
var rec;
function startRec(){
    rec=Recorder();//使用默認配置，mp3格式
    
    //打開麥克風受權得到相關資源
    rec.open(function(){
        //開始錄音
        rec.start();
    },function(msg,isUserNotAllow){
        //用戶拒絕了權限或瀏覽器不支持
        alert((isUserNotAllow?"用戶拒絕了權限，":"")+"沒法錄音:"+msg);
    });
};
</script>

上傳服務器代碼

<script>
function uploadRec(){
    //中止錄音，獲得了錄音文件blob二進制對象，想幹嗎就幹嗎
    rec.stop(function(blob,duration){
        /*
        blob文件對象，能夠用FileReader讀取出內容
        ，或者用FormData上傳，本例直接上傳二進制文件
        ，對於普通application/x-www-form-urlencoded表單上傳
        ，請參考github裏面的例子
        */
        var form=new FormData();
        form.append("upfile",blob,"recorder.mp3"); //和普通form表單並沒有二致，後端接收到upfile參數的文件，文件名爲recorder.mp3
        
        //直接用ajax上傳
        var xhr=new XMLHttpRequest();
        xhr.open("POST","http://baidu.com/修改爲你的上傳地址");//這個假地址在控制檯network中能看到請求數據和格式，請求結果可有可無
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                alert(xhr.status==200?"上傳成功":"測試請先打開瀏覽器控制檯，而後從新錄音，在network選項卡里面就能看到上傳請求數據和格式了");
            }
        }
        xhr.send(form);
    },function(msg){
        alert("錄音失敗:"+msg);
    });
};</script>

當即播放代碼

<script>
function playRec(){
    //中止錄音，獲得了錄音文件blob二進制對象，想幹嗎就幹嗎
    rec.stop(function(blob,duration){
        var audio=document.createElement("audio");
        audio.controls=true;
        document.body.appendChild(audio);
        
        //很是簡單的就能拿到blob音頻url
        audio.src=URL.createObjectURL(blob);
        audio.play();
    },function(msg){
        alert("錄音失敗:"+msg);
    });
};</script>

---

Recorder

GitHub地址：https://github.com/xiangyuecn/Recorder

在線測試: 點此測試

Recorder用於html5錄音，爲一個純粹的js庫，支持大部分已實現getUserMedia的移動端、PC端瀏覽器，包括騰訊Android X5內核(QQ、微信)。

錄音默認輸出mp3格式，另外可選wav格式（此格式錄音文件超大）；有限支持ogg、webm、amr格式；支持任意格式擴展（前提有相應編碼器）。

小巧：若是對錄音文件大小沒有特別要求，能夠僅僅使用錄音核心+wav編碼器，源碼不足300行，壓縮後的recorder.wav.min.js不足4kb。mp3使用lamejs編碼，壓縮後的recorder.mp3.min.js開啓gzip後54kb。

因爲IOS(11.X、12.X)上只有Safari支持getUserMedia，其餘瀏覽器均不支持H5錄音，所以額外針對IOS對Recorder進行了進一步的兼容封裝，升級成了RecordApp，用於支持微信（含瀏覽器、小程序web-view），另外RecordApp對Hybrid App也提供了更加優秀的支持。

因爲RecordApp須要微信公衆(訂閱)號提供JsSDK錄音支持，因此開發難度會大些，但支持的環境更多。Recorder拿來就能用，具體使用哪一個請參考下表：

支持	Recorder	RecordApp
PC瀏覽器	√	√
Android瀏覽器	√	√
Android微信(含小程序)	√	√
Android Hybrid App	√	√
IOS Safari	√	√
IOS微信(含小程序)		√
IOS Hybrid App		√
IOS其餘瀏覽器
開發難度	簡單	複雜
第三方依賴	無	依賴微信公衆號

* 可到github中查閱RecordApp源碼，在目錄xiangyuecn/Recorder/app-support-sample中。

最後

若是這個庫有幫助到您，請 Star 一下。