staskobzar / vue-audio-visual

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

cannot use ref-link for audio linking #36

Closed minestarnl closed 4 years ago

minestarnl commented 4 years ago

Hello there when I try to use the ref link for getting my audio component I get an error: Cannot read property 'load' of undefined This seems to be the same #34
It does work if I use source directly in the av-circle, but I want the seperate audio tag for customisablity since I am creating a custom audio player interface

result of console.log(this.$refs.audioFile); is the correct audio component

thanks!

my code:


<audio
          :loop="innerLoop"
          ref="audioFile"
          preload="auto"
          style="display: none;"
          :src="file"
          :title="title"
          author="Kaj Munk College"
          :data-title="title"
        ></audio>
<av-circle ref-link="audioFile"></av-circle>
staskobzar commented 4 years ago

Hello, It might happen when your "file" variable is not set yet when component is loaded. For example when you use it from vuex store. You can check this by setting "src" to file instead of variable and see if it works.

If it is the case, then the workaround would be to use conditional rendering of your element with: v-if="file".

minestarnl commented 4 years ago

Hello, So I fixed the issue by going in to the code and changing some things. Its available here: fork. It allows to pass in a HTMLAudioElement as audio reference (easier for my implementation since I already have a audio in my data) and allows you to rerun the mounted function (had to add a class to the canvdiv to allow for deletion of the previous one).

So for me it is now working and this allows for dynamic source changing. The only reason I have not created a pull request is because some tests are failing and I cant find out why (it seems as though this.ctx is undefined)

thanks anyways!

staskobzar commented 4 years ago

Hello, I did not know about the technique you have used. It still looks similar for me to the conditional rendering with v-if. I am glad you've found the way. Have a good day