Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora

0

112
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?

8 months ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos