EDIT: How to import MP3 files in React app

Question

UPDATE The problem lied with my lack of knowledge in the environment I was working on but the answers given below should be useful for others with similar problems.

EDIT: As it seems the problem is that there's something funky going on with trying to import my mp3 to my React app/component. The current issues is that when I try to use:

import soundfile from "../neure-resources/test.mp3"

I end up with an error of:

"Cannot find module "../neure-resources/test.mp3"

Solving this issue for any other import of an component would be to make sure that the component that is being imported has also been defined to be exportable but how would one go about doing this to an MP3-file?

---

So to start with I'm not sure if my problem has to do with importing/linking my mp3 file OR with how to play audio clips in React (or something else). I will edit the title once we figure out what my issue exactly is.

So I have an app where I have a button on the web page that the user can push to play a mp3-file. Simple stuff but I'm running constantly into the following error:

HTTP load failed with status 404. Load of media resource "..." failed.

Now while I am not super proficient in file paths etc. I'd figure by looking at guides and examples I could figure it out, but I haven't been able to.

My abbreviated file structure is something like (check bottom of post for more detailed description):

student/src/components

and under components I have my actual app in a folder and another folder under components where I planned to store my "resources" so:

components/my-app-folder/my-actual-app.tsx

components/my-resources/my.mp3

For the filepath as I understood

".."

signifies for the path to start from one folder above the current location which would be my

"/components" -folder

and my resources folder is under the component folder so I figured that should be fine. I looked up a few other SO questions about playing audio in React and found a question that suggested roughly the following:

Inside my

render()

let path = "../my-resources/test.mp3";
let audio = new Audio(path);

And then for the JSX part:

audioPlayer = (
            <div className="count-number-equivelance-audioPlayer">
                <button id="equivalence-audio-button" onClick={() => audio.play()}>Soundclip!</button>
            </div>
        ); 

I've tried:

let path = "../my-resources/test.mp3";

and

let path = "../../my-resources/test.mp3";

as I wasn't sure if one ".." pointed to the folder the actual app was nested in and required another ".." to actual point at the "components" folder but both of them produce the same error. I also tried using the whole path and moving the mp3 around to the same folder as the app itself but got the same result.

So I am thoroughly confused as to if I just suck at using external resources in my app or is my actual code and/or knowledge of React to blame here. The error I receive would lead me to believe that the resource isn't being located properly but I'm not sure if that's just a side effect of faulty code.

EDIT: I'm also working in a virtual environment, running my own stack locally if that makes some difference to the situation.

Also for reference a picture of the file tree:

The files opened in the picture contain the app in question and the resource it's trying to use:

The path leading up to components is the following (pic would be really big if I tried to grab the whole path in one picture).

/Users/"name of user"/arvio/client/student/src/components

Answer 1

You can do something like

import React from "react";
const pokemon = require("./pokemon.mp3");

const sound = () => <audio src={pokemon} autoPlay />;

export default sound;

and then use it

import Soundify from "./soundify";
<Soundify />

Answer 2

Inside the src/react-app-env.d.ts add this:

/// <reference types="react-scripts" />
declare module '*.mp3'; // '*.wav' if you're using wav format

Now you can use it like this:

import beep from './assets/beep.mp3';

const alarm = new Audio(beep);

By default, TypeScript won't allow you to import an audio file, so you need to declare it yourself.

This file react-app-env.d.ts references TypeScript types declarations that are specific to projects started with Create React App. By default, it only adds support for importing bmp, gif, jpeg, jpg, png, webp, and svg.