Sample code doesn't seem to work about vue-audio-visual

[cfjedimaster]

Sorry I should add, in the console, I see:

[staskobzar]

Hello,

Try to download your mp3 to the "public" folder and use it as:

<audio
            src="/SoundHelix-Song-1.mp3"
            ref="foo"
            controls="true"
></audio>

To makes sure there are not CORS problems.
In my case it worked. May be that is your problem?

[staskobzar]

Source should be:
src="/SoundHelix-Song-1.mp3"

[cfjedimaster]

Ah - CORS issues then?

[staskobzar]

That would be my guess. Your code worked on my localhost when I downloaded mp3 to public.
I am using Chrome.

[cfjedimaster]

Ok, may I suggest that if a local mp3 is required that it be documented? (I don''t think it is, I could be wrong.)

[staskobzar]

Well, it is not strictly required. It just it must follow the rules. If mp3 is from different host then CORS attribute has to be set in element. Also remote host has to send some additional header following CORS specs.
There is also props for the element that can set CORS attribute (cors-anonym):
https://github.com/staskobzar/vue-audio-visual#common-props

[dingming1994]

Hi I am running into the same issue that only circle works with remote links. I have tried to put cors-anonym in many places but I cannot get it work.

Any update on how the problem can be solved? thanks !

[staskobzar]

@dingming1994
I think it also depends on the source of the remote links. For example, they are supposed to send responses with header Access-Control-Allow-Origin: *.

So the access to the link may be limited by the source.
There are not match control on the component side.