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

0

251
Views
¿Hay alguna manera de mover la barra de búsqueda mientras se reproduce la canción en Vuejs?

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?

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