音频播放器快退+-30s Javascript

Question

你好，我正在制作一个音频播放器，现在我在那个部分，我想让它可以倒带和前进 30 秒，但它只是随时添加堆栈，这样如果我以 5 分钟的 ffwd 或 rev 的速度点击多个曲目，有人知道如何解决这个问题。

这是我使用 laravel 8 和 vuejs3 的整个代码

<template>
    <div class="progress relative">
        <div class="absolute -top-[15px] left-[150px] flex justify-between w-[500px]">
            <span class="positive cursor-pointer">+30s</span>
            <span class="negative cursor-pointer">-30s</span>
        </div>
        <span class="start"></span>
        <div class="progress-bar">
            <div class="now"></div>
        </div>
        <span class="end"></span>
    </div>
</template>

<script>
import {source} from "../../app";
let audio
export default {
    data() {
        return {
            source,
        }
    },
    props: {
      refLink: {
          type: String,
          default: null,
      },
    },
    name: "ProgressBarMain",
    mounted() {
        audio = this.$parent.$refs[this.refLink]
        const start = document.querySelector('.start')
        const end = document.querySelector('.end')
        const progressBar = document.querySelector('.progress-bar')
        const now = document.querySelector('.now')
        const negative = document.querySelector('.negative')
        const positive = document.querySelector('.positive')
        function conversion (value) {
            let minute = Math.floor(value / 60)
            minute = minute.toString().length === 1 ? ('0' + minute) : minute
            minute = minute.toString() === '60' ? (minute === '00') : minute
            let second = Math.round(value % 60)
            second = second.toString().length === 1 ? ('0' + second) : second
            second = second.toString() === '60' ? (second === '00') : second
            return `${minute}:${second}`
        }
            audio.onloadedmetadata = function () {
                end.innerHTML = conversion(audio.duration)
                start.innerHTML = conversion(audio.currentTime)
                positive.addEventListener('click', () => {
                    audio.currentTime = audio.currentTime + 30
                    audio.currentTime + 30
                })
                audio.currentTime = 0
                negative.addEventListener('click', () => {
                    audio.currentTime = audio.currentTime - 30
                })

            progressBar.addEventListener('click', function (event) {
                let coordStart = this.getBoundingClientRect().left
                let coordEnd = event.pageX
                let p = (coordEnd - coordStart) / this.offsetWidth
                now.style.width = p.toFixed(3) * 100 + '%'

                audio.currentTime = p * audio.duration
                console.log(audio.currentTime)
                audio.pause()
                source.isPlaying = false
                source.audioOn = false

            })

            setInterval(() => {
                start.innerHTML = conversion(audio.currentTime)
                now.style.width = audio.currentTime / audio.duration.toFixed(3) * 100 + '%'
                // console.log('start' + start.innerHTML + ':' + 'end' + end.innerHTML)
                //     console.log(source.currentSongIndex)

                if (start.innerHTML === end.innerHTML) {
                    if (source.currentSongIndex < source.tracks.length - 1) {
                        source.currentSongIndex += 1
                        source.activeTrack = source.tracks[source.currentSongIndex]
                    } else {
                        source.currentSongIndex = 0
                        source.activeTrack = source.tracks[source.currentSongIndex]
                    }
                    source.isPlaying = false
                    source.audioOn = false
                }
            }, 200)
        }
    }
}
</script>

<style scoped>

.progress {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 800px;
}

.progress-bar {
    position: relative;
    width: 800px;
    height: 10px;
    margin: 0 1rem;
    background-color: #fff;
    vertical-align: 2px;
    border-radius: 3px;
    cursor: pointer;
}

.now {
    position: absolute;
    left: 0;
    display: inline-block;
    height: 10px;
    background: #31cdff;
}

.now::after {
    content: '';
    position: absolute;
    left: 100%;
    width: 3px;
    height: 12px;
    background-color: lightblue;
}

</style>

提前感谢您的任何帮助！