I am working on a Music Player project only using HTML, CSS, and JavaScript. My app will have some sample music and the user would be able to play any of those songs.

Here is the folder structure of my music player app:

> front-end
    > assets
        > cover-photo
        > logo
        > song-covers
        > songs
            > song1.mp3
            > song2.mp3
        > styles
            > style.css
    > src
        > components
            > initializeModifySongs.js
        > main.js
    > index.html

Here is how I am using the script tag in html to connect my JavaScript to the app.

<script type="module" src="./src/main.js" defer></script>

Below is the code from initializeModifySongsArray.js module.

let songs = null;

songs = [
  {songName: "Miles Above You", singer: "Jesse Warren", album: "BreakingCopyright.com", mp3Path: "../../assets/songs/Jesse Warren - Miles Above You (BreakingCopyright.com).mp3", coverPath: "../../assets/song-covers/BreakingCopyright_Logo_White_BG.png"},
  {songName: "Rise", singer: "Tubebackr", album: "BreakingCopyright.com", mp3Path: "../../assets/songs/tubebackr - Rise (BreakingCopyright.com).mp3", coverPath: "../../assets/song-covers/BreakingCopyright_Logo_White_BG.png"}
];

const loadSongsArrayElementsMetadata = async () => {
  songs.forEach((individualSongElement) => {
    let individualSongElementObject = new Audio(individualSongElement.mp3Path);

    individualSongElement.durationInSeconds = individualSongElementObject.duration;
  });
};

export { loadSongsArrayElementsMetadata };

Below is the code from main.js

import { loadSongsArrayElementsMetadata, accessSongsArray } from './components/initializeModifySongsArray.js';

document.addEventListener('DOMContentLoaded', async () => {
  console.log('DOMContentLoaded.');

  await loadSongsArrayElementsMetadata();
});

Now, the problem that I am facing is that when I am running the app, the browser is not detecting the “songs” and “song-covers” directories inside “assets” directory in my app’s folder structure. Below is a screenshot of the same.

Folder structure as visible inside Chrome Browser Developer Tools > Sources > Page

Since browser is not able to locate the directory with the .mp3 files, I am getting the following error message.

GET http://127.0.0.1:5500/assets/songs/Jesse%20Warren%20-%20Miles%20Above%20You%20(BreakingCopyright.com).mp3 404 (Not Found)    index3.html:342 
        
GET http://127.0.0.1:5500/assets/songs/tubebackr%20-%20Rise%20(BreakingCopyright.com).mp3 404 (Not Found)    index3.html:342

Below is a screenshot of the above error message.

Error message in the Chrome Browser Developer Tools > Console

Kindly help how can I resolve this?