TODO: Allow dynamically replace audio source for the elements. about vue-audio-visual

[galipmedia]

Actually i fixed this by giving only av-waveform a key and not av-bars :) Dynamic changing of the track is totally doable. Just give the audio element an id and change its src with regular js wait for the canplay callback and play it.

[timhere]

Hi Stas, using v-if based on the src value is exactly what I've ended up doing.

All working perfectly now, thank-you!

[pankaj7822]

Using key can help to reload the component when audio source changes.
<av-waveform :audio-src="file" :cors-anonym="true" :key="audioindex"> </av-waveform> This worked Perfectly for me. In my case each audio file had some audioindex. cors-anonym can be set true if you are fetching Audio from other origin that was in my case else that is not required

[galipmedia]

You can dynamically change the audio in the $ref audio player by giving it a unique :key="some.id" but when I do this I can only get one of the av things to work.

[staskobzar]

@galipmedia thank you. I will test it and document your idea in README

[timhere]

Thanks for the info here, very helpful.

One caveat here seems to be that under the condition that the value provided for the src leads to an error when the component is mounted (this includes an empty string, undefined, of if the request returns 404), future changes to the src won't work.

A possible workaround would be to provide a placeholder/empty audio file as the source.

[staskobzar]

Hello Tim,
In my projects I use conditional rendering with v-if or v-show. It allows dynamically change audio sources for the same component.
It works fine and I do not know yet the better solution for the component. But I keep this issue opened in case if I come up with something better.
Have a good day

[Turninger]

Hi,pankaj, I wonder if the "audioindex" is a list or something?