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

【问题标题】：audio tag not working in ReactJS application deployed in AWS Amplify音频标签在 AWS Amplify 中部署的 ReactJS 应用程序中不起作用
【发布时间】：2021-03-27 19:48:16
【问题描述】：

我有一个部署在 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>

【问题讨论】：

嘿，面临同样的问题。你找到解决办法了吗？
还是没有@cluelesswaffle
我只能通过使用在线资源来处理它，即将 mp3 上传到 S3 存储桶上。
感谢您的想法。会尝试这样做

标签： html reactjs aws-amplify

【解决方案1】：

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

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

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

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

【讨论】：