h5做出網頁錄音功能

來源：懂視網責編：小采時間：2020-11-27 19:59:30

h5做出網頁錄音功能

h5做出網頁錄音功能:這次給大家帶來h5做出網頁錄音功能，h5做出網頁錄音功能的注意事項有哪些，下面就是實戰案例，一起來看一下。得益于前輩的分享，做了一個h5錄音的demo。效果圖如下：點擊開始錄音會先彈出確認框：首次確認允許后，再次錄音不需要再確認，但如果用戶點擊禁止，

推薦度：

點擊下載本文 文檔為doc格式

導讀h5做出網頁錄音功能:這次給大家帶來h5做出網頁錄音功能，h5做出網頁錄音功能的注意事項有哪些，下面就是實戰案例，一起來看一下。得益于前輩的分享，做了一個h5錄音的demo。效果圖如下：點擊開始錄音會先彈出確認框：首次確認允許后，再次錄音不需要再確認，但如果用戶點擊禁止，

這次給大家帶來h5做出網頁錄音功能，h5做出網頁錄音功能的注意事項有哪些，下面就是實戰案例，一起來看一下。

得益于前輩的分享，做了一個h5錄音的demo。效果圖如下：

點擊開始錄音會先彈出確認框：

首次確認允許后，再次錄音不需要再確認，但如果用戶點擊禁止，則無法錄音：

點擊發送將錄音內容發送到對話框中。點擊即可播放。點擊獲取錄音即可下載最后一次的音頻：

播放下載都是圍繞blob文件。播放就是讓隱藏的audio標簽的地址指向內存中的blob：

 this.play = function (audio,blob) {
 blob=blob||this.getBlob().blob;
 audio.src = URL.createObjectURL(blob); 
 };

createObjectURL 我們在用base64顯示圖片的時候也可以用到。

 img.src = URL.createObjectURL(blob);

這樣比一長串的字符串好看很多。同理如果你想銷毀該地址對應的數據而節省內存可以這樣：

 URL.revokeObjectURL(img.src);

扯遠了點。下載就是模擬a標簽的點擊。

 function downloadRecord(record){ var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
 save_link.href = URL.createObjectURL(record); var now=new Date;
 save_link.download = now.Format("yyyyMMddhhmmss");
 fake_click(save_link);
 } 
 function fake_click(obj) { var ev = document.createEvent('MouseEvents');
 ev.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
 obj.dispatchEvent(ev);
 }

每次發送，其實是講音頻數據緩存下來，標記下id。下次點擊的時候根據id獲取緩存的數據，然后叫給audio元素播放：

var msg={}; //發送音頻片段
 var msgId=1; function send(){ if(!recorder){
 showError("請先錄音"); return;
 } var data=recorder.getBlob(); if(data.duration==0){
 showError("請先錄音"); return;
 }
 msg[msgId]=data;
 recorder.clear();
 console.log(data); var dur=data.duration/10; var str="<p class='warper'><p id="+msgId+" class='voiceItem'>"+dur+"s</p></p>"
 $(".messages").append(str);
 msgId++;
 }
 
 $(document).on("click",".voiceItem",function(){ var id=$(this)[0].id; var data=msg[id];
 playRecord(data.blob);
 })

內部是基于AudioContext實現：兼容性如下，基本上只能在谷歌和火狐瀏覽器里面玩。很可惜微信和ios目前不支持的。如果電腦沒有音頻驅動或者沒有麥都會報錯提示。