基于recorder.js H5录音功能

Posted 2021-03-18 Ala瓜皮

兼容性

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为错误信息
//  ...
});