Wavesurfer does not work if Visual Composer is installed & activated

update: Everything is working properly now. I updated VC and now it works!

Haha ??
Always use the last versions of your plugins, most releases are bug fixes ??

If you are satisifed with the plugin, I invite you to leave a review.

Cheers !

So the problem is back. It works on one of my sites, but not the other and I am trying to figure out why because the sites are nearly identical (one is for staging/testing and the other is the live site)

this is what it looks like

https://i64.tinypic.com/2pood9k.png

Hmmm so if the player appears it means that the ressource is loading accordingly,
but if there is no sound loaded, it means that the data-url attribute of the div.wavesurfer-player is probably empty…

Can you inspect the code and tell me if it is right ?

Another possible problem : your audio files is not supported by your browser (like audio 24 bits and Firefox).

What kind of file it is ? did you try on another browser ?

Also, have you updated wavesurfer to v2.1.1 ?

And finally, can you make a screenshot of the post editor (where you have inserted the shortcode) ?

I think it has something to do with the loading. When i de-activate your plugin, the default player appears and functions fine.

My site does have alot of ajax elements, so im thinking possibly that could be contributing to the issue?

On the site where the plugin DOES work, its only about 50% of the time it will load the song properly….the other 50% is me having to refresh the page. Im thinking that is also because of the ajax nature of the page.

file is regular mp3. Same exact file that works w/ your player on my staging site.

Ajax… yeah maybe that is the problem, because the jquery Script is initialized by window.onload = function() {

I wonder if it could work better with $( document ).ready()
Are your page transitions powered by a free ressource (theme or plugin) that I could try N

ok here is snapshot: https://i64.tinypic.com/2vkz22x.png

in the code i did notice the “display:none” property…. here is snap: https://i66.tinypic.com/pc0t0.png

if you think you could solve this, i have no problem letting you in the admin section to try to work it out.

the thing that really has me stumped is that its working fine on my staging site……which is the exact same theme and same plugins and everything. :\

found the error i think

https://i63.tinypic.com/24265ix.png

This display:none is for the progress bar loading, not the audio file.

I am doing some research and I’ll let you know if I need an user acount.

Can you access the file via direct link (url of file directly in the browser adress bar ?)

Is the file present on a distant servcer (not the server of your website ?)

As far as I can find for now, it seems that you can place some .htaccess rules in the distant server to allow such request.

GOT IT!!!

it had nothing to do on your end (as i figured)…. it was issue with my cloudfront setup. When i uploaded locally to wordpress it worked fine.

yes!! thanks for sticking it out w/ me though. very much appreciated

Ok, good to know ??

I just found that you were not alone that had problem like this

Success with Cross-Origin Resource Sharing and S3? · Issue #83 · katspaugh/wavesurfer.js

I’m glad it is corrected now, you did a great debugging session ??

Cheers !

Hi newguy1

Can you please describe what you did to make it work, for other users ?

Or at least point at some resource ?

Thanks ??

Ok I think I have it

amazon s3 – S3 – Access-Control-Allow-Origin Header – Stack Overflow