通过H5实现html页⾯的录⾳和播放（Recorder⽤于html5录⾳）
经过阅读，提炼出简洁的录制和结束按钮，⽅便使⽤
⾸先准备两个按钮，开始和结束
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="recorder.mp3.min.js"></script><!--已包含recorder-core和mp3格式⽀持, CDN: cdn.jsdelivr/gh/xiangyuecn/Recorder@latest/recorder.mp3.min.js-->
<script src="src/recorder-core.js"></script><!--必须引⼊的录⾳核⼼，CDN: cdn.jsdelivr/gh/xiangyuecn/Recorder@latest/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()" >停⽌</button>
</body>
html网页边框代码</html>
js代码：
<script>
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/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 ateElement("audio");
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 = ElementById('y');
if(audio!==null){
//检测播放是否已暂停.audio.paused 在播放器播放时返回false. // alert(audio.paused);
if(audio.paused) {
audio.play();//audio.play();// 这个就是播放
}else{
audio.pause();// 这个就是暂停
}
}
}
</script>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论