Clever Geek Handbook

Vuejs with HTML5 sound quality

I am using Vuejs to create a control bar for audio, I want to bind a property currentTime

to a value computed

, so I write

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

and here is my tag audio

:

  <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 run it in methods 

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

But when i use {{ currentTime }}

in template i got

An error occurred while evaluating the expression "currentTime".

Uncaught TypeError: Cannot read property currentTime from null

+1


source to share


3 answers


You must register via v-el to link to it

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



then access it in vue instance via $ els property like

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


source


For vue 2.0, the way you reference an element has changed.

In HTML format <audio ref="audio" controls>



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

+3


source


It seems that the "vue" approach is particularly suited to this:

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 .

0


source






More articles:


All Articles