Audioplayer rewind and forward +-30s Javascript

Question

Hello im making an audioplayer, now im at that part where i want to make it possible to rewind and forward 30s but its just adding the stack anytime so that if im clicking serveral tracks im at an ffwd or rev of 5min does anybody know how to fix this.

This is my whole code im using laravel 8 and 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>

Thanks for any kind of help in advance!