I am running into a very strange error that I am not able to solve after hours and hours.

Let me put it in context:
I have a nextjs application, a bucket in s3 where I store mp3 files and the idea is to play that audio in front end (cors rules in aws are well configured).

Playing the audio in front from s3 works correctly, the problem comes here:

That audio playback I want to animate it, because I have searched more than 5 libraries for this and every time I put them I get the same error when trying to play the audio: MediaElementAudioSource outputs zeroes due to cors access restrictions for [aws link].


I don't understand why using any library causes this.

To see more visual:

This works:

<audio id="audio-element"
                    src="https:/(URLBUCKET).amazonaws.com/dasdasdw"
                    autoPlay
                >

but when i combined with some lib like:

  <><audio id="audio-element"
                    src="https://amazonBUCKETURL/Sdsad"
                    autoPlay
                >
                </audio><AudioSpectrum
                        id="audio-canvas"
                        height={200}
                        width={300}
                        audioId={'audio-element'}
                        capColor={'red'}
                        capHeight={2}
                        meterWidth={2}
                        meterCount={512}
                        meterColor={[
                            { stop: 0, color: '#f00' },
                            { stop: 0.5, color: '#0CD7FD' },
                            { stop: 1, color: 'red' }
                        ]}
                        gap={4} /></>
              
            )

stop working and appears error cors.

What can i do?