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

Question

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

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

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

我最终遇到以下错误：

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

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

---

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

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

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

现在，虽然我对文件路径等不是非常精通。但我想通过查看指南和示例来弄清楚，但我没能做到。

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

学生/src/组件

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

components/my-app-folder/my-actual-app.tsx

components/my-resources/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

你可以做类似的事情

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

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

export default sound;

然后使用它

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

Answer 2

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

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

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

import React, { Component } from ‘react’;
import soundfile from ‘../assets/alert.mp3’

在上面的 mp3 文件位于 code 目录之外的目录中，然后在 assets 文件夹中。 .. 操作符是移出当前目录。

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

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

这里的示例使用 react-sound 模块，您也可以使用默认的 html5 mp3 播放器并根据您的要求对其进行自定义。

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

import soundfile from ‘../neure-resources/test.mp3’

<audio controls>
  <source src={soundfile} type="audio/ogg">
  <source src={soundfile} type="audio/mpeg">
Your browser does not support the audio element.
</audio>

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

为了进一步参考，您可以使用

mp3 in react

html5 audio component