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=http://www.mamicode.com/"./images/luyin.gif" alt=http://www.mamicode.com/""> <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=http://www.mamicode.com/"" 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=http://www.mamicode.com/"./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为错误信息 // ... });

基于recorder.js H5录音成果

标签：

原文地点：https://www.cnblogs.com/Alangc612/p/12157860.html

，