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