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

Question

I am building a music-player application, where basically the user clicks the song they want and it plays the assigned music. However I am getting this error:

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

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

I am assuming I am getting this error because i imported the audio incorrectly in my application. This image shows the audio folder in my src file.

(when you open the file) ->

This is my code on 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>
    );
  };

Any idea on how to import audio in my application? How did I do it incorrectly?

(Ps english is my second language, if you need any clarification please let me know)

Best, -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"
    ]
  }
}

New Error Messages:

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

Your syntax is correct, so you've likely got the path wrong.

Be sure to include the file's extension for media assets ( .mp3 )

Based on your error message, it is looking for ./music inside your components directory, which likely isn't correct.

Delete import "./music"; and then import the specific MP3 files you need

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

Take a look at where your asset is in relation to the file that's importing it. If you're able to share more info about your projects directory structure, then I can help further.

---

Side note, I recommend setting up import aliases, so that you can import files from their absolute location. It will reduce confusion and be easier to manage.

How you do this depends on your type of project, but it's usually something like thin in your tsconfig.json or jsconfig.json

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

You'll then be able to import @/assets/my-tune.mp3 instead of ../../../assets/my-tune.mp3 , much simpler:)

Answer 2

enter image description here

Usage: Just create a file index.js in videos.

import videos from '~/assets/videos';

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