search

staskobzar / vue-audio-visual

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

Sample code doesn't seem to work #16

Closed cfjedimaster closed 5 years ago

cfjedimaster commented 5 years ago

I tried the sample code and noticed that only av-circle worked. I copied and pasted from the readme and only changed the MP3 location. You can see it online here:

https://codesandbox.io/s/vueaudiovisual-test-pii5m

cfjedimaster commented 5 years ago

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

image

staskobzar commented 5 years ago

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 commented 5 years ago

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

cfjedimaster commented 5 years ago

Ah - CORS issues then?

staskobzar commented 5 years ago

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

cfjedimaster commented 5 years ago

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 commented 5 years ago

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

dingming1994 commented 5 years ago

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 commented 5 years ago

@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.