MP3 Player

[sdetweil]

@bachoo786 can you please make a git repo of this.

[sdetweil]

@bachoo786 what shows in the developers window?

[bachoo786]

@sdetweil I will .

Nothing says everything is loaded including the mp3 player module.

[sdetweil]

@bachoo786 well, code and data don’t match

config.js

        musicPath: "modules/MMM-MP3Player/music",

defaults

    musicPath: "modules/MMM-MP3Player/music",

getDom()

    if (MP3.config.musicData) { (and other places) 

if you use the developers window you can step thru the code

[bachoo786]

@sdetweil here is the repo:

https://github.com/bachoo786/MMM-MP3Player

[sdetweil]

@bachoo786 you don’t set

if (MP3.config.musicData) {  anywhere..  so getDom() returns an empty div

I ‘assume’ you meant for the node_helper to send this back

but yours socketNotifcationReceived does this

    if(notification === "RETURNED_MUSIC")
      MP3.config.songs = payload.songs;  <---  songs is undefined, but musicData is there

[bachoo786]

@sdetweil so I made a mistake, i wanted my code to look for the mp3 files automatically in the folders within the music directory.

currently I am getting an error in the developer console:

Uncaught SyntaxError: Unexpected token ',' (at MMM-MP3Player.js:184:2)

its the “,” at the end of

return wrapper

I am trying to have one ‘music’ folder with subfolders for each artist containing their songs. This way, the module would display artists on the frontend, and clicking an artist’s name would show the songs in their folder, and click on the song would then play the mp3 file.

feel like giving up really even though I think I am close

[sdetweil]

@bachoo786 what did you change?

this is a missing } probably

[sdetweil]

@bachoo786 well, coding is a challenge sometimes

you changed the data coming back from the node helper

the code is looking for songs
but its a nested struct in musicData

so, fix the first thing (the socketNotificationReceived)
and then the code crashes later cause you are expecting the data in songs…

computers do things fast… they don’t know WHY they are doing it, so can’t ‘fix’ themselves

[bachoo786]

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