这种根据录音时分贝大小实时展现波浪大小的效果如何实现？-灵析社区

 如上图左边那个图形的波浪效果，这个是evc录频那里截来的效果。现在做好录音基本功能，就想在录音时加个动画效果。 现有代码如下： 录音 {{ time }} 开始录音 暂停录音 恢复录音 结束录音 下载录音文件 export default { components: { }, data() { return { mediaRecorder: '',//MediaRecorder对象实例 time: '00:00', timer: null,//定时器 startBtn: false, stopBtn: true, resumeBtn: true, endBtn: true, lastTime: '',//上一次暂停的时间 file: ''//录音完成的File文件对象 } }, computed: { }, created() { }, mounted() { }, methods: { // 开始录音 startRecord() { this.startBtn = true this.stopBtn = false this.endBtn = false //只录制音频 navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => { console.log('音频流', stream) //创建一个MediaRecorder对象实例，以供音频的录入 this.mediaRecorder = new MediaRecorder(stream) console.log('录音对象', this.mediaRecorder) this.mediaRecorder.start() //开始录音 this.mediaRecorder.onstart = () => { // 录音开始计时 const start = Date.now(); this.timer = setInterval(() => { const diff = Date.now() - start; const minutes = Math.floor(diff / (1000 * 60)); const seconds = Math.floor((diff % (1000 * 60)) / 1000); // const milliseconds = Math.floor((diff % 1000) / 10);//毫秒去掉 this.time = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; }, 10); } }).catch((error) => { console.log(error) this.$alert('开启麦克风失败！') }) }, //结束录音 endRecord() { this.startBtn = false this.stopBtn = true this.resumeBtn = true this.endBtn = true this.mediaRecorder.stop() this.mediaRecorder.onstop = () => { //录音结束 clearInterval(this.timer); //重置时间 this.time = '00:00' } //监听是否新的录音对象生成 this.mediaRecorder.addEventListener('dataavailable', (event) => { //监听录音结束后将录制的音频放入audio标签 this.$refs.recordPlayer.src = URL.createObjectURL(event.data) let blob = event.data//blob对象 console.log(blob) console.log(blob.size) let size = blob.size / 1024 / 1024 console.log('blob文件大小', size) //blob对象转file文件对象 let file = new File([blob], '录音文件1', { type: "audio/mp3" }) this.file = file console.log(file) }) }, //暂停录音 stopRecord() { this.stopBtn = true this.resumeBtn = false this.mediaRecorder.pause() this.mediaRecorder.onpause = () => { //暂停录音，停止当前计时 clearInterval(this.timer); this.lastTime = this.time } }, //恢复录音 reRecord() { this.resumeBtn = true this.stopBtn = false this.mediaRecorder.resume() this.mediaRecorder.onresume = () => { //恢复录音，恢复当前计时 const start = Date.now(); this.timer = setInterval(() => { const diff = Date.now() - start; const minutes = Math.floor(diff / (1000 * 60)); const seconds = Math.floor((diff % (1000 * 60)) / 1000); // const milliseconds = Math.floor((diff % 1000) / 10);//毫秒去掉 let time = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; let lastTime = this.lastTime let [ah, al] = lastTime.split(':'); let [bh, bl] = time.split(':'); // Convert hour and minute to numbers let ahour = parseInt(ah); let almin = parseInt(al); let bhour = parseInt(bh); let bmin = parseInt(bl); // Add minutes to get total minutes let totalMin = (ahour * 60 + almin) + (bhour * 60 + bmin); // Convert total minutes back to hours and minutes let totalHours = Math.floor(totalMin / 60); let totalMins = totalMin % 60; // Store the result this.time = `${totalHours.toString().padStart(2, '0')}:${totalMins.toString().padStart(2, '0')}`; }, 10); } }, //下载录音文件 download() { // 创建a标签 var link = document.createElement("a"); link.href = URL.createObjectURL(this.file); link.download = "录音文件1.mp3"; // 添加到DOM中并模拟点击下载 document.body.appendChild(link); link.click(); // 从DOM中移除a标签 document.body.removeChild(link); } }, }