javascript - vuejs with HTML5 audio property - Stack Overflow

admin管理员组

文章数量:1297247

I'm using Vuejs to make a control panel for audio, I want to get the currentTime property bind to a computed value, so I write

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

and here is my audio tag:

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

I can get it in ready:

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

I can control it in methods

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

But when I use {{ currentTime }} in template I got

Error when evaluating expression "currentTime".

Uncaught TypeError: Cannot read property 'currentTime' of null

I'm using Vuejs to make a control panel for audio, I want to get the currentTime property bind to a computed value, so I write

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

and here is my audio tag:

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

I can get it in ready:

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

I can control it in methods

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

But when I use {{ currentTime }} in template I got

Error when evaluating expression "currentTime".

Uncaught TypeError: Cannot read property 'currentTime' of null

• javascript
• html
• audio
• vue.js

Share Improve this question Follow asked Mar 1, 2016 at 1:26 zl2003cnzl2003cn 48511 gold badge77 silver badges2323 bronze badges 2

• have you tried this.currentTime? – Yerko Palma Commented Mar 1, 2016 at 14:23
• Could you post a jsfiddle please? – Mike Commented Mar 6, 2016 at 20:43

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 13

For vue 2.0 the way to reference an element has changed.

In HTML
<audio ref="audio" controls>

In Vuejs
this.currentTime = this.$refs.audio.currentTime

You should register via v-el to reference it

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

then access it in you vue instance via $els property, like so

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

It seems a particularly "vue" way to approach this is like so:

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

Credit for this approach goes to the author of this SO answer.

In Vue 3. this.$refs is no longer available in composition API. You'll need to use the ref() class instead.

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

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

本文标签： javascriptvuejs with HTML5 audio propertyStack Overflow