音频标签在 AWS Amplify 中部署的 ReactJS 应用程序中不起作用

Question

我有一个部署在 AWS Amplify 中的 ReactJS 应用程序。该应用程序有两个 mp3 文件可以在某些条件下播放。它们在本地主机中工作正常，但在部署的本地主机中我听不到任何声音。有什么想法可能是错的吗？

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>

Answer 1

您需要将 mp3 文件扩展名添加到 Amplify 中应用程序的 URL 重写中。

在 Amplify 的应用程序主页中，单击应用程序设置下的“重写和重定向”。然后单击“编辑”并将 mp3 添加到重写规则中的扩展名列表中。

添加后它可能看起来像这样：

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