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,
});
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
I ended up using cors-anywhere to proxy wavesurfers requests