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

Question

如上图左边那个图形的波浪效果，这个是evc录频那里截来的效果。现在做好录音基本功能，就想在录音时加个动画效果。
现有代码如下：

<template>    <!-- 录音demo -->    <div>        <el-card>            <h1>录音</h1>            <!-- 录音区域 -->            <div style="margin-top:10px;">                <div ref="timer">{{ time }}</div>                <!-- 操作按钮区域 -->                <div style="margin-top:10px;">                    <el-button type="primary" @click="startRecord" :disabled="startBtn">开始录音</el-button>                    <el-button type="primary" @click="stopRecord" :disabled="stopBtn">暂停录音</el-button>                    <el-button type="primary" @click="reRecord" :disabled="resumeBtn">恢复录音</el-button>                    <el-button type="primary" @click="endRecord" :disabled="endBtn">结束录音</el-button>                </div>                <audio ref="recordPlayer" controls src="" style="margin-top: 10px;" />                <el-button type="primary" @click="download">下载录音文件</el-button>            </div>        </el-card>    </div></template><script>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);        }    },}</script><style scoped></style>  

Answer 1

查看本站文章:

https://segmentfault.com/a/1190000021613428

MDN官方教程:

https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Audio_AP...