基於recorder.js H5錄音功能

兼容性

1.Chrome，FF，Edge，QQ，360（注：現有IE和Safari全版本不兼容）
2.其中Chrome47以上以及QQ瀏覽器強制要求HTTPS的支持
3.請嘗試使用FF，Edge，360，瀏覽器進行體驗，或將項目下載到本地通過localhost的方式

下載 recorder.js

前往 https://github.com/OmegaMibai/SoundRecording/tree/master/recorder/js

核心文件

核心代碼

html

<div id="mask">
    <img class="imagestu" src="./images/luyin.gif" alt="">
    <p>錄音中······</p>
</div>
<button id="start" class="ui-btn ui-btn-primary">按住說話</button>
<div id="audio-container" class="audio-container">
     <audio controls ref="audio" src="" id="audio" class="Reading_MP3 audio" id="bofang"></audio>
</div>

css

.ui-btn {
    z-index: 9999; 
    display: inline-block; 
    padding: 5px 20px; 
    font-size: 14px; 
    line-height: 1.428571429; 
    box-sizing:content-box; 
    text-align: center; 
    border: 1px solid #e8e8e8; 
    border-radius: 0.1rem; 
    color: #555; 
    background-color: #fff; 
    border-color: #e8e8e8; 
    white-space: nowrap; 
    cursor: pointer; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
}
.ui-btn:hover, .ui-btn.hover { 
    color: #333; 
    text-decoration: none; 
    background-color: #f8f8f8; 
    border:1px solid #ddd; 
}
.ui-btn:focus, .ui-btn:active { 
    color: #333; 
    outline: 0; 
}
.ui-btn.disabled, .ui-btn.disabled:hover, .ui-btn.disabled:active, .ui-btn[disabled], .ui-btn[disabled]:hover, .ui-state-disabled .ui-btn { 
    cursor: not-allowed; 
    background-color: #eee; 
    border-color: #eee; 
    color: #aaa; 
}
.ui-btn-primary { 
    color: #fff;  
    background-color: #39b54a;  
    border-color: #39b54a; 
    position: fixed;
    bottom: 0.2rem;
    width: 50%;
    margin-left: 25%;
    padding: 0.1rem 0;
}
.ui-btn-primary:hover, .ui-btn-primary.hover { 
    color: #fff; 
    background-color: #16a329; 
    border-color: #16a329; 
}
.ui-btn-primary:focus, .ui-btn-primary:active { 
    color: #fff; 
}
.ui-btn-primary.disabled:focus{ 
    color: #aaa; 
}
.imagestu{
    display: block;
    width:40%;
    margin: auto;
}
#mask{
    position: fixed;
    width: 50%;
    left: 25%;
    top: 40%;
    background: rgba(0,0,0,0.05);
    padding:0.2rem 0.1rem;
   z-index: 9999;
   background-color: #fefefe;
   border-radius: 0.1rem;
   display: none;
}
#mask p{
    text-align: center;
    font-size: 0.24rem;
    color: rgba(0,0,0,0.5);
}

js

<script>
    var start = document.querySelector('#start');
    var audio = document.querySelector('#audio');
    var recorder = new Recorder({
        sampleRate: 44100, //采樣頻率，默認為44100Hz(標准MP3采樣率)
        bitRate: 128, //比特率，默認為128kbps(標准MP3質量)
        success: function(){ //成功回調函數
            // start.disabled = false;
        },
        error: function(msg){ //失敗回調函數
            console.log(msg);
        },
        fix: function(msg){ //不支持H5錄音回調函數
            console.log(msg);
        }
    });
    var mask = document.getElementById('mask');
    var start = document.querySelector('#start');
    start.addEventListener('touchstart',function(){
       timer = setTimeout(function(){
        for(var i = 0; i < audio.length; i++){
            if(!audio[i].paused){
                audio[i].pause();
            }
        }
        start.innerHTML="松開結束"
       mask.style.display="block"
        recorder.start();
    },500);
            });
     start.addEventListener('touchmove',function(){
       timeOutEvent = setTimeout(function(){
      clearTimeout(timer);
       timer = 0;
            });
     })
       start.addEventListener("touchend", function (e) {
       console.log('touchend');
       recorder.stop();
       mask.style.display="none"
        recorder.getBlob(function(blob){
            audio.src = URL.createObjectURL(blob);
            audio.controls = true;
        });
        start.innerHTML="按住說話"
       clearTimeout(timer);
       return false;
   });
</script>

引入文件

<script src="./js/recorder.js"></script>

效果

點擊按鍵直接錄音

松開按鍵可直接本次錄音

使用方法

var recorder = new Recorder({
    sampleRate: 44100, //采樣頻率，默認為44100Hz(標准MP3采樣率)
    bitRate: 128, //比特率，默認為128kbps(標准MP3質量)
    success: function(){ //成功回調函數
    },
    error: function(msg){ //失敗回調函數
    },
    fix: function(msg){ //不支持H5錄音回調函數
    }
});

API

//開始錄音
recorder.start();
//停止錄音
recorder.stop();
//獲取MP3編碼的Blob格式音頻文件
recorder.getBlob(function(blob){ //獲取成功回調函數，blob即為音頻文件
//  ...
},function(msg){ //獲取失敗回調函數，msg為錯誤信息
//  ...
});