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

Question

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

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 文件中的音频文件夹。

（打开文件时）->

这是我在 MusicPlayer.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

Package.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/.

Answer 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，简单得多:)

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

How can I import Audio into My Create-React-App application?

javascript

html

reactjs

audio

create-react-app