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?