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.
    • B Offline
      bachoo786 @sdetweil
      last edited by 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

      S B 3 Replies Last reply Reply Quote 0
      • S Away
        sdetweil @bachoo786
        last edited by

        @bachoo786 what did you change?

        this is a missing } probably

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