vue实现PC端录音功能的实例代码
录音功能一般来说在移动端比较常见，但是在pc端也要实现按住说话的功能呢？项目需求：按住说话，时长不超过60秒，生成语音文件并上传，我这里用的是recorder.js
1.项目中新建一个recorder.js文件，内容如下，也可在百度上直接搜一个
//兼容
window.URL=window.URL||window.webkitURL
navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia
letHZRecorder=function(stream,config){
config=config||{}
config.sampleBits=config.sampleBits||8//采样数位8,16
config.sampleRate=config.sampleRate||(44100/6)//采样率(1/644100)
letcontext=new(window.webkitAudioContext||window.AudioContext)()
letaudioInput=context.createMediaStreamSource(stream)
letcreateScript=context.createScriptProcessor||context.createJavaScriptNode
letrecorder=createScript.apply(context,[4096,1,1])
letaudioData={
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(){//合并压缩
//合并
letdata=newFloat32Array(this.size)
letoffset=0
for(leti=0;i
2.页面中使用，具体如下
语音
3.除了上述代码中的注释外，还有一些地方需要注意
- 上传语音时，一般会有两个参数，一个是语音的路径，一个是语音的时长，路径直接就是this.form.audioUrl,不过时长这里需要注意的是，由于我们一开始设置了定时器是有一秒的延迟，所以，要在获取到的时长基础上在减去一秒
- 初次按住说话一定要做判断，不然就会报错啦
- 第三点也是很重要的一点，因为我是在本地项目中测试的，可以实现录音功能，但是打包到测试环境后，就无法访问麦克风，经过多方尝试后，发现是由于我们测试环境的地址是http://***,而在谷歌浏览器中有这样一种安全策略，只允许在localhost下及https下才可以访问，因此换一下就完美的解决了这个问题了
- 在使用过程中，针对不同的浏览器可能会有些兼容性的问题，如果遇到了还需自己单独处理下
总结
以上所述是小编给大家介绍的vue实现PC端录音功能的实例代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！