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;i2、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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。