audio tag not working in ReactJS application deployed in AWS Amplify

user_7208376 0
Viewed 336

I have a ReactJS application that is deployed in AWS Amplify. The application has two mp3 files to play on certain conditions. They work fine in the localhost but in the deployed one I can't hear anything. Any ideas what could be wrong?

import ErrorSound from "../../assets/sounds/error.mp3";
import SuccessSound from "../../assets/sounds/success.mp3";

<audio controls={false} autoPlay>
    <source src={props.correct ? SuccessSound : ErrorSound} type="audio/mpeg" />
</audio>
aws-amplify reactjs html
1 Answers

You need to add an mp3 file extension to your application's URL rewrites in Amplify.

In your app's homepage in Amplify click on 'Rewrites and redirects' under App Settings. Then click edit and add mp3 to the list of extensions in your rewrite rule.

It'll probably look something like this after you add it:

</^[^.]+$|\.(?!(css|gif|ico|jpg|jpeg|js|png|mp3|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
user_136630740
Related