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
6

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

7

Please share your site name @heyou88.

8

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()

9

Hiya @heyou88 :wave:t6:, 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.