準(zhǔn)備做一個(gè)網(wǎng)頁版聊天界面，表情啊、圖片啊、上傳文件啊都應(yīng)該要有，視頻就算了，語音還是要的。
本文記錄的是在網(wǎng)頁上用GitHub上的Recorder進(jìn)行在線錄音和上傳到服務(wù)器，前幾天升了一下級(jí)，以后有時(shí)間再專門寫一篇記錄。
錄音代碼 本示例代碼支持PC、Android、IOS(僅Safari)中使用，如果用RecordApp可增加對(duì)IOS(微信瀏覽器、小程序)的支持。 看萬遍代碼不如行動(dòng)一遍，新建一個(gè)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)限或?yàn)g覽器不支持
alert((isUserNotAllow?"用戶拒絕了權(quán)限，":"")+"無法錄音:"+msg);
});
};
</script> 上傳服務(wù)器代碼 <script>
function uploadRec(){
//停止錄音，得到了錄音文件blob二進(jìn)制對(duì)象，想干嘛就干嘛
rec.stop(function(blob,duration){
/*
blob文件對(duì)象，可以用FileReader讀取出內(nèi)容
，或者用FormData上傳，本例直接上傳二進(jìn)制文件
，對(duì)于普通application/x-www-form-urlencoded表單上傳
，請(qǐng)參考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/修改成你的上傳地址");//這個(gè)假地址在控制臺(tái)network中能看到請(qǐng)求數(shù)據(jù)和格式，請(qǐng)求結(jié)果無關(guān)緊要
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
alert(xhr.status==200?"上傳成功":"測試請(qǐng)先打開瀏覽器控制臺(tái)，然后重新錄音，在network選項(xiàng)卡里面就能看到上傳請(qǐng)求數(shù)據(jù)和格式了");
}
}
xhr.send(form);
},function(msg){
alert("錄音失敗:"+msg);
});
};</script> 立即播放代碼 <script>
function playRec(){
//停止錄音，得到了錄音文件blob二進(jìn)制對(duì)象，想干嘛就干嘛
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
在線測試: https://xiangyuecn.github.io/Recorder/
Recorder用于html5錄音，為一個(gè)純粹的js庫，支持大部分已實(shí)現(xiàn)getUserMedia的移動(dòng)端、PC端瀏覽器，包括騰訊Android X5內(nèi)核(QQ、微信)。
錄音默認(rèn)輸出mp3格式，另外可選wav格式（此格式錄音文件超大）；有限支持ogg、webm、amr格式；支持任意格式擴(kuò)展（前提有相應(yīng)編碼器）。
小巧：如果對(duì)錄音文件大小沒有特別要求，可以僅僅使用錄音核心+wav編碼器，源碼不足300行，壓縮后的recorder.wav.min.js不足4kb。mp3使用lamejs編碼，壓縮后的recorder.mp3.min.js開啟gzip后54kb。
由于IOS(11.X、12.X)上只有Safari支持getUserMedia，其他瀏覽器均不支持H5錄音，因此額外針對(duì)IOS對(duì)Recorder進(jìn)行了進(jìn)一步的兼容封裝，升級(jí)成了RecordApp，用于支持微信（含瀏覽器、小程序web-view），另外RecordApp對(duì)Hybrid App也提供了更加優(yōu)秀的支持。
