MediaElementWebAudio CORS requests

[sundayz]

Wavesurfer.js version(s): 3.3.3

Browser and operating system version(s): Windows Firefox, Chrome

When using MediaElementWebAudio and providing my own peaks data, the backend doesn't load the mp3 file. Firefox gives the error: The HTMLMediaElement passed to createMediaElementSource has a cross-origin resource, the node will output silence. and Chrome: MediaElementAudioSource outputs zeroes due to CORS access restrictions

My web server is sending the cors headers:
Access-Control-Allow-Origin "*"
Access-Control-Allow-Methods "GET"
Access-Control-Allow-Headers "Content-Type: audio/mpeg"

I tried changing xhr settings in wavesurfer too but it didn't help.

After some googling, every answer seems to tell me to do this:
audioElement.crossOrigin = 'anonymous';

source: https://stackoverflow.com/questions/41069039/cors-request-will-not-work-in-chrome

Would changing createMediaElementSource here https://github.com/katspaugh/wavesurfer.js/blob/master/src/mediaelement-webaudio.js#L56 to allow passing an option param be a good idea?

mediaElement.crossOrigin = params.CrossOrigin || "";

[sundayz]

Okay so I actually looked a bit closer and it turns out that when you call wavesurfer.load() you can provide your own Audio object instead of a String and wavesurfer uses that. So you can do :

const myAudio = new Audio( your url to mp3 );
myAudio.crossOrigin = 'anonymous';
wavesurfer.load(myAudio, peaks);

And that fixes the problem

[uplg]

Had the same issue, using waveSurfer 7.9.1

Fixed by doing that :

waveSurferInstance.getMediaElement().crossOrigin = 'anonymous';

The load who takes an audioElement don't work anymore.