HTML5網(wǎng)頁錄音和上傳到服務(wù)器支持PC、Android,支持IOS微信功能

準(zhǔn)備做一個網(wǎng)頁版聊天界面,表情啊、圖片啊、上傳文件啊都應(yīng)該要有,視頻就算了,語音還是要的。
本文記錄的是在網(wǎng)頁上用GitHub上的Recorder進(jìn)行在線錄音和上傳到服務(wù)器。
錄音代碼
本示例代碼支持PC、Android、IOS(僅Safari)中使用,如果用RecordApp可增加對IOS(微信瀏覽器、小程序)的支持。
看萬遍代碼不如行動一遍,新建一個html文件,把下面三段代碼復(fù)制到文件內(nèi),雙擊瀏覽器打開就能進(jìn)行測試。
<!-- 先加載js錄音庫,注意:你應(yīng)該把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="結(jié)束并播放"> <input type="button" onclick="uploadRec()" value="結(jié)束并上傳"> <script> var rec; function startRec(){ rec=Recorder();//使用默認(rèn)配置,mp3格式 //打開麥克風(fēng)授權(quán)獲得相關(guān)資源 rec.open(function(){ //開始錄音 rec.start(); },function(msg,isUserNotAllow){ //用戶拒絕了權(quán)限或瀏覽器不支持 alert((isUserNotAllow?"用戶拒絕了權(quán)限,":"")+"無法錄音:"+msg); }); }; </script>
上傳服務(wù)器代碼
<script> function uploadRec(){ //停止錄音,得到了錄音文件blob二進(jìn)制對象,想干嘛就干嘛 rec.stop(function(blob,duration){ /* blob文件對象,可以用FileReader讀取出內(nèi)容 ,或者用FormData上傳,本例直接上傳二進(jìn)制文件 ,對于普通application/x-www-form-urlencoded表單上傳 ,請參考github里面的例子 */ var form=new FormData(); form.append("upfile",blob,"recorder.mp3"); //和普通form表單并無二致,后端接收到upfile參數(shù)的文件,文件名為recorder.mp3 //直接用ajax上傳 var xhr=new XMLHttpRequest(); xhr.open("POST","http://baidu.com/修改成你的上傳地址");//這個假地址在控制臺network中能看到請求數(shù)據(jù)和格式,請求結(jié)果無關(guān)緊要 xhr.onreadystatechange=function(){ if(xhr.readyState==4){ alert(xhr.status==200?"上傳成功":"測試請先打開瀏覽器控制臺,然后重新錄音,在network選項卡里面就能看到上傳請求數(shù)據(jù)和格式了"); } } xhr.send(form); },function(msg){ alert("錄音失敗:"+msg); }); };</script>
立即播放代碼
<script> function playRec(){ //停止錄音,得到了錄音文件blob二進(jìn)制對象,想干嘛就干嘛 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庫,支持大部分已實現(xiàn)getUserMedia的移動端、PC端瀏覽器,包括騰訊Android X5內(nèi)核(QQ、微信)。
錄音默認(rèn)輸出mp3格式,另外可選wav格式(此格式錄音文件超大);有限支持ogg、webm、amr格式;支持任意格式擴(kuò)展(前提有相應(yīng)編碼器)。
小巧:如果對錄音文件大小沒有特別要求,可以僅僅使用錄音核心+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進(jìn)行了進(jìn)一步的兼容封裝,升級成了RecordApp,用于支持微信(含瀏覽器、小程序web-view),另外RecordApp對Hybrid App也提供了更加優(yōu)秀的支持。
由于RecordApp需要微信公眾(訂閱)號提供JsSDK錄音支持,所以開發(fā)難度會大些,但支持的環(huán)境更多。Recorder拿來就能用,具體使用哪個請參考下表:
支持 | Recorder | RecordApp |
---|---|---|
PC瀏覽器 | √ | √ |
Android瀏覽器 | √ | √ |
Android微信(含小程序) | √ | √ |
Android Hybrid App | √ | √ |
IOS Safari | √ | √ |
IOS微信(含小程序) | √ | |
IOS Hybrid App | √ | |
IOS其他瀏覽器 | ||
開發(fā)難度 | 簡單 | 復(fù)雜 |
第三方依賴 | 無 | 依賴微信公眾號 |
* 可到github中查閱RecordApp
源碼,在目錄xiangyuecn/Recorder/app-support-sample
中。
以上所述是小編給大家介紹的HTML5網(wǎng)頁錄音和上傳到服務(wù)器支持PC、Android,支持IOS微信功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關(guān)文章
- 這篇文章主要介紹了html5錄音功能實戰(zhàn)示例的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)2019-03-25
- 這篇文章主要介紹了詳解HTML5 錄音的踩坑之旅,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-12-26
- 這篇文章主要介紹了HTML5錄音實踐總結(jié),本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-07