Is there a way to have music player play songs accordingly

So i am trying to build a music player. But the song keeps jumping from one track to another i.e once a song is done playing it jumps position to the next two songs on the list. How do i fix this?

Here is my code: Vue (forked) - StackBlitz

This code will cause the event to be repeatedly listen:

export default {
  // ...
  methods: {
    play(song) {
      // ...
      this.player.addEventListener(
        'ended',
        function () {
          this.pause();
          this.next();
        }.bind(this)
      );

      this.player.addEventListener(
        'timeupdate',
        function () {
          this.progress =
            (this.player.currentTime / this.player.duration) * 100;
        }.bind(this)
      );
    },
  }
}
1 Like

after edited:
Vue (forked) - StackBlitz

support set progress:
Vue SFC Playground (vuejs.org)

1 Like

Thanks it works like it was supposed to, but when i pause the song and play it again it starts from the beginning.

Do you have an idea of the problem and solution???

This is related to player.src being reassigned, the code has been updated:
Vue (forked) - StackBlitz

1 Like

Thanks @LZQCN i have several questions so that i can better understand what you did… in this example Vue (forked) - StackBlitz i use am using an api developed using laravel with the vuejs app.

But i am finding it difficult to implement the solution you provided in this Vue (forked) - StackBlitz which works fine.

The code has been updated with an example of a mocked api request:
Vue (forked) - StackBlitz

Thanks Mate :), I also would like to confirm that how does shuffle, mute and seekbar works?

I tried using the example you sent above to achieve the seekbar but it doesn’t seem to work. Seekbar for both the volume and song progress. Here: Vue (forked) - StackBlitz

I figured mouseup and down would be used for the seekbar but i can not seem to get it to work