Skip to content

Display currentTime stops music from playing #220

@Psabot

Description

@Psabot

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions