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