Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

326
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda