Estoy tratando de hacer que la barra de búsqueda se mueva mientras se reproduce la canción. Tengo lo siguiente en mi código que muestra la barra de búsqueda.

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

El siguiente código reproduce y pausa la canción, entre otras cosas.

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

Pero el problema es hacer que la barra de búsqueda se mueva al reproducir la canción, ¿hay alguna forma de solucionarlo?