Full Source but issue with one line of JS code

JavaScript
1

Hi,

I download the full source of js music player - https://www.codingnepalweb.com/create-music-player-in-javascript/ and it works perfectly with the given files.

However when i tried to add my own music file name to music-list.js, it throws the error - script.js:190 Uncaught DOMException: Failed to execute ‘querySelector’ on ‘Element’: ‘#001THUDHITHUPAADIDA’ is not a valid selector. (note: i have mp3, images and related files in the proper folder)

Can someone help me how to fix it? My entire music-list.js is below

// To add more song, just copy the following code and paste inside the array

//   {
//     name: "Here is the music name",
//     artist: "Here is the artist name",
//     img: "image name here - remember img must be in .jpg formate and it's inside the images folder of this project folder",
//     src: "music name here - remember img must be in .mp3 formate and it's inside the songs folder of this project folder"
//   }

//paste it inside the array as more as you want music then you don't need to do any other thing

let allMusic = [
  {
    name: "001 THUDHITHU PAADIDA",
    artist: "Sarah Navroji",
    img: "music",
    src: "001THUDHITHUPAADIDA"
  },
   {
    name: "002 KOADA KODI STHOTHIRAM",
    artist: "Sarah Navroji",
    img: "music",
    src: "002KOADAKODISTHOTHIRAM"
  },
   {
    name: "003 AANANDHAMAI NAAMAE",
    artist: "Sarah Navroji",
    img: "music",
    src: "003AANANDHAMAINAAMAE"
  },
   {
    name: "004INAIYILLANAAMAM",
    artist: "Sarah Navroji",
    img: "music",
    src: "004INAIYILLANAAMAM"
  },
  {
    name: "005 YESUVAI THUDHIYUNGAL",
    artist: "Sarah Navroji",
    img: "music",
    src: "005YESUVAITHUDHIYUNGAL"
  },
  // like this paste it and remember to give comma after ending of this bracket }
  // {
  //   name: "Here is the music name",
  //   artist: "Here is the artist name",
  //   img: "image name here - remember img must be in .jpg formate and it's inside the images folder of this project folder",
  //   src: "music name here - remember img must be in .mp3 formate and it's inside the songs folder of this project folder"
  // }
];

Thanks

2

I don’t think there should be a comma after the final piece of music. I don’t know if this is the cause of your problem or not though. I think it should be:

    <SNIP>
name: "004INAIYILLANAAMAM",
    artist: "Sarah Navroji",
    img: "music",
    src: "004INAIYILLANAAMAM"
  },
  {
    name: "005 YESUVAI THUDHIYUNGAL",
    artist: "Sarah Navroji",
    img: "music",
    src: "005YESUVAITHUDHIYUNGAL"
  }
  // like this paste it and remember to give comma after ending of this bracket }
  // {
  //   name: "Here is the music name",
  //   artist: "Here is the artist name",
  //   img: "image name here - remember img must be in .jpg formate and it's inside the images folder of this project folder",
  //   src: "music name here - remember img must be in .mp3 formate and it's inside the songs folder of this project folder"
  // }
];
3

If the above comma issue does not solve it I wonder if the issue is to do with paths. Is your music in the same folder as the music supplied with the code?

(btw - welcome to Sitepoint)

1 Like
4

@wake689 The leading digits in the src attribute caused the issue. After removing the digits from the src attribute in the music-list.js the problem gets resolved. However it list only few songs when i had 1000 songs in my folder i.e music-list.js and files as well. No errors but looks some logic is pretending to load all of them. can you please help is there a way how to fix it? i suspect it was due to some logic in the js file

5

I’m sorry, I’m afraid I don’t know much beyond the very basics about javascript. But if you post all the code someone may be able to help.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.