Search code examples
reactjsgithubdeploymenthttp-status-code-404vite

Sound effects from public folder failed to load in deployment

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

Solution

  • I fixed the 404 loading error. Reference code below:

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