SevenOutman / vue-aplayer

:cake: Easy-to-use music player for Vue 2.x
https://vue-aplayer.js.org
MIT License
1.33k stars 200 forks source link

Display currentTime stops music from playing #220

Open Psabot opened 4 years ago

Psabot commented 4 years ago

Hi guys !

First of all, thanks for this component which is really great !

I wanted to use this project in mini mode and display a progress bar myself to show the currentTime of the song.

I'm using the following code :

<template>
    <div>
     <aplayer
        @playing="playing"
        @pause="paused"
        ref="aplayer"
        mini
        :music="{
            title: 'test',
            src:mysrc,
        }"
    />
// {{progress}} DOES NOT WORK
    </div>
</template>

<script>
import Aplayer from "vue-aplayer";

export default {
  components: {
    Aplayer
  },
   data() {
    return {
      progress: 0,
      processId: null,
    }
  },
  computed: {
    player() {
      return this.$refs.aplayer;
    },
  },
  methods: {
    async playing() {
      this.processId = setInterval(() => {
          this.progress = Math.round(this.player.playProgress*100)
      }, 100);
    },
    paused() {
      clearInterval(this.processId);
    }
  }
};
</script>

Here is the weird thing : when I display the {{progress}} variable, it cuts the music and the value is always 0. If I comment out the progress variable and then inspect the progress value in the Vue Inspector in my browser, I can see the value increasing as the music is played. I just can't understand why it does not work when I display the variable.

I tried to fetch the currentTime directly via the @timeupdate='onTimeUpdateListener' event with the following code : onTimeUpdateListener: function() { this.progress = this.$refs.aplayer.$refs.audio.currentTime } but it has the same effect.

Any pointers would be awesome.