<!-- 先加載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>