<template> <div> <el-form v-model="form"> <el-form-item> <input type="button" @mousedown.prevent="mouseStart" @mouseup.prevent="mouseEnd" v-model="form.time"/> <audio v-if="form.audioUrl" :src="form.audioUrl" controls="controls">语音</audio> </el-form-item> <el-form> </div> </template> <script> // 引入recorder.js import recording from '@/js/recorder/recorder.js' export default { data() { return { form: { time: '按住说话(60秒)', audioUrl: '' }, num: 60, // 按住说话时间 recorder: null, interval: '', audioFileList: [], // 上传语音列表 startTime: '', // 语音开始时间 endTime: '', // 语音结束 } }, methods: { // 清除定时器 clearTimer () { if (this.interval) { this.num = 60 clearInterval(this.interval) } }, // 长按说话 mouseStart () { this.clearTimer() this.startTime = new Date().getTime() recording.get((rec) => { // 当首次按下时，要获取浏览器的麦克风权限，所以这时要做一个判断处理 if (rec) { // 首次按下，只调用一次 if (this.flag) { this.mouseEnd() this.flag = false } else { this.recorder = rec this.interval = setInterval(() => { if (this.num <= 0) { this.recorder.stop() this.num = 60 this.clearTimer() } else { this.num-- this.time = '松开结束（' + this.num + '秒）' this.recorder.start() } }, 1000) } } }) }, // 松开时上传语音 mouseEnd () { this.clearTimer() this.endTime = new Date().getTime() if (this.recorder) { this.recorder.stop() // 重置说话时间 this.num = 60 this.time = '按住说话（' + this.num + '秒）' // 获取语音二进制文件 let bold = this.recorder.getBlob() // 将获取的二进制对象转为二进制文件流 let files = new File([bold], 'test.mp3', {type: 'audio/mp3', lastModified: Date.now()}) let fd = new FormData() fd.append('file', files) fd.append('tenantId', 3) // 额外参数，可根据选择填写 // 这里是通过上传语音文件的接口，获取接口返回的路径作为语音路径 this.uploadFile(fd) } } } } </script> <style scoped> </style>
3.除了上述代码中的注释外，还有一些地方需要注意
上传语音时，一般会有两个参数，一个是语音的路径，一个是语音的时长，路径直接就是 this.form.audioUrl ,不过时长这里需要注意的是，由于我们一开始设置了定时器是有一秒的延迟，所以，要在获取到的时长基础上在减去一秒
初次按住说话一定要做判断，不然就会报错啦
第三点也是很重要的一点，因为我是在本地项目中测试的，可以实现录音功能，但是打包到测试环境后，就无法访问麦克风，经过多方尝试后，发现是由于我们测试环境的地址是***,而在谷歌浏览器中有这样一种安全策略，只允许在localhost下及https下才可以访问 ，因此换一下就完美的解决了这个问题了
在使用过程中，针对不同的浏览器可能会有些兼容性的问题，如果遇到了还需自己单独处理下
总结
以上所述是小编给大家介绍的vue实现PC端录音功能的实例代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章: