Question

我正在使用Vuejs为音频制作控制面板，我希望将currentTime属性绑定到computed值，所以我写了

  computed: {
    'currentTime': {
      cache: false,
      get: function () {
        return document.getElementById('player').currentTime
      }
    }
  },

这是我的audio标记：

  <audio :src="musicSrc" preload="auto" id="player">
    <p>Your browser does not support the <code>audio</code> element.</p>
  </audio>

我可以在ready中找到它：

  ready () {
    this.player = document.getElementById('player')
  },

我可以在methods

中控制它

play: function () {
  this.player.play()
},

但是当我在模板中使用{{ currentTime }}时，我得到了

评估表达式＆＃34; currentTime＆＃34;时出错。

未捕获的TypeError：无法读取属性＆＃39; currentTime＆＃39;为null

Answer 1

对于vue 2.0，引用元素的方式已更改。

在HTML中 <audio ref="audio" controls>

在Vuejs中 this.currentTime = this.$refs.audio.currentTime

Answer 2

您应该通过v-el注册以引用它

<audio v-el:audio :src="musicSrc" preload="auto"></audio>

然后通过$ els属性在你的vue实例中访问它，就像这样

ready: function() {
    this.$els.audio.play();
}

Answer 3

这似乎是一种特别“虚荣”的方式来实现这一点：

HTML：

<audio @timeupdate='onTimeUpdateListener'></audio>

JS：

export default {
  data () {
    return {
      currentTime: '00:00' // The initial current time
    }
  },
  methods: {
    onTimeUpdateListener: function() {
      // Update current time
      this.currentTime = this.$els.audio.currentTime
    }
  }
}

此方法的归功于此SO answer的作者。

Answer 4

在 Vue 3 中，this.$refs 在组合 API 中不再可用。您需要改用 ref() 类。

<audio ref="audio"></audio>

import { ref } from vue;
export default {
  setup() {
    const audio = ref(null);
    ....
    return {
      audio
  }
}

具有HTML5音频属性的vuejs

4 个答案: