Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Display currentTime stops music from playing #220

Open
Psabot opened this issue Jul 10, 2020 · 0 comments
Open

Display currentTime stops music from playing #220

Psabot opened this issue Jul 10, 2020 · 0 comments

Comments

@Psabot
Copy link

Psabot commented Jul 10, 2020

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant