Failed when fetching local mp3 files

[Julian-Yen]

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

[gregraven]

These are the errors I get when visiting your page:

[Julian-Yen]

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.

[gregraven]

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

[Julian-Yen]

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.

[heyou88]

hi, i have the same problem on my own, how did you solve it? how do i know the difference of filename and folder structure on netilfy ? thanks

[hrishikesh]

Please share your site name @heyou88.

[heyou88]

it was solved by replacing
const audio = new Audio(required(‘…/assets/sound.mp3’))
audio.play()

with:

import sound from ‘…/assets/sound.mp3’
const audio = new Audio(sound)
audio.play()

[SamO]

Hiya @heyou88 , welcome to the forums! Thanks for coming back and letting us know what worked for you. This will help other forum users debug in the future. We appreciate your help.