Vuex getters real time updating audio.currentTime state

2
votes

I want to have audio player in Vuex store to use its data for output to custom audio player in a Vue components.

In Vuex store there is a state property aplayer that plays music. store.js code:

state: {
  aplayer: new Audio()
},
getters: {
  getCurrentTime: state => state.aplayer.currentTime
}

In the component I want to display aplayer.currentTime the current song. I'm trying to get it by using the getter getPlayer in a computed properties.

components.vue code:

getCurrentTime() {
  return this.$store.getters.getCurrentTime;
}

But when output to the template, the current time freezes to 0. However, when I press "pause", the current time is displayed correctly.

Please help.

2
vue.jsvuejs2vuex

2 Answers

2
votes

Vue works best when observing plain objects, of which Audio is not. Vue cannot detect when the currentTime property changes.

From the docs:

The object must be plain: native objects such as browser API objects and prototype properties are ignored. A rule of thumb is that data should just be data - it is not recommended to observe objects with their own stateful behavior.

Your best solution would be to generate your own currentTime number property and synchronize its value to audio.currentTime periodically by using setInterval while the audio is playing, and clear the interval when the audio is paused.

0
votes

store.js

state: {
  aplayer: new Audio()
},
getters: {
  getCurrentTime: state => state.aplayer.currentTime
}

Component.vue

<template>
  <div>{{getCurrentTime}}</div>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    computed: {
      ...mapGetters(['getCurrentTime'])
    }
  }
</script>