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="<div class='warper'><div id="+msgId+" class='voiceItem'>"+dur+"s</div></div>"
                $(".messages").append(str);
                msgId++;
            }
            
            $(document).on("click",".voiceItem",function(){
                var id=$(this)[0].id;
                var data=msg[id];
                playRecord(data.blob);
            })

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

 

 有興趣的朋友可以玩玩。未來移動端支持就更好了。

源碼：http://files.cnblogs.com/files/stoneniqiu/Voice.zip

參考博客：

http://blog.csdn.net/bzhou0125/article/details/46444201

http://www.zhangxinxu.com/wordpress/2017/06/html5-web-audio-api-js-ux-voice/

https://developer.mozilla.org/en-US/docs/Web/API/AudioContext