Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

324
Vistas
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 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda