Javascript Question posted in
A very good W3school tutorial can be found here.

Directory with static files not being detected by browser in JavaScript based web-app

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?

Tags:

2

Answers


  1. 0

    The screenshot of your folder structure suggests that the URL should be

    http://127.0.0.1:5500/app/front-end/assets/songs/...

    Don’t start mp3Path with ../../assets/songs/, but just ./assets/songs/ – it needs to be relative to index.html, not to main.js.

    Login or Signup to reply.
  2. 0

    Your browser does not detect the files or folders on your server. It is your server that attempts to find them at the location where the browser specifies.

    When you refer to things like

    ../../assets/song-covers/BreakingCopyright_Logo_White_BG.png

    in your browser, then this means that relative to the basepath, the server should try and reach a png file in the assets subfolder of the grandparent of the basepath and inside of it, the song-covers and inside of it the said file.

    Assuming that your path of

    ./src/main.js

    works, which would mean that main.js is successfully loaded, your basepath is pointing to your front-end folder and assets is a subfolder of your front-end folder, rather than a subfolder of its grandparent.

    So you will need a path of assets/song-covers/BreakingCopyright_Logo_White_BG.png instead of a path of ../../assets/song-covers/BreakingCopyright_Logo_White_BG.png and the same pattern needs to be applied to your other paths.

    This should fix one of your issues. But you may have further issues, so you will need to kindly double-check your folder structure, privileges and webserver configuration too.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search