编辑：如何在React应用程序中导入MP3文件

更新该问题归因于我在工作的环境中缺乏知识，但以下给出的答案对于遇到类似问题的其他人应该是有用的。

编辑：似乎问题在于尝试将mp3导入我的React应用程序/组件时有些时髦。当前的问题是，当我尝试使用时：

import soundfile from "../neure-resources/test.mp3"

我最终出现以下错误：

“找不到模块“ ../neure-resources/test.mp3”

解决任何其他导入组件的问题，就是要确保要导入的组件也已定义为可导出，但是如何对MP3文件执行此操作呢？

---

因此，首先我不确定我的问题是否与导入/链接mp3文件有关，或者与如何在React中播放音频剪辑（或其他问题）有关。一旦弄清楚我的问题是什么，我将编辑标题。

因此，我有一个应用程序，在网页上有一个按钮，用户可以按此按钮来播放mp3文件。简单的东西，但我经常遇到以下错误：

HTTP加载失败，状态为404。媒体资源“ ...”的加载失败。

现在，尽管我对文件路径等不是很精通。但我可以通过查看指南和示例来弄清楚，但我一直无法做到。

我的缩写文件结构类似（有关详细说明，请参见文章底部）：

学生/ src /组件

在组件下，我的实际应用程序放在一个文件夹中，而在我计划存储“资源”的组件下，还有另一个文件夹，因此：

组件/my-app-folder/my-actual-app.tsx

组件/my-resources/my.mp3

对于我理解的文件路径

“ ..”

表示从当前位置上方的一个文件夹开始的路径，这将是我的

“ / components”-文件夹

我的资源文件夹位于component文件夹下，所以我认为应该没问题。我查询了有关在React中播放音频的其他一些SO问题，发现了一个大致建议以下问题的问题：

在我的内心

render()

let path = "../my-resources/test.mp3";
let audio = new Audio(path);

然后对于JSX部分：

audioPlayer = (
            <div className="count-number-equivelance-audioPlayer">
                <button id="equivalence-audio-button" onClick={() => audio.play()}>Soundclip!</button>
            </div>
        ); 

我试过了：

let path = "../my-resources/test.mp3";

和

let path = "../../my-resources/test.mp3";

因为我不确定一个“ ..”是否指向实际应用程序所在的文件夹，并需要另一个“ ..”指向“ components”文件夹中的实际位置，但是它们都产生相同的错误。我还尝试使用整个路径并将mp3移至与应用程序本身相同的文件夹中，但结果相同。

因此，对于我是否只是在应用程序中使用外部资源感到困惑，还是我的实际代码和/或对React的知识应归咎于此，我感到非常困惑。我收到的错误会让我相信资源放置不正确，但是我不确定这是否只是错误代码的副作用。

编辑：我也在虚拟环境中工作，如果这会改变情况，则在本地运行我自己的堆栈。

还可以参考文件树的图片：

图片中打开的文件包含有问题的应用程序及其正在尝试使用的资源：

通往组件的路径如下（如果我尝试在一幅图中抓住整个路径，图片将非常大）。

/ Users /“用户名” / arvio / client / student / src / components