frontend s3 bucket access

Based on your screenshot, it appears you're having issues accessing audio files from your S3 bucket in your frontend application.

Even though you've turned off "Block public access" settings at the bucket level, there are several additional steps required to make your S3 objects publicly accessible:

1. Add a bucket policy: You need to create a bucket policy that explicitly grants public read access to your objects. Go to the "Permissions" tab in your S3 bucket, find the "Bucket policy" section, and add a policy similar to this (replacing "Your-Bucket-Name" with your actual bucket name):

{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject"
],
"Resource": [
"arn:aws:s3:::Your-Bucket-Name/*"
]
}
]
}

2. Check object ownership settings: If you're using "Bucket owner enforced" for object ownership, ACLs are disabled, and you'll need to rely solely on the bucket policy for permissions.

3. Verify object-level permissions: Ensure the specific audio files themselves don't have additional restrictions.

4. Check for account-level restrictions: Even if bucket-level public access is disabled, there might be account-level public access blocks in place.

If you're still experiencing issues after these steps, consider using pre-signed URLs or Amazon CloudFront as more secure alternatives for serving your audio files.
Sources
S3: is public access possible when Block all public access is on and object ownership is bucket owner enforced | AWS re:Post
How do I obtain a public access link for my S3 bucket resource? | AWS re:Post
Is my bucket publicly accessible? | AWS re:Post
Setting permissions for website access - Amazon Simple Storage Service