用于播放音频的html元素,通过H5实现html页面的录音和播放 (Recorder用于html5录音)...

varrec;/**调用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();

};/**结束录音**/

functionrecStop(){

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到控制台内可直接运行

functionbegin(){

recOpen(function(){

recStart();//setTimeout(recStop,3000);

});

}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值