如何將音頻導入我的 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/>
}