Question 88727 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Sound effects from public folder failed to load in deployment – Reactjs

As the title suggests, I deployed my site but it fails to load the sound effects.

Repo:https://github.com/SyntaxWarrior30/Documentation-Wizard/tree/2bea2b4781933f29f773b4fec52a806c31bcec70

Active Site: https://syntaxwarrior30.github.io/Documentation-Wizard/

This is how I try to load the sound effects from the public folder, in src/DocsGen.jsx:

DocsGen.jsx
Line 30 | const successAudio = new Audio('/public/Success.wav');
Line 31 | const errorAudio = new Audio('/public/Error.wav');

I have also tried:

DocsGen.jsx
Line 30 | const successAudio = new Audio('/Success.wav');
Line 31 | const errorAudio = new Audio('/Error.wav');

Both resulted in Failed to load resource: the server responded with a status of 404 () in console

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I fixed the 404 loading error. Reference code below:

      const successAudio = new Audio('./Success.wav');
  const errorAudio = new Audio('./Error.wav');

  2. 0

    Public folder is a special folder in react which is outside of the scope of react bundle.

    To use assets inside public folder you just directly reference them.

    const successAudio = new Audio(‘/Success.wav’);

    const errorAudio = new Audio(‘/Error.wav’);

    Here is a relevant thread: How to import and play all audio files from a directory in React?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search