vue使用recorder.js实现录音功能
关于vue使用recorder.js录音功能，供大家参考，具体内容如下
**
1，引入外部js文件
import{HZRecorder}from‘…/…/utils/HZRecorder.js';
js文件内容
exportfunctionHZRecorder(stream,config){
config=config||{};
config.sampleBits=config.sampleBits||16;//采样数位8,16
config.sampleRate=config.sampleRate||16000;//采样率16khz
varcontext=new(window.webkitAudioContext||window.AudioContext)();
varaudioInput=context.createMediaStreamSource(stream);
varcreateScript=context.createScriptProcessor||context.createJavaScriptNode;
varrecorder=createScript.apply(context,[4096,1,1]);
varaudioData={
size:0//录音文件长度
,buffer:[]//录音缓存
,inputSampleRate:context.sampleRate//输入采样率
,inputSampleBits:16//输入采样数位8,16
,outputSampleRate:config.sampleRate//输出采样率
,oututSampleBits:config.sampleBits//输出采样数位8,16
,input:function(data){
this.buffer.push(newFloat32Array(data));
this.size+=data.length;
}
,compress:function(){//合并压缩
//合并
vardata=newFloat32Array(this.size);
varoffset=0;
for(vari=0;i
2、vue组件的mount中初始化调用麦克风工具
mounted(){
this.$nextTick(()=>{
try{
window.AudioContext=window.AudioContext||window.webkitAudioContext;
navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia;
window.URL=window.URL||window.webkitURL;
audio_context=newAudioContext;
console.log('navigator.getUserMedia'+(navigator.getUserMedia?'available.':'notpresent!'));
}catch(e){
alert('Nowebaudiosupportinthisbrowser!');
}
navigator.getUserMedia({audio:true},function(stream){
recorder=newHZRecorder(stream)
console.log('初始化完成');
},function(e){
console.log('Noliveaudioinput:'+e);
});
})
},
3、methods调用
readyOriginal(){
if(!this.isVoice){
recorder&&recorder.start();
this.isVoice=true
}else{
this.isVoice=false
recorder&&recorder.stop();
setTimeout(()=>{
varmp3Blob=recorder.upload();
varfd=newFormData();
fd.append('audio',mp3Blob);
this.$http({
header:({
'Content-Type':'application/x-www-form-urlencodeed'
}),
method:'POST',
url:'url',
data:fd,
withCredentials:true,
}).then((res)=>{
//这里做登录拦截
if(res.data.isLogin===false){
router.replace('/login');
}else{
if(res.data.status===200){
console.log('保存成功')
}else{
this.returnmsg='上传失败'
}
}
})
},1000)
}
},
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。