How to do Cors configuration For AWS S3 Bucket to make it work on website?

In short:-

Issue on frontend:- Access to fetch at “ api” from origin “websiteurl” has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

Solution:-

Go to s3 console

• Permissions
• scroll to the CORS setting
• copy paste this:-

Backstory:- Recently, I just joined a new startup. The guy wanted me to make this speech annotation app on a website with react, so that user can annotate the timestamp regions and give a label for that.

Features:-

• Simple Audio player playing the url from API.
• Waveform from the Audio
• Drag and Drop on the waveform to make the region.
• Form — that appear on clicking the region.
• Label should appear on the region.
• Send a post request to the api.

Library used:-

• Wavesurfer.js — -> best library to make this, already had a very good example of Speech annotation on their website and code execution can be found on the github.

Time taken :- 2–3 days to make the prototype

Here how the app looks like:-

https://cdn.hashnode.com/res/hashnode/image/upload/v1618334570640/HJmw5I5ER.gif