Failed when fetching local mp3 files

Hello, I’ve ran into an issue when trying to fetch mp3 files into my page and use it with Web Audio API. Here is my code snippet:

//   saved the filenames into sounds.js and loaded it

       for (let i = 0; i < sounds.length; i++) { 
        var filename = sounds[i]['path'];
        console.log(filename);
        let audio;

        fetch(filename)
          .then((data) => data.arrayBuffer())
          .then((arrayBuffer) => audioContext.decodeAudioData(arrayBuffer))
          .then((decodeAudio) => {
            audio = decodeAudio;
          })

      }

The code worked for my local server, but on netlify it gave errors as below:

here’s the link to my test-site, thank you in advance for helping out.
https://elegant-galileo-9ac50d.netlify.app/paths.html

These are the errors I get when visiting your page:

Thanks. I think the second error is just looking for a .catch() in my fetch code. But still unsure how to avoid the 404 error.

You either have to put that asset at that path, or change the path to point to where the assets exists.

Thanks so much for the response! Realized I made a beginner’s mistake here, I forgot that the build version running on Netlify has a different filename and folder structure as what I had locally.

1 Like