Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
staskobzar opened this issue May 26, 2019 · 8 comments
Open

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

staskobzar opened this issue May 26, 2019 · 8 comments
Assignees
Labels
enhancement New feature or request todo

Comments

@staskobzar
Copy link
Owner

No description provided.

@staskobzar staskobzar self-assigned this May 26, 2019
@staskobzar staskobzar added the enhancement New feature or request label May 26, 2019
@galipmedia
Copy link

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
Copy link

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
Copy link
Owner Author

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

@timhere
Copy link

timhere commented Jul 10, 2020

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
Copy link
Owner Author

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
Copy link

timhere commented Jul 10, 2020

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
Copy link

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request todo
Projects
None yet
Development

No branches or pull requests

5 participants