ref-link error .load() on AvBase.js about vue-audio-visual

[staskobzar]

Hello,
Thanks for the feedback.
Please, give me your template code of your audio and component elements so that I can reproduce it.

For CORS, please check "cors-anonym" property in documentation.

[rad027]

I used

<audio` ref="player" autoplay="true" preload="auto" :src="stream_url + '/stream'">
<av-line
:line-width="2"
line-color="lime"
ref-link="player"

It will show the error on console log that .load() cant be called because the this.$parent.$refs[this.refLink] is returning as undefined.

[staskobzar]

Do you have audio element with reference defined like this?

<audio ref="player" src="music.mp3"></audio>

Which browser?

[rad027]

I updated my recent comment i had a typo.

Im using google chrome latest version.

And also, the src i am using is a shoutcast v2 stream link.

[staskobzar]

This code works for me in Chrome:

<template>
  <div>
    <audio ref="player" controls autoplay="true" preload="auto" :src="path + '.mp3'" >
    </audio>
    <av-line
      :line-width="2"
      line-color="lime"
      ref-link="player"
      cors-anonym
    ></av-line>
  </div>
</template>

<script>
export default {
  name: 'av-line-demo',
  data () {
    return {
      path: 'file_example_MP3_1MG'
    }
  }
}
</script>
<style scoped>
</style>

[staskobzar]

Also, please note, that prop "cors-anonym" works only with components that generate their audio elements. When you use "refs" it means that audio element is created elsewhere in parent context and setting "crossOrigin" parameter has to be done with external audio element as any other.

[rad027]

What vue js version are you using ?
I tried that cors-anonym before modifying the AvBase.js
but im still getting the same error.

here's my recent code that has an error

component :

<audio ref="player autoplay="true" preload="auto" :src="stream_url + '/stream'">
<av-line
:line-width="2"
line-color="lime"
ref-link="player"
cors-anonym

here's the error :

[staskobzar]

vue version 2.6.11. I do not think it really matters.
cors-anonym is useless when using ref audio element.
Do you actually close your audio element?

[staskobzar]

looks like you are missing closing parentheses between player and autoplay:

<audio ref="player autoplay="true"

[rad027]

heres the actual code

[staskobzar]

It still works for me. Try to use another (local) mp3 file to see if the problem is which audio source.

[staskobzar]

I am going to close this ticket. Feel free to re-open if you have updates.
Have a good day

[happyshows]

This code works for me in Chrome:

<template>
  <div>
    <audio ref="player" controls autoplay="true" preload="auto" :src="path + '.mp3'" >
    </audio>
    <av-line
      :line-width="2"
      line-color="lime"
      ref-link="player"
      cors-anonym
    ></av-line>
  </div>
</template>

<script>
export default {
  name: 'av-line-demo',
  data () {
    return {
      path: 'file_example_MP3_1MG'
    }
  }
}
</script>
<style scoped>
</style>

I replaced the src with a valid url which works in av-bars standalone and still get the client.js?06a0:97 TypeError: Cannot read property 'load' of undefined anyway, using chrome/safari does not matter to me.

[happyshows]

@staskobzar any idea why it impacts both of us? and could you rerun the sample code with the latest version and let me know if it still work on your side?

[staskobzar]

@happyshows Can you provide the code that does not work, please?
Also, do you have something in Network tab of the console? is you url is loaded fine?

[staskobzar]

I can reproduce it when the src URL and the site URL are different.
For example audio src is https://1.1.1.1:8080 and the site where plugin runs is https://5.5.5.5:9090
Then I have error in console:

MediaElementAudioSource outputs zeroes due to CORS access restrictions for

If you have the same problem, then try to add to your audio element attribute crossorigin="anonymous".

The server that supplies audio also need to be configured send well-formed Access-Control-Allow-Origin header with audio response.