Cors issue after uploading to 7

[tombburnell]

Bug description

I've just upgrade from 6.6.3 to 7.4.2 and suddenly getting CORS issues. My music is hosted on S3 and CORS are set on S3 to the following:
[
{
"AllowedHeaders": [],
"AllowedMethods": [
"GET"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": []
}
]

My code tries to load the audio like this..

wavesurfer?.load("https://mybucket.s3.eu-west-2.amazonaws.com/de5eb7e6-0e16-4f81-9d92-2e8b9a19d504.mp3", null);

But then see the following in the logs:

Refused to load media from 'blob:https://myhost.co.uk/9054a8bc-fbff-44b5-b7e5-fc5be04f5dd8' because it violates the following Content Security Policy directive: "media-src 'self' ......

I don't understand why it's trying to load a blob:url from my website host instead of the s3 url given. and I don't know where that UUID in that url is even coming from - it's not related to the URL or the data for the track.

Any ideas what could be going on? the only change I made was upgrading wavesurfer.

I have tried adding xhr section with both node: cors and mode: no-cors
xhr: {
cache: "default",
// mode: "cors",
mode: 'no-cors',
method: "GET",
credentials: "include",
headers: [
{ key: "cache-control", value: "no-cache" },
{ key: "pragma", value: "no-cache" }
]
}

Thanks, Tom

Environment

• Browser: Chrome

[katspaugh]

The way v7 works is:

• It fetches an audio file from the URL you specify (S3 in this case) as a blob
• Decodes it for rendering
• Inserts the blob as a URL object (blob:...) as the src property of an HTML audio element for playback

The blob thing is there to avoid downloading the audio twice (for decoding and for playback).

In your case, you might want to adjust the Content Security Policy (CSP) of your site to allow blob URLs. If that's not an option, you can switch to a custom media object like this:

const audio = new Audio('https://s3-my-bucket...')
const wavesurfer = new WaveSurfer({
  container: '#container',
  media: audio
})

(No need to call load in that case.)

[tombburnell]

Ahha ok great, thanks for the explanation. Adding a blog: to my CSP has fixed that.

Now I have issues with playback. I was previously checking 'isReady' flag but that doesn't seem to work. Using isReady event is working. Is the flag deprecated now?

Also I noticed skipForward is not working -> wavesurferRef.current.skipForward(5)

Is there a migration guide?

Thanks, Tom

[katspaugh]

Glad it worked !
There’s a list of removed methods and options in the readme. I wasn’t aware of the isReady flag though, not sure it was meant to be public. In any case the ready event is the way to go.

[b0ss-x]

I had a similar issue using the media: audio option and I resolved it by setting the crossOrigin property:

const audio = new Audio();
audio.crossOrigin = "anonymous";

[ZeeshanAhmadKhalil]

In case someone is using wavesurfer in tauri.js and trying to play .mp3 from appDataDirectory (or some other directory) then this answer may be helpful.

https://stackoverflow.com/a/77191258/9108471