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){ v​​ar 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>

-------------------------------------------------- ------------------------------

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

線上測試:點此測試

Recorder用於html5錄音，為一個純粹的js庫，支援大部分已實作getUserMedia的行動端、PC端瀏覽器，包括騰訊An​​droid 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拿來就能用，具體使​​用哪個請參考下表：

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

以上所述是小編給大家介紹的HTML5網頁錄音和上傳到伺服器支援PC、Android，支援IOS微信功能,希望對大家有幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對VeVb武林網站的支持！

如果你覺得本文對你有幫助，歡迎轉載，煩請註明出處，謝謝！