search

staskobzar / vue-audio-visual

VueJS audio visualization components
MIT License
693 stars 111 forks source link

TODO: Allow dynamically replace audio source for the elements. #14

Open staskobzar opened 5 years ago

galipmedia commented 4 years ago

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 commented 4 years ago

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.

staskobzar commented 4 years ago

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

timhere commented 4 years ago

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 commented 4 years ago

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

timhere commented 4 years ago

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 commented 3 years ago

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

Turninger commented 2 years ago

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