在vue中显示歌曲的当前时间

Question

我想知道如何才能让时间不断地更新。所以当我按下播放按钮时，秒数开始从0:00自动更新到结束，因为现在它只是在点击时更新。我正在尝试使用HTML5音频，我已经成功地从这行代码中获得了时间更新的标签。

sound.ontimeupdate = function () { document.getElementById('Time').innerHTML = sound.currentTime.toFixed() }

---

但这不是我所需要的，我想让data()中的时间属性得到更新，并显示在标签中，如我的HTML代码所示。

我试着添加了一个事件监听器，但没有成功......。它被调用，每次调用都被记录在 console.log 中，但时间属性没有更新。

let sound = null
export default {
  data () {
    return {
      isPlaying: false,
      time: 0,
      duration: 0
    }
  },
  methods: {
    playMusic () {
      if (!sound) {
        sound = new Audio(require('assets/YES.mp3'))
      }
      this.isPlaying = true
      sound.play()
      // sound.addEventListener('timeupdate', function () { this.time = sound.currentTime.toFixed() })   -- did not work

      this.time = sound.currentTime.toFixed()
    }

Html。

<label id="Time" @timeupdate>
    { { time } }:{ { duration } }
</label>

Answer 1

在你的内心 addEventListener 你会得到不同 this 比你想象的要好。

要么使用 fat arrow

sound.addEventListener('timeupdate', () => this.time = sound.currentTime.toFixed() )

或者，老办法，保存 this

let that = this
sound.addEventListener('timeupdate', function () { that.time = sound.currentTime.toFixed() })

Answer 2

你可以直接动态添加一个通用的定时器。你可以像这样使用手表来添加删除它。

（未经测试的代码）

export default {
    data() {
        return {
            isPlaying: false,
            time: 0,
            duration: 0,
            intervalId: null,
            sound: null
        };
    },
    watch: {
        isPlaying(isPlaying) {
            if (this.intervalId !== null) {
                clearInterval(this.intervalId);
            }
            if (isPlaying) {
                this.sound.play();
                this.intervalId = setInterval(() => {
                    this.time = this.sound.currentTime.toFixed();
                }, 500);
            } else {
                this.sound.stop();
            }
        }
    },
    methods: {
        playMusic() {
            if (!this.sound) {
                this.sound = new Audio(require("assets/YES.mp3"));
            }
            this.isPlaying = true;
        }
    }
};