通过H5实现html页面的录音和播放 (Recorder用于html5录音)
所用资源文件来源:https://github.com/xiangyuecn/Recorder
经过阅读,提炼出简洁的录制和结束按钮,方便使用
首先准备两个按钮,开始和结束
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script src="recorder.mp3.min.js"></script> <!--已包含recorder-core和mp3格式支持, CDN: https://cdn.jsdelivr.net/gh/xiangyuecn//recorder.mp3.min.js--> <script src="src/recorder-core.js"></script> <!--必须引入的录音核心,CDN: https://cdn.jsdelivr.net/gh/xiangyuecn//dist/recorder-core.js--> <script src="src/engine/mp3.js"></script> <!--相应格式支持文件;如果需要多个格式支持,把这些格式的编码引擎js文件放到后面统统加载进来即可--> <script src="src/engine/mp3-engine.js"></script> <!--如果此格式有额外的编码引擎的话,也要加上--> <script src="src/extensions/waveview.js"></script> <!--可选的扩展支持项--> <body> <button onclick="begin()">录制</button> <button onclick="recStop()" style="margin-right:80px">停止</button> </body> </html>
js代码:
<script> var rec; /**调用open打开录音请求好录音权限**/ var recOpen=function(success){//一般在显示出录音按钮或相关的录音界面时进行此方法调用,后面用户点击开始录音时就能畅通无阻了 rec=Recorder({ type:"mp3",sampleRate:16000,bitRate:16 //mp3格式,指定采样率hz、比特率kbps,其他参数使用默认配置;注意:是数字的参数必须提供数字,不要用字符串;需要使用的type类型,需提前把格式支持文件加载进来,比如使用wav格式需要提前加载wav.js编码引擎 ,onProcess:function(buffers,powerLevel,bufferDuration,bufferSampleRate,newBufferIdx,asyncEnd){ //录音实时回调,大约1秒调用12次本回调 //可利用extensions/waveview.js扩展实时绘制波形 //可利用extensions/sonic.js扩展实时变速变调,此扩展计算量巨大,onProcess需要返回true开启异步模式 } }); //var dialog=createDelayDialog(); 我们可以选择性的弹一个对话框:为了防止移动端浏览器存在第三种情况:用户忽略,并且(或者国产系统UC系)浏览器没有任何回调,此处demo省略了弹窗的代码 rec.open(function(){//打开麦克风授权获得相关资源 //dialog&&dialog.Cancel(); 如果开启了弹框,此处需要取消 //rec.start() 此处可以立即开始录音,但不建议这样编写,因为open是一个延迟漫长的操作,通过两次用户操作来分别调用open和start是推荐的最佳流程 success&&success(); },function(msg,isUserNotAllow){//用户拒绝未授权或不支持 //dialog&&dialog.Cancel(); 如果开启了弹框,此处需要取消 console.log((isUserNotAllow?"UserNotAllow,":"")+"无法录音:"+msg); }); }; /**开始录音**/ function recStart(){//打开了录音后才能进行start、stop调用 rec.start(); }; /**结束录音**/ function recStop(){ rec.stop(function(blob,duration){ console.log(blob,(window.URL||webkitURL).createObjectURL(blob),"时长:"+duration+"ms"); rec.close();//释放录音资源,当然可以不释放,后面可以连续调用start;但不释放时系统或浏览器会一直提示在录音,最佳操作是录完就close掉 rec=null; //已经拿到blob文件对象想干嘛就干嘛:立即播放、上传 /*** 【立即播放例子】 ***/ var audio=document.createElement("audio"); audio.controls=true; document.body.appendChild(audio); //简单利用URL生成播放地址,注意不用了时需要revokeObjectURL,否则霸占内存 audio.src=(window.URL||webkitURL).createObjectURL(blob); audio.play(); },function(msg){ console.log("录音失败:"+msg); rec.close();//可以通过stop方法的第3个参数来自动调用close rec=null; }); }; //我们可以选择性的弹一个对话框:为了防止移动端浏览器存在第三种情况:用户忽略,并且(或者国产系统UC系)浏览器没有任何回调 /*伪代码: function createDelayDialog(){ if(Is Mobile){//只针对移动端 return new Alert Dialog Component .Message("录音功能需要麦克风权限,请允许;如果未看到任何请求,请点击忽略~") .Button("忽略") .OnClick(function(){//明确是用户点击的按钮,此时代表浏览器没有发起任何权限请求 //此处执行fail逻辑 console.log("无法录音:权限请求被忽略"); }) .OnCancel(NOOP)//自动取消的对话框不需要任何处理 .Delay(8000); //延迟8秒显示,这么久还没有操作基本可以判定浏览器有毛病 }; }; */ //这里假设立即运行,只录3秒,录完后立即播放,本段代码copy到控制台内可直接运行 function begin(){ recOpen(function(){ recStart(); // setTimeout(recStop,3000); }); } </script>
关于录音的播放是h5中<audio src="" ><audio>标签
可以通过隐藏该标签,并添加动画,实现语音播放效果。修改样式即可达到想要的语音播放形式
<audio id="y" controls="true" src="map3/test.mp3"> </audio> <button onclick="bofang()"> bofang</button> <script> function bofang(){ var audio = document.getElementById(‘y‘); if(audio!==null){ //检测播放是否已暂停.audio.paused 在播放器播放时返回false. // alert(audio.paused); if(audio.paused) { audio.play();//audio.play();// 这个就是播放 }else{ audio.pause();// 这个就是暂停 } } } </script>
相关推荐
wusiye 2020-10-23
表格的现在还是较为常用的一种标签,但不是用来布局,常见处理、显示表格式数据。在HTML网页中,要想创建表格,就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...
gufudhn 2020-08-09
nercon 2020-08-01
swiftwwj 2020-07-21
nercon 2020-07-16
饮马天涯 2020-07-05
Lophole 2020-06-28
gufudhn 2020-06-12
csstpeixun 2020-06-11
huzijia 2020-06-09
WebVincent 2020-06-06
行吟阁 2020-05-30
qsdnet我想学编程 2020-05-26
gufudhn 2020-05-25
qsdnet我想学编程 2020-05-19
suixinsuoyu 2020-05-15
HSdiana 2020-05-15
PioneerFan 2020-05-15