Document how to change audio of a vue-howler instance

[mickdekkers]

Because #8, #17

[brmly]

Get error "Uncaught TypeError: Cannot read property '_id' of undefined" when trying to dynamically change source using Vuex reactive property ("getters").

Anybody can helps?

I have uploaded test code: https://github.com/brmly/howler-vuex-test

state: {
  currentTrack: 0,
  playlist: [
    "http://files.realmusic.ru/lofi/1623349/1623349.mp3",
    "http://files.realmusic.ru/lofi/1592117/1592117.mp3",
    "http://files.realmusic.ru/lofi/1590311/1590311.mp3"
  ],
},

getters: {
  currentAudio: state => {
    return [ state.playlist[state.currentTrack] ];
  }
},

mutations: {
  prevTrack (state) {
    state.currentTrack = Math.max(0, state.currentTrack - 1);
  },
  nextTrack (state) {
    state.currentTrack = Math.min(state.playlist.length - 1, state.currentTrack + 1);
  },
}

[mickdekkers]

@brmly thanks for the repro! It seems to be caused by this line in howler.js. Vue-howler calls howler.js's seek() method 4 times per second to keep track of the current progress of the audio, and I think there's a brief period of time when switching audio that that method fails because the audio is not initialized yet. I'm not sure if it's an upstream issue or if I need to add a check for this to vue-howler. I'll have to debug some more to find out.

[brmly]

For some reason the _src array of Howler.js is emptied when original source array are reactively changed.

I have already tried to use locally "computed" currentAudio array, but situation was not changed.

I guess that is not issue of Howler.js, but some incompatibility with reactive features of Vue.

[Helmi]

any news on that one? I am also trying to replace the tracks through vuex

[brmly]

We have solved by destroying/recreating of whole component with howler. Not optimal, need to save settings, etc...

[Helmi]

@brmly can you assist with any kind of code here? Most of the basics are running for me now but I can't behind the destroy component thing. Is any of your code public or something you can post at least in parts? Thanks