Question

我正在尝试使用vuejs音频播放器并以自己的风格对其进行自定义。我正在使用vue-aplayer，但我认为这无关紧要，我的问题与音频标签或vuejs或（更可能是）我的错误代码有关。我只是想显示一首歌的currentTime。

我正在使用以下代码：

<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>

这是很奇怪的事情：当我显示{{progress}}变量时，它会剪切音乐，并且值始终为0。如果注释掉进度变量，然后在浏览器中的Vue检查器中检查进度值，则可以看到该值随着音乐播放而增加。我只是不明白为什么显示变量时它不起作用。

我尝试通过@timeupdate='onTimeUpdateListener'事件直接获取currentTime 使用以下代码： onTimeUpdateListener: function() { this.progress = this.$refs.aplayer.$refs.audio.currentTime }，但效果相同。

任何指针都很棒。

Vuejs-显示音频currentTime可以播放音乐

0 个答案: