MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    MP3 Player

    Scheduled Pinned Locked Moved Development
    58 Posts 4 Posters 4.3k Views 3 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • S Away
      sdetweil @bachoo786
      last edited by

      @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

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      1 Reply Last reply Reply Quote 0
      • B Offline
        bachoo786 @bachoo786
        last edited by 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);
              });
        
        S 2 Replies Last reply Reply Quote 0
        • S Away
          sdetweil @bachoo786
          last edited by

          @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

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          1 Reply Last reply Reply Quote 0
          • S Away
            sdetweil @bachoo786
            last edited by

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

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            B 1 Reply Last reply Reply Quote 0
            • B Offline
              bachoo786 @sdetweil
              last edited by

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

              S 1 Reply Last reply Reply Quote 0
              • S Away
                sdetweil @bachoo786
                last edited by 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

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                1 Reply Last reply Reply Quote 0
                • 1
                • 2
                • 3
                • 4
                • 5
                • 6
                • 6 / 6
                • First post
                  Last post
                Enjoying MagicMirror? Please consider a donation!
                MagicMirror created by Michael Teeuw.
                Forum managed by Sam, technical setup by Karsten.
                This forum is using NodeBB as its core | Contributors
                Contact | Privacy Policy