• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

256
Views
Is there a way to move seekbar as song is playing in Vuejs

I am trying to get the seekbar to move as the song is playing. I have the following in my code which displays the seekbar.

<div class="playbackBar">
                            
        <span class="progressTime current">0.00</span>

        <div class="progressBar">
            <div class="progressBarBg">
                <div :style="'width:'+progress+'%'" class="progress"></div>
            </div>
        </div>

        <span class="progressTime remaining">0.00</span>

    </div>

The following code plays and pause the song among other things.

<script>
export default {
    data(){
        return{
            current: {},
            index: 0,
            isPlaying: false,
            progress: 0,
            songs: [
                {
                    title: 'Sample',
                    artist: 'Sample Artist',
                    src: '/storage/audio/sample.mp3'
                }
            ],
            player: new Audio()
        }
    },
    methods: {
        seekBar(mouse, progressBar){
            var percentage = mouse.offsetX / $(progressBar).width() * 100;
            var seconds = player.audio.duration * (percentage / 100);
            player.setTime(seconds);
        },
        play(song){
            if(typeof song.src != "undefined"){
                this.current = song

                this.player.src = this.current.src
            }
           
            this.player.play()
            this.player.addEventListener('ended', function () {
                this.index++;
                if (this.index > this.songs.length - 1) {
                    this.index = 0;
                }

                this.current = this.songs[this.index];
                this.play(this.current);
            }.bind(this));
            this.isPlaying = true;
        },
        pause(){
            this.player.pause();
            this.isPlaying = false;
        }
    },
    created(){
        this.current = this.songs[this.index];
        this.player.src = this.current.src;
    }
}
</script>

But the problem is getting the seekbar to move when playing the song, is there a way to fix this?

about 3 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error