如何将音频导入我的 Create-React-App 应用程序？答案

【问题标题】：How can I import Audio into My Create-React-App application?如何将音频导入我的 Create-React-App 应用程序？
【发布时间】：2022-08-02 10:02:20
【问题描述】：

我正在构建一个音乐播放器应用程序，基本上用户单击他们想要的歌曲并播放分配的音乐。但是我收到此错误：

ERROR in ./src/components/MusicPlayer.js 7:0-17

Module not found: Error: Can\'t resolve \'./music\' in \'/Users/zpotatlises/Desktop/spotifly/src/components\'

我假设我收到此错误是因为我在我的应用程序中错误地导入了音频。此图像显示了我的 src 文件中的音频文件夹。

（当你打开文件时）->

这是我的代码音乐播放器.js：

import React, { Component,audio,useRef } from \'react\';
import \"./music\";

import house1 from \'./music/house1\';
import house2 from \'./music/house2\';
import house3 from \'./music/house3\';
import house4 from \'./music/house4\';

const data = [
    { imgSrc: \'house1.png\', audioSrc: house1 },
    { imgSrc: \'house2.png\', audioSrc: house2 },
    { imgSrc: \'house3.png\', audioSrc: house3 },
    { imgSrc: \'house4.png\', audioSrc: house4 },
  ];

  export default class MusicPlayer extends Component {
    render() {
      return (
        <div>
          <ol>
            {data.map(({ imgSrc, audioSrc }) => (
              <MediaComponent imgSrc={imgSrc} audioSrc={audioSrc} />
            ))}
          </ol>
        </div>
      );
    }
  }
  
  const MediaComponent = ({ imgSrc, audioSrc }) => {
    const audioRef = useRef(null);
    const toggleAudio = () =>
      audio.ref.current.paused
        ? audioRef.current.play()
        : audioRef.current.pause();
    return (
      <li>
        <img src={imgSrc} onClick={toggleAudio}/>
        <audio ref={audioRef} src={audioSrc} />
      </li>
    );
  };

关于如何在我的应用程序中导入音频的任何想法？我怎么做错了？

（P.s英语是我的第二语言，如果您需要任何澄清，请告诉我）

最好的， -Zpo

包.json：

{
  \"name\": \"spotifly\",
  \"version\": \"0.1.0\",
  \"private\": true,
  \"dependencies\": {
    \"@testing-library/jest-dom\": \"^5.16.4\",
    \"@testing-library/react\": \"^12.1.5\",
    \"@testing-library/user-event\": \"^13.5.0\",
    \"bootstrap\": \"^5.1.3\",
    \"navbar\": \"^2.1.0\",
    \"react\": \"^18.0.0\",
    \"react-audio-player\": \"^0.17.0\",
    \"react-bootstrap\": \"^2.2.3\",
    \"react-bootstrap-icons\": \"^1.8.1\",
    \"react-dom\": \"^18.0.0\",
    \"react-is\": \"^18.0.0\",
    \"react-router-dom\": \"^6.3.0\",
    \"react-scripts\": \"5.0.0\",
    \"web-vitals\": \"^2.1.4\"
  },
  \"scripts\": {
    \"start\": \"react-scripts start\",
    \"build\": \"react-scripts build\",
    \"test\": \"react-scripts test\",
    \"eject\": \"react-scripts eject\"
  },
  \"eslintConfig\": {
    \"extends\": [
      \"react-app\",
      \"react-app/jest\"
    ]
  },
  \"browserslist\": {
    \"production\": [
      \">0.2%\",
      \"not dead\",
      \"not op_mini all\"
    ],
    \"development\": [
      \"last 1 chrome version\",
      \"last 1 firefox version\",
      \"last 1 safari version\"
    ]
  }
}

新的错误信息：

ERROR in ./src/components/MusicPlayer.js 7:0-40

Module not found: Error: Can\'t resolve \'./music/house1.mp3\' in \'/Users/zpotatlises/Desktop/spotifly/src/components\'

ERROR in ./src/components/MusicPlayer.js 8:0-40

Module not found: Error: Can\'t resolve \'@/music/house2.mp3\' in \'/Users/zpotatlises/Desktop/spotifly/src/components\'

ERROR in ./src/components/MusicPlayer.js 9:0-48

Module not found: Error: You attempted to import ../../../assets/house3.mp3 which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project\'s node_modules/.

你得到的是正确的，所以它很可能只是一个不正确的相对文件路径
什么是正确的文件路径？
哈哈，好吧，如果没有看到您的文件结构，我无法告诉您。但是使用相对路径（../ 或 ../../../ 类型的东西）会让人感到困惑并可能导致错误，因此请考虑设置别名（如 @/assets/my-tune.mp3）
这是我尝试导入它时的文件路径，看起来它适用于寄存器。这就是你说的对吗？我在上面添加了图片
你能分享一下你的目录结构是什么样的吗？ IntelliSense 并不总是与 webpack 一样工作。您的音乐文件在您的components 目录中吗？因为那是它在寻找它的地方。

标签： javascript html reactjs audio create-react-app

【解决方案1】：

你的语法是正确的，所以你可能弄错了路径。

确保包含媒体资产的文件扩展名 (.mp3)

根据您的错误消息，它正在您的components 目录中查找./music，这可能不正确。

删除import "./music";，然后导入你需要的具体MP3文件

Can't resolve './music' in '/Users/zpotatlises/Desktop/spotifly/src/components'

查看您的资产相对于导入它的文件的位置。如果您能够分享有关您的项目目录结构的更多信息，那么我可以提供进一步的帮助。

旁注，我建议设置导入别名，以便您可以从它们的绝对位置导入文件。它将减少混乱并更易于管理。

你如何做到这一点取决于你的项目类型，但它通常在你的 tsconfig.json 或 jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

然后您就可以导入@/assets/my-tune.mp3 而不是../../../assets/my-tune.mp3，这要简单得多:)

【讨论】：

您是否建议将音乐添加到资产文件夹而不是音乐文件夹中？
它叫什么并不重要，但您可能不希望它在您的 components 目录中

【解决方案2】：

enter image description here

用法：只需在视频中创建一个文件 index.js。

import videos from '~/assets/videos';

function App() {
 return <video src={videos.video1} width={100} height={100} controls autoPlay/>
}

【讨论】：