2023年12月5日发(作者:五菱宏光s七座报价及图片)
通过H5实现html页面的录音和播放(Recorder用于html5录音)
经过阅读,提炼出简洁的录制和结束按钮,方便使用
首先准备两个按钮,开始和结束
js代码:
var rec;
/**调用open打开录音请求好录音权限**/
var recOpen=function(success){//一般在显示出录音按钮或相关的录音界面时进行此方法调用,后面用户点击开始录音时就能畅通无阻了
rec=Recorder({
type:\"mp3\",sampleRate:16000,bitRate:16 //mp3格式,指定采样率hz、比特率kbps,其他参数使用默认配置;注意:是数字的参数必须提供数字,不要用字符串;需要使用的type类型,需提前把格式支持文件加载进来,比如使用wav格式需要提
,onProcess:function(buffers,powerLevel,bufferDuration,bufferSampleRate,newBufferIdx,asyncEnd){
//录音实时回调,大约1秒调用12次本回调
//可利用extensions/扩展实时绘制波形
//可利用extensions/扩展实时变速变调,此扩展计算量巨大,onProcess需要返回true开启异步模式
}
});
//var dialog=createDelayDialog(); 我们可以选择性的弹一个对话框:为了防止移动端浏览器存在第三种情况:用户忽略,并且(或者国产系统UC系)浏览器没有任何回调,此处demo省略了弹窗的代码
(function(){//打开麦克风授权获得相关资源
//dialog&&(); 如果开启了弹框,此处需要取消
//() 此处可以立即开始录音,但不建议这样编写,因为open是一个延迟漫长的操作,通过两次用户操作来分别调用open和start是推荐的最佳流程
success&&success();
},function(msg,isUserNotAllow){//用户拒绝未授权或不支持
//dialog&&(); 如果开启了弹框,此处需要取消
((isUserNotAllow?\"UserNotAllow,\":\"\")+\"无法录音:\"+msg);
});
};
/**开始录音**/
function recStart(){//打开了录音后才能进行start、stop调用
();
};
/**结束录音**/
function recStop(){
(function(blob,duration){
(blob,(||webkitURL).createObjectURL(blob),\"时长:\"+duration+\"ms\");
();//释放录音资源,当然可以不释放,后面可以连续调用start;但不释放时系统或浏览器会一直提示在录音,最佳操作是录完就close掉
rec=null;
//已经拿到blob文件对象想干嘛就干嘛:立即播放、上传
/*** 【立即播放例子】 ***/
var audio=Element(\"audio\");
ls=true;
Child(audio);
//简单利用URL生成播放地址,注意不用了时需要revokeObjectURL,否则霸占内存
=(||webkitURL).createObjectURL(blob);
();
},function(msg){
(\"录音失败:\"+msg);
();//可以通过stop方法的第3个参数来自动调用close
rec=null;
});
};
//我们可以选择性的弹一个对话框:为了防止移动端浏览器存在第三种情况:用户忽略,并且(或者国产系统UC系)浏览器没有任何回调
/*伪代码:
function createDelayDialog(){
if(Is Mobile){//只针对移动端
return new Alert Dialog Component
.Message(\"录音功能需要麦克风权限,请允许;如果未看到任何请求,请点击忽略~\")
.Button(\"忽略\")
.OnClick(function(){//明确是用户点击的按钮,此时代表浏览器没有发起任何权限请求
//此处执行fail逻辑
(\"无法录音:权限请求被忽略\");
})
.OnCancel(NOOP)//自动取消的对话框不需要任何处理
.Delay(8000); //延迟8秒显示,这么久还没有操作基本可以判定浏览器有毛病
};
};
*/
//这里假设立即运行,只录3秒,录完后立即播放,本段代码copy到控制台内可直接运行
function begin(){
recOpen(function(){
recStart();
// setTimeout(recStop,3000);
});
}
关于录音的播放是h5中
可以通过隐藏该标签,并添加动画,实现语音播放效果。修改样式即可达到想要的语音播放形式
function bofang(){ var audio = mentById(\'y\');
if(audio!==null){
//检测播放是否已暂停. 在播放器播放时返回false.// alert(); if() {
();//();// 这个就是播放
}else{ ();// 这个就是暂停 } }
}
更多推荐
录音,播放,需要
发布评论