-
Notifications
You must be signed in to change notification settings - Fork 201
Description
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.