html - 音频标签在 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

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

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

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

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