MP3 Player

bachoo786

I changed from this:

if (MP3.config.musicData) {
        const musicList = MP3.createElement("ul", "musicList", "musicList");

        MP3.config.musicData.forEach(folderData => {
            // Folder item
            const folderItem = MP3.createElement("li", "folderItem", `folderItem-${folderData.folderName}`);
            folderItem.innerHTML = `
                <span class="folderName">${folderData.folderName}</span>
                <i class="fa fa-chevron-down"></i> 
            `; 

            // Songs list within the folder
            const songsList = MP3.createElement("ul", "songsList", `songsList-${folderData.folderName}`);
            songsList.style.display = 'none'; // Initially hide the songs list

            folderData.songs.forEach(song => {
                const songItem = MP3.createElement("li", "songItem", `songItem-${song}`);
                songItem.innerHTML = song.substr(0, song.length - 4); 
                songsList.appendChild(songItem);
            });

            // Click event listeners
            folderItem.addEventListener('click', () => {
                songsList.style.display = songsList.style.display === 'none' ? 'block' : 'none'; // Toggle display
                folderItem.querySelector('.fa').classList.toggle('fa-chevron-down');
                folderItem.querySelector('.fa').classList.toggle('fa-chevron-up');
            });

            songsList.addEventListener('click', (event) => {
                const clickedSongItem = event.target;
                if (clickedSongItem.classList.contains('songItem')) {
                    const songName = clickedSongItem.innerText;
                    const folderName = folderData.folderName;
                    MP3.playSong(folderName, songName);
                }
            });

            folderItem.appendChild(songsList);
            musicList.appendChild(folderItem);
        });

to this:

if (MP3.config.musicData) {
   const fs = require('fs');
   const path = require('path');

   const musicFolder = path.resolve(MP3.config.musicData.musicPath);
   const supportedExtensions = this.defaults.extensions; // Use module's default extensions

   fs.readdir(musicFolder, (err, files) => {
    if (err) {
     console.error("Error reading music directory:", err);
     // Handle the error - display message to user, etc. 
    } else {
     const musicFiles = files.filter(file => supportedExtensions.includes(path.extname(file).toLowerCase()));

     if (musicFiles.length > 0) {
      const musicList = MP3.createElement("ul", "musicList");

      musicFiles.forEach(musicFile => {
       const songItem = MP3.createElement('li', 'songItem');
       songItem.innerHTML = musicFile.substr(0, musicFile.length - 4); 
       songItem.addEventListener('click', () => {
        MP3.playSong(musicFile); // Assuming you want to play the song directly
       });
       musicList.appendChild(songItem);
      });

sdetweil

@bachoo786 you could say, I have updated the repo, git pull to get the changes…

you need to
git add,
git commit -m and
git push
to update the repo

sdetweil

@bachoo786 said in MP3 Player:

fs.readdir(musicFolder, (err, files) => {

the modulename.js that runs in the browser cannot read files directly, due to security restrictions ( any script could read ALL your files without you knowing)

this is why the node_helper exists…

bachoo786

@sdetweil said in MP3 Player:

@bachoo786 said in MP3 Player:

fs.readdir(musicFolder, (err, files) => {

the modulename.js that runs in the browser cannot read files directly, due to security restrictions ( any script could read ALL your files without you knowing)

this is why the node_helper exists…

so whats the alternative? I had this MMM-QuranPlayer module that was able to read mp3 files from the folders in the “public” directory which was located in the root folder of the module.

sdetweil

@bachoo786 I’m pretty sure the module used a node_helper

now if you make it a url, then you can fetch it thru the browser… but the server side is actually reading the file

but you could make it a file url

file:///server/path to file

in MagicMirror the server home folder is the MagicMirror folder

BiaGen

Hey @bachoo786, I’ve been following your progress with the folder nesting—it’s a tricky bit of logic to get right in the node_helper, but it’ll be worth it for the cleaner UI!
One thing I noticed while setting up my own music module is that the player looks a lot better if the MP3 metadata (ID3 tags) is actually clean. If the tags are messy, the ‘Artist’ and ‘Title’ fields on the mirror usually end up looking like a jumble of underscores and file extensions.
Since you’re organizing a big library right now, I’ve been using https://editmp3tags.com/ to quickly fix the tags in the browser before dropping them into the music folder. It’s way faster than using a heavy desktop app and helps the module display everything correctly once you get that ‘better method’ logic sorted out.