欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

  發(fā)布時間:2019-04-26 09:33:29   作者:xiangyuecn   我要評論
這篇文章主要介紹了HTML5網(wǎng)頁錄音和上傳到服務(wù)器支持PC、Android,支持IOS微信功能,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下

準(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)示例

    這篇文章主要介紹了html5錄音功能實戰(zhàn)示例的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)
    2019-03-25
  • 詳解HTML5 錄音的踩坑之旅

    這篇文章主要介紹了詳解HTML5 錄音的踩坑之旅,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-26
  • HTML5錄音實踐總結(jié)(Preact)

    這篇文章主要介紹了HTML5錄音實踐總結(jié),本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-05-07

最新評論