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

Question

更新问题在于我对我正在处理的环境缺乏了解，但下面给出的答案应该对其他有类似问题的人有用。

编辑：似乎问题在于尝试将我的 mp3 导入到我的 React 应用程序/组件时发生了一些奇怪的事情。当前的问题是，当我尝试使用时：

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

我最终得到一个错误：

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

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

---

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

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

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

现在虽然我不是非常精通文件路径等。我会通过查看指南和示例来弄清楚我可以弄清楚，但我一直无法做到。

我的缩写文件结构类似于（查看帖子底部以获得更详细的描述）：

学生/源代码/组件

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

组件/我的应用程序文件夹/我的实际应用程序.tsx

组件/我的资源/my.mp3

对于我理解的文件路径

“..”

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

"/components" - 文件夹

我的资源文件夹在组件文件夹下，所以我认为应该没问题。我查了一些其他关于在 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

Answer 1

在里面src/react-app-env.d.ts添加这个：

/// <reference types="react-scripts" />
declare module '*.mp3'; // '*.wav' if you're using wav format

现在你可以像这样使用它：

import beep from './assets/beep.mp3';

const alarm = new Audio(beep);

默认情况下，TypeScript 不允许您导入音频文件，因此您需要自己声明。

此文件react-app-env.d.ts引用特定于使用 Create React App 启动的项目的 TypeScript 类型声明。默认情况下，它仅添加对导入 bmp、gif、jpeg、jpg、png、webp 和 svg 的支持。

Answer 2

你可以做类似的事情

import React from "react";
const pokemon = require("./pokemon.mp3");

const sound = () => <audio src={pokemon} autoPlay />;

export default sound;

然后使用它

import Soundify from "./soundify";
<Soundify />

Answer 3

您好，Ksk，这可能是文件路径错误的错误。请在浏览器（最好是 Chrome）上的单独选项卡中测试您的文件路径。在新选项卡中输入 URL 或使用检查元素在新选项卡中打开 URL 并检查是否能够访问 mp3 文件。

\n\n

如果音频文件在单独的浏览器选项卡中播放，请共享文件结构图像。

\n\n

<-------------------- 新编辑 ------------------>

\n\n

您好，ksk 要在 React 中播放 mp3 文件或渲染图像，您必须首先将其作为别名导入，然后在可以使用该别名的路径位置。为了清楚地理解这个例子。

\n\n

import React, { Component } from \xe2\x80\x98react\xe2\x80\x99;\nimport soundfile from \xe2\x80\x98../assets/alert.mp3\xe2\x80\x99\n

\n\n

上面的 mp3 文件位于代码目录之外的目录中，然后位于 asset 文件夹内。.. 运算符用于移出当前目录。

\n\n

导入 mp3 文件后，您可以将其以 html 语法呈现为

\n\n

    export default class Alert extends Component {\nrender() {\n return (\n   <Sound\n   url={soundfile}\n   playStatus={Sound.status.PLAYING}\n   onLoading={this.handleSongLoading}\n   onPlaying={this.handleSongPlaying}\n   onFinishedPlaying={this.handleSongFinishedPlaying}\n   />\n  );\n }\n}\n

\n\n

这里这个示例使用了react-sound模块，你也可以使用默认的html5 mp3播放器并根据你的要求定制它。

\n\n

现在来看看您上传的图像，并假设代码位于 NeureCountNumberEquivalence.tsx 中，并且 mp3 文件为 test.mp3，您的导入语法如下所示。

\n\n

import soundfile from \xe2\x80\x98../neure-resources/test.mp3\xe2\x80\x99\n\n<audio controls>\n  <source src={soundfile} type="audio/ogg">\n  <source src={soundfile} type="audio/mpeg">\nYour browser does not support the audio element.\n</audio>\n

\n\n

就是这样：希望这对你有用。

\n\n

如需进一步参考，您可以使用

\n\n

反应中的mp3

\n\n

html5音频组件

\n