Search code examples
javascriptreactjstypescriptaudiojsx

Cannot find module when importing MP3 files in React

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:

File tree

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

Solution

  • Hi Ksk this is probably an error of wrong file path. Please test you file path in a separate tab on browser(chrome preferably). Enter the URL in new tab or using inspect element open the URL in new tab and check if you are able to access the mp3 file.

    If the audio file gets played in the separate browser tab please share the file structure image.

    <------------------- new edit ------------------->

    Hi ksk to play an mp3 file or render an image in react you have to first import it as an alias and then at the path place you can use that alias. Take this example for clear understanding.

    import React, { Component } from ‘react’;
import soundfile from ‘../assets/alert.mp3’

    in the above the mp3 file is in a directory outside the code directory and then inside the assets folder. The .. operator is to move outside the current directory.

    once you import the mp3 file you can render it in the html syntax as

        export default class Alert extends Component {
render() {
 return (
   <Sound
   url={soundfile}
   playStatus={Sound.status.PLAYING}
   onLoading={this.handleSongLoading}
   onPlaying={this.handleSongPlaying}
   onFinishedPlaying={this.handleSongFinishedPlaying}
   />
  );
 }
}

    here this sample is using react-sound module you can also use the defualt html5 mp3 player and customize it according to your requirement.

    Now coming up to the image you have uploaded and assuming the code is in NeureCountNumberEquivalence.tsx and mp3 file as test.mp3 your import syntax would look like.

    import soundfile from ‘../neure-resources/test.mp3’

<audio controls>
  <source src={soundfile} type="audio/ogg">
  <source src={soundfile} type="audio/mpeg">
Your browser does not support the audio element.
</audio>

    That's it :p hope this one works out for you.

    For further reference you can use

    mp3 in react

    html5 audio component