所用資源文件來源：https://github.com/xiangyuecn/Recorder
經過閱讀，提煉出簡潔的錄制和結束按鈕，方便使用
首先准備兩個按鈕，開始和結束
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script src="recorder.mp3.min.js"></script> <!--已包含recorder-core和mp3格式支持, CDN: https://cdn.jsdelivr.net/gh/xiangyuecn/Recorder@latest/recorder.mp3.min.js--> <script src="src/recorder-core.js"></script> <!--必須引入的錄音核心，CDN: https://cdn.jsdelivr.net/gh/xiangyuecn/Recorder@latest/dist/recorder-core.js--> <script src="src/engine/mp3.js"></script> <!--相應格式支持文件；如果需要多個格式支持，把這些格式的編碼引擎js文件放到后面統統加載進來即可--> <script src="src/engine/mp3-engine.js"></script> <!--如果此格式有額外的編碼引擎的話，也要加上--> <script src="src/extensions/waveview.js"></script> <!--可選的擴展支持項--> <body> <button onclick="begin()">錄制</button> <button onclick="recStop()" style="margin-right:80px">停止</button> </body> </html>
js代碼：
<script> var rec; /**調用open打開錄音請求好錄音權限**/ var recOpen=function(success){//一般在顯示出錄音按鈕或相關的錄音界面時進行此方法調用，后面用戶點擊開始錄音時就能暢通無阻了 rec=Recorder({ type:"mp3",sampleRate:16000,bitRate:16 //mp3格式，指定采樣率hz、比特率kbps，其他參數使用默認配置；注意：是數字的參數必須提供數字，不要用字符串；需要使用的type類型，需提前把格式支持文件加載進來，比如使用wav格式需要提前加載wav.js編碼引擎 ,onProcess:function(buffers,powerLevel,bufferDuration,bufferSampleRate,newBufferIdx,asyncEnd){ //錄音實時回調，大約1秒調用12次本回調 //可利用extensions/waveview.js擴展實時繪制波形 //可利用extensions/sonic.js擴展實時變速變調，此擴展計算量巨大，onProcess需要返回true開啟異步模式 } }); //var dialog=createDelayDialog(); 我們可以選擇性的彈一個對話框：為了防止移動端瀏覽器存在第三種情況：用戶忽略，並且（或者國產系統UC系）瀏覽器沒有任何回調，此處demo省略了彈窗的代碼 rec.open(function(){//打開麥克風授權獲得相關資源 //dialog&&dialog.Cancel(); 如果開啟了彈框，此處需要取消 //rec.start() 此處可以立即開始錄音，但不建議這樣編寫，因為open是一個延遲漫長的操作，通過兩次用戶操作來分別調用open和start是推薦的最佳流程 success&&success(); },function(msg,isUserNotAllow){//用戶拒絕未授權或不支持 //dialog&&dialog.Cancel(); 如果開啟了彈框，此處需要取消 console.log((isUserNotAllow?"UserNotAllow，":"")+"無法錄音:"+msg); }); }; /**開始錄音**/ function recStart(){//打開了錄音后才能進行start、stop調用 rec.start(); }; /**結束錄音**/ function recStop(){ rec.stop(function(blob,duration){ console.log(blob,(window.URL||webkitURL).createObjectURL(blob),"時長:"+duration+"ms"); rec.close();//釋放錄音資源，當然可以不釋放，后面可以連續調用start；但不釋放時系統或瀏覽器會一直提示在錄音，最佳操作是錄完就close掉 rec=null; //已經拿到blob文件對象想干嘛就干嘛：立即播放、上傳 /*** 【立即播放例子】 ***/ var audio=document.createElement("audio"); audio.controls=true; document.body.appendChild(audio); //簡單利用URL生成播放地址，注意不用了時需要revokeObjectURL，否則霸占內存 audio.src=(window.URL||webkitURL).createObjectURL(blob); audio.play(); },function(msg){ console.log("錄音失敗:"+msg); rec.close();//可以通過stop方法的第3個參數來自動調用close rec=null; }); }; //我們可以選擇性的彈一個對話框：為了防止移動端瀏覽器存在第三種情況：用戶忽略，並且（或者國產系統UC系）瀏覽器沒有任何回調 /*偽代碼： function createDelayDialog(){ if(Is Mobile){//只針對移動端 return new Alert Dialog Component .Message("錄音功能需要麥克風權限，請允許；如果未看到任何請求，請點擊忽略~") .Button("忽略") .OnClick(function(){//明確是用戶點擊的按鈕，此時代表瀏覽器沒有發起任何權限請求 //此處執行fail邏輯 console.log("無法錄音：權限請求被忽略"); }) .OnCancel(NOOP)//自動取消的對話框不需要任何處理 .Delay(8000); //延遲8秒顯示，這么久還沒有操作基本可以判定瀏覽器有毛病 }; }; */ //這里假設立即運行，只錄3秒，錄完后立即播放，本段代碼copy到控制台內可直接運行 function begin(){ recOpen(function(){ recStart(); // setTimeout(recStop,3000); }); } </script>
關於錄音的播放是h5中<audio src="" ><audio>標簽
可以通過隱藏該標簽，並添加動畫，實現語音播放效果。修改樣式即可達到想要的語音播放形式
<audio id="y" controls="true" src="map3/test.mp3"> </audio>
<button onclick="bofang()"> bofang</button>
<script>
function bofang(){
var audio = document.getElementById('y');
if(audio!==null){
//檢測播放是否已暫停.audio.paused 在播放器播放時返回false.
// alert(audio.paused);
if(audio.paused) {
audio.play();//audio.play();// 這個就是播放
}else{
audio.pause();// 這個就是暫停
}
}
}
</script>