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.

[Hiba550]

It sounds like you're facing an issue where certain audio files are not being loaded correctly on your GitHub Pages site, despite working fine locally. Here are a few potential reasons for the problem and possible solutions:

1. Case Sensitivity in File Paths

GitHub Pages is hosted on a Linux-based system, which is case-sensitive. Ensure that the file names and directory names in your JSON file exactly match the actual file names on disk, including capitalization. For example, if your JSON specifies threat_music/LF/TH_LF - KICK.mp3, but the actual file is named threat_music/lf/TH_LF - KICK.mp3 or threat_music/LF/TH_LF - kick.mp3, it will not load.

Solution: Double-check the case of all directories and file names in your JSON and make sure they match exactly.

2. Special Characters and Spaces in File Paths

Spaces and special characters in file names can sometimes cause issues. While spaces are generally supported, they should be encoded as %20 in URLs to ensure they are properly recognized.

Solution: Replace spaces in your JSON paths with %20. For example, change "threat_music/LF/TH_LF - KICK.mp3" to "threat_music/LF/TH_LF%20-%20KICK.mp3".

3. GitHub Pages Cache and Deployment

Sometimes, GitHub Pages may cache files or not update immediately after a push, leading to 404 errors for newly added or updated files.

Solution: Try clearing your browser cache or doing a hard refresh (Ctrl + F5) to ensure you're loading the latest version of the page. You can also try renaming the files and updating the references in your JSON to force GitHub Pages to recognize them as new files.

4. File Availability and Syncing

Ensure that all files are properly pushed to your GitHub repository. Sometimes, certain files might be missing from the repository due to a failed commit or push.

Solution: Go to your GitHub repository and manually verify that all the required audio files are present in the expected directories (LF and HF). If any files are missing, add them and commit the changes.

5. GitHub Pages URL Encoding

URLs on GitHub Pages may require specific encoding, especially if you have spaces or special characters. Ensure that the URLs are correctly encoded in your JSON.

6. Check Repository and Page Links

If the issue persists, please provide the link to your repository and GitHub Pages so I can take a closer look at what might be going wrong.

[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.