Next.js load audio from url for wavesurfer on the client side

Question

I want to be able to listen to and render audio peaks using wavesurfer.js, but when I load the url from an external source, the waveform loads as a flat line. I tested using the same audio file by downloading it and saving it in my public/static assets folder, so I know wavesurfer is capable of rendering peaks, both for this file and in my app as is, as long as the url is taking advantage of next.js static asset serving.

I think it might be an xhr issue, but am feeling pretty lost even after poring over the wavesurfer and nextjs docs.

The reason I think it may be an xhr issue is the fact that I haven't been able to get any audio to render when using the external url unless I specify the backend to MediaElement in the wavesurfer init options.

Options that render waveform from the file fetched from the public/assets folder:

 waveform.current = WaveSurfer.create({
  container: "#waveform",

  waveColor: "#8D86C9",
  progressColor: "#242038",

  normalize: true,
  hideScrollbar: true,

});

when it works

and what I have to add to get a flat line loading from an external url

waveform.current = WaveSurfer.create({
  container: "#waveform",
  backend: 'MediaElement',
  waveColor: "#8D86C9",
  progressColor: "#242038",
  normalize: true,
  hideScrollbar: true,

});

and what that looks like... :/ enter image description here

Wavesurfer.js is a client-side library, so to get any of this to work, the waveform component is being loaded dynamically by next/dynamic.

const Waveform = dynamic(() => import('./Waveform'), {ssr: false})

Thee resulting functionality I am aiming for is rendering waveforms from external urls that I am getting from an external api, so having files downloaded to the public folder isn't really an option.

EDIT---

Just want to add that a basic html element is able to load and play audio from the same url that wavesurfer is getting blocked by cors from

-- thank you @juliomalves, for the suggestion to provide a mwe/reprex

stack blitz here thts broken i guess... codeSandbox
https://codesandbox.io/s/holy-firefly-i6pyzw?file=/src/components/Songs.tsx

or if you prefer to reproduce locally, git repo here -
https://github.com/heresy0-0y/wavesurfer-nextjs/tree/main/client

Answer 1

I ended up using cors-anywhere to proxy wavesurfers requests

https://github.com/Rob--W/cors-anywhere