如何将音频导入我的 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>
    );
  };

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

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

最好的，-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 ，更简单:)

Answer 2

在此处输入图像描述

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

import videos from '~/assets/videos';

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