search

staskobzar / vue-audio-visual

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

What is the correct way to use a variable for audio-src? #13

Closed sehailey closed 5 years ago

sehailey commented 5 years ago

Please see this minimal working example: https://codesandbox.io/embed/vue-template-68j1o

In the components/Waveform.vue I pass episodes from data to audio-src, and have a dropdown menu with an onChange method that sets episode to the episode selected in the menu. (I've used external .mp3 links for this working example).

If I change episodes to a hard-coded URL it works fine (though the audio element does not update when I change the menu).

staskobzar commented 5 years ago

Hi, It does not support dynamic source replacement. Plugin will generate graphics on mount.

You have to destroy and recreate the element with a new source. May be using v-if directive if you do not have too many sources in the list.

sehailey commented 5 years ago

Thanks for the reply! I also had the problem when using av-waveform that it crashes when the audio source is too long (in my case around 2 hours). It's a very nice plugin, it would be wonderful if it could allow for dynamic source replacement.

staskobzar commented 5 years ago

Hello,

I have not tried with very long audio files but you are right, it will crash as it tries to load all the data on the element mount and with big files it can overload browser buffer. I will put this issue and dynamic source replacement in TODO list. Unfortunately, I can not say if it is going to be implemented soon but I will try.

Thanks and have a good day.