Vuejs - Отображение аудио currentTime режет музыку - PullRequest
Новая
       27

Vuejs - Отображение аудио currentTime режет музыку

0 голосов
/ 10 июля 2020

Я пытаюсь использовать аудиоплеер vuejs и настроить его под свой стиль. Я использую vue -aplayer, но не думаю, что это актуально, и моя проблема как-то связана с тегом аудио или vuejs или (что более вероятно) с моим плохим кодом. Я просто пытаюсь отобразить текущее время песни.

Я использую следующий код: 

<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}} , он обрезает musi c, и значение всегда равно 0. Если я закомментирую переменную прогресса, а затем проверю значение прогресса в инспекторе Vue в моем браузере, я увижу, что значение увеличивается как musi c играет. Я просто не могу понять, почему это не работает, когда я показываю переменную.

Я попытался получить currentTime напрямую через событие @timeupdate='onTimeUpdateListener' со следующим кодом: onTimeUpdateListener: function() { this.progress = this.$refs.aplayer.$refs.audio.currentTime }, но он имеет тот же эффект .

Любые указатели были бы замечательными.

...