Failed when fetching local mp3 files

Support
, ,
#1

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:

image
image870×198 13.1 KB

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

#2

These are the errors I get when visiting your page:

Screen Shot 2021-03-18 at 5.12.31 AM
Screen Shot 2021-03-18 at 5.12.31 AM1604×88 25.4 KB

#3

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.

#4

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

#5

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