vue-audio-visual icon indicating copy to clipboard operation
vue-audio-visual copied to clipboard

TODO: Allow dynamically replace audio source for the elements.

Open staskobzar opened this issue 5 years ago • 8 comments

staskobzar avatar May 26 '19 14:05 staskobzar

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.

galipmedia avatar May 12 '20 16:05 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.

galipmedia avatar May 12 '20 17:05 galipmedia

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

staskobzar avatar May 12 '20 21:05 staskobzar

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.

timhere avatar Jul 10 '20 11:07 timhere

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

staskobzar avatar Jul 10 '20 11:07 staskobzar

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

All working perfectly now, thank-you!

timhere avatar Jul 10 '20 17:07 timhere

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

pankaj7822 avatar Jun 06 '21 09:06 pankaj7822

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

Turninger avatar May 09 '22 08:05 Turninger