Expiriencing a Very Strange Issue with GithHub Pages Failing to Load Local Audio Assets

[Rotwall72]

Select Topic Area

Question

Body

I'm developing a webpage which is essentially a soundboard-site. I have a folder storing all of the audio files used by the page, which are being referenced by a json file with this type of pathing:

"threat_music/REGION/TH_REGION - SOUND.mp3"

Everything works totally fine locally on my computer when fetching the audio, but on the github page, while in a firefox browser, these two types of paths refuse to load their assets at all:

"threat_music/LF/TH_LF - SOUND.mp3"
"threat_music/HF/TH_HF - SOUND.mp3"

Here's exactly what's happening in the webpage:
The user is greeted by a drop down selector and has a list of names to choose from. When the user presses a button after choosing a name, the page goes through the .json file to fetch the src of each audio file belonging to that name. In this case, let's say the user chose "Farm Arrays" within the selector.

fetch("regions.json").then((data) => {return data.json();})
    .then((regionData) => {
       regionData[index].layers.forEach((layer) => {
          // creating audio elements with this data and pushing it into an array
          regionThreatLayers.push(new Audio(layer[1]));
       });
    }

This is what an item in the json file looks like:

{
  "name": "Farm Arrays",
  "layers": [
      ["Kick", "threat_music/LF/TH_LF - KICK.mp3"],
      ["Shaker", "threat_music/LF/TH_LF - SHAKER.mp3"],
      ["Perc 1", "threat_music/LF/TH_LF - PERC1.mp3"],
      ["Bass", "threat_music/LF/TH_LF - BASS.mp3"],
      ["Snare", "threat_music/LF/TH_LF - SNARE.mp3"],
      ["Perc 2", "threat_music/LF/TH_LF - PERC2.mp3"],
      ["Arps", "threat_music/LF/TH_LF - ARPS.mp3"],
      ["Noise", "threat_music/LF/TH_LF - NOISE.mp3"]
  ]
}

The paths used to fetch these audio files in the json file are correct and, like I said, are only causing issues when being hosted on the github page. If you go onto the page and select anything other than "Farm Arrays" or "Rubicon" it will work just fine. These two names are the only exceptions.

The error messages don't help much since they're all just "404" and "NS_BINDING_ABORTED". I asked chatGPT for some solutions and tried them, which included checking file paths, encoding spaces, and cache issues, all to no avail. The audio files in the LF and HF folders never load, but audio files in other folders always do. I really have no idea what could be causing this to happen, and would love to just know the reason behind it.

Here's the link to the page's GitHub Repository as well as the page itself in case you want to take a closer look at what's going on here.

[LiteBrite82]

Try adding a .nojekyll file to the repo, then re-deploy.

[github-actions[bot]]

🕒 Discussion Activity Reminder 🕒

This Discussion has been labeled as dormant by an automated system for having no activity in the last 60 days. Please consider one the following actions:

1️⃣ Close as Out of Date: If the topic is no longer relevant, close the Discussion as out of date at the bottom of the page.

2️⃣ Provide More Information: Share additional details or context — or let the community know if you've found a solution on your own.

3️⃣ Mark a Reply as Answer: If your question has been answered by a reply, mark the most helpful reply as the solution.

Note: This dormant notification will only apply to Discussions with the Question label. To learn more, see our recent announcement.

Thank you for helping bring this Discussion to a resolution! 💬

[Rotwall72]

I've since just resorted to using netlify to host my site instead of github pages. Works flawlessly.