• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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 9.2k 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 Apr 19, 2024, 1:00 PM

    @sdetweil sorry to mess with your head but I have been working on this for the last 3 hours and have come up with the following that should show the folders on the front end and when any folder is clicked it should reveal the mp3 files. the issue I am facing is that I am having no errors whatsoever but the module will just not show on the front end. I am pulling my hair out now !

    these are my files:

    node_helper.js:

    var NodeHelper = require('node_helper');
    const Fs = require('fs');
    
    module.exports = NodeHelper.create({
        start: function() {
            console.log("Loaded MP3Player node_helper");
        },
    
        socketNotificationReceived: function(notification, payload) {
            var self = this;
            if (notification === 'SOURCE_MUSIC') {
                const musicPath = payload.musicPath;
                const extensions = payload.extensions;
    
                Fs.readdir(musicPath, (err, folders) => {
                    if (err) {
                        console.error("Error reading music directory:", err);
                        self.sendSocketNotification('ERROR', {message: "Error reading music directory"});
                    } else {
                        const musicData = folders.map(folder => ({
                            folderName: folder,
                            songs: Fs.readdirSync(`${musicPath}/${folder}`).filter(file => self.checkExt(file, extensions))
                        }));
                        self.sendSocketNotification("RETURNED_MUSIC", { musicData: musicData }); 
                    }
                });
            }
        },
    
        checkExt: function(file, ext) {
            return ext.some(extension => file.toLowerCase().endsWith(extension)); 
        }
    });
    

    MMM-MP3Player.js:

    var MP3;
    var substr;
    Module.register("MMM-MP3Player", {
      defaults: {
        songs: [],
        musicPath: "modules/MMM-MP3Player/music",
        extensions: ["mp3", "wma", "acc", "ogg"],
        songs: null,
        autoPlay: false,
        random: false,
      },
      audio: null,
      songTitle: null,
      mediaPlayer: null,
      dataAvailable: true,
      curSong :0,
      curLength : 0,
      time: null,
      play: null,
      firstTime: true,
      substr: null,
      
      getStyles: function(){
        return ["MMM-MP3Player.css", "font-awesome.css"];
      },
    
      start: function(){
        MP3 = this;
        console.log("autoPlay configuration:", MP3.config.autoPlay);
        Log.info("Starting module: " + MP3.name);
      },
    
    getDom: function() {
        var wrapper = document.createElement("div");
    
        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);
            });
    
            wrapper.appendChild(musicList); 
    
            // Add the rest of the existing code...
            MP3.mediaPlayer = MP3.createElement("div", "mediaPlayer", "mediaPlayer");
            MP3.audio = MP3.createElement("audio", "audioPlayer", "audioPlayer");
            MP3.audio.addEventListener("loadeddata", () => {
                MP3.dataAvailable = true;
                MP3.curLength = MP3.audio.duration;
                MP3.updateDurationLabel(); 
            }),
            MP3.audio.addEventListener("ended", () => {
                Log.log(" play ended")
                MP3.audio.currentTime = 0;
                if(MP3.config.autoPlay)
                {
                    MP3.loadNext(MP3.config.random)
                }
                else
                    MP3.mediaPlayer.classList.toggle("play");
            }),
    
    MP3.audio.addEventListener("timeupdate", () => {
      MP3.updateDurationLabel();
    }),
            MP3.mediaPlayer.appendChild(MP3.audio);
    
            // Add the rest of the controls to MP3.mediaPlayer
            var controls = MP3.createElement("div", "controls", false);
            MP3.songTitle = MP3.createElement("span", "title", "songTitle");
            MP3.setCurrentSong(MP3.curSong);
            controls.appendChild(MP3.songTitle);
    
            var discArea = MP3.createElement("div", "discarea", false);
            discArea.appendChild(MP3.createElement("div", "disc", false));
            var stylus = MP3.createElement("div", "stylus", false);
            stylus.appendChild(MP3.createElement("div", "pivot", false));
            stylus.appendChild(MP3.createElement("div", "arm", false));
            stylus.appendChild(MP3.createElement("div", "head", false));
            discArea.appendChild(stylus);
            MP3.mediaPlayer.appendChild(discArea);
    
          var buttons = MP3.createElement("div", "buttons", false);
    
          //  Previous Button
          var prev = MP3.createButton("back", "prevButton", "fa fa-backward");
          prev.addEventListener("click", () => {
            MP3.mediaPlayer.classList.toggle("play");
            MP3.dataAvailable = false;
            MP3.loadNext(MP3.config.random);
            MP3.audio.play();
            MP3.play.getElementsByTagName('i')[0].className = "fa fa-pause";
          }, false),
          buttons.appendChild(prev);
    
          //  Play Button
          MP3.play = MP3.createButton("play", "playButton", "fa fa-play");
          MP3.play.addEventListener("click", () => {
            MP3.mediaPlayer.classList.toggle("play");
            if (MP3.audio.paused) {
              setTimeout(() => {
                MP3.audio.play();
              }, 300);
              MP3.play.getElementsByTagName('i')[0].className = "fa fa-pause";
              MP3.timer = setInterval(MP3.updateDurationLabel, 100);
            } else {
              //MP3.loadNext(MP3.config.random);
              MP3.play.getElementsByTagName('i')[0].className = "fa fa-play";
              clearInterval(MP3.timer);
              MP3.audio.pause();
            }
          }, false);
          buttons.appendChild(MP3.play);
    
          //  Stop Button
          var stop = MP3.createButton("stop", "stopButton", "fa fa-stop");
          stop.addEventListener("click", () => {
            MP3.mediaPlayer.classList.remove("play");
            MP3.audio.pause();
            MP3.audio.currentTime = 0;
            MP3.play.getElementsByTagName('i')[0].className = "fa fa-play";
            MP3.updateDurationLabel();
          }, false);
          buttons.appendChild(stop);
    
          //  Next Button
          var next = MP3.createButton("next", "nextButton", "fa fa-forward");
          next.addEventListener("click", () => {
            MP3.mediaPlayer.classList.toggle("play");
            MP3.dataAvailable = false;
            MP3.loadNext(MP3.config.random);
            MP3.play.getElementsByTagName('i')[0].className = "fa fa-play";
          }, false);
          buttons.appendChild(next);
    
            controls.appendChild(buttons);
    
            var subControls = MP3.createElement("div", "subControls", false);
            var duration = MP3.createElement("span", "duration", "currentDuration");
            duration.innerHTML = "00:00" + "&nbsp&nbsp&nbsp";
            subControls.appendChild(duration);
    
            var volumeSlider = MP3.createElement("input", "volumeSlider", "volumeSlider");
            volumeSlider.type = "range";
            volumeSlider.min = "0";
            volumeSlider.max = "1";
            volumeSlider.step = "0.01";
            volumeSlider.addEventListener("input", () => {
                MP3.audio.volume = parseFloat(volumeSlider.value);
            }, false);
    
            subControls.appendChild(volumeSlider);
            controls.appendChild(subControls);
            MP3.mediaPlayer.appendChild(controls);
    
            wrapper.appendChild(MP3.mediaPlayer);
        }
    
        if(MP3.firstTime && MP3.config.autoPlay){
            console.log("First time and autoPlay are true. Setting firstTime to false.");
            MP3.firstTime=false;
        }
        return wrapper;
    },
    
    playSong: function(folderName, songName) {
        const songPath = MP3.config.musicPath + '/' + folderName + '/' + songName;
        MP3.audio.src = songPath; 
        MP3.songTitle.innerHTML = songName;
        MP3.audio.play();
    },
    
      createElement: function(type, className, id){
        var elem = document.createElement(type);
        if(className) elem.className = className;
        if(id)  elem.id = id;
        return elem;
      },
    
      createButton: function(className, id, icon){
        var button = document.createElement('button');
        button.className = className;
        button.id = id;
        var ico = document.createElement("i");
        ico.className = icon;
        button.appendChild(ico);
        return button;
      },
    
    updateDurationLabel: function() {
      var duration = document.getElementById('currentDuration');
      if (MP3.dataAvailable && MP3.audio.duration > 0) {
        duration.innerText = MP3.parseTime(MP3.audio.currentTime) + " / " + MP3.parseTime(MP3.audio.duration);
      } else {
        duration.innerText = "00:00 / 00:00";
      }
    },
    
      parseTime: function(time){
        const minutes = Math.floor(time / 60)
        const seconds = Math.floor(time - minutes * 60)
        const secondsZero = seconds < 10 ? "0" : ""
        const minutesZero = minutes < 10 ? "0" : ""
        return minutesZero + minutes.toString() + ":" + secondsZero + seconds.toString()
      },
      
      setCurrentSong: function(index){
          if(MP3.audio!= undefined){
            MP3.audio.src = MP3.config.musicPath + '/' + MP3.config.songs[index];
            MP3.songTitle.innerHTML = MP3.config.songs[index].substr(0, MP3.config.songs[index].length - 4);
            MP3.curSong = index;
          }
      },
      loadNext: function(next){
       let index=0;
          console.log("loadNext: Autoplay:", MP3.config.autoPlay); // Add this line for logging
          MP3.audio.pause();
          if(next)  index= (MP3.curSong + 1) % MP3.config.songs.length;
          else      index = (MP3.curSong - 1) < 0 ? MP3.config.songs.length - 1 : MP3.curSong - 1;
          MP3.setCurrentSong(index);
          MP3.audio.play();
      },
    
      notificationReceived: function (notification, payload) {
        if(notification === "ALL_MODULES_STARTED")
    		  MP3.sendSocketNotification('SOURCE_MUSIC', MP3.config);
      },
      
      socketNotificationReceived: function(notification, payload){
        if(notification === "RETURNED_MUSIC")
          MP3.config.songs = payload.songs;
          // set the initial song index 
          MP3.setCurrentSong(0);
          // paint the player
          MP3.updateDom(2);
      },
    });
    

    MMM-MP3Player.css:

    @import url("https://fonts.googleapis.com/css?family=Roboto"); /* Simpler, modern font */
    
    
    .MMM-MP3Player .songInfo {
        flex: 1; /* Fill half of the available space */
        padding: 20px;
        font-family: 'Roboto', sans-serif;
    }
    
    .MMM-MP3Player .songTitle {
        font-size: 4em;
        font-weight: bold;
        color: #333; /* Darker text */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .MMM-MP3Player .container {
        position: relative; /* Add this if not present */
        /* ...other styles... */
    }
    
    .MMM-MP3Player .songsList {
        position: absolute;
        left: 10px; /* Adjust to align correctly, can be in px or % */
        top: -360px;  /* Adjust to align correctly, can be in px or % */
        width: 50%; /* Adjust to not exceed the container width */
        max-width: calc(100% - 40px); /* Subtract total horizontal padding */
        align-items: center;
        padding: 20px;
        box-sizing: border-box;
        font-size: 2em;
        font-weight: bold;
        color: #FFF;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        z-index: 1000;
        background-image: 
            linear-gradient(
                to bottom,
                rgba(255, 255, 255, 0.8) 0%, 
                rgba(255, 255, 255, 0.75) 25%, 
                rgba(255, 255, 255, 0.6) 50%,
                rgba(255, 255, 255, 0.4) 75%,
                rgba(255, 255, 255, 0.3) 100%
            ),
            url('images/qsonglist.png');
        background-size: cover;
        background-position: center;    border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    }
    
    .MMM-MP3Player .mediaPlayer {
        position: absolute;
        right: 0;  /* Adjust as needed to align to the right */
        top: -130px;       /* Aligns to the top of the container */
        width: 50%;   /* Or whatever width you require */
        align-items: center;
        padding: 20px;
        box-sizing: border-box;
        justify-content: center;
        z-index: 1000; 
    }
    
    
    .MMM-MP3Player .controls {
        width: 80%;
        margin-top: 20px; 
    }
    
    .MMM-MP3Player .buttons button {
        background-color: #4CAF50; /* Example: Green for modern feel */
        color: white;
        border: none;
        border-radius: 50%;
        margin-right: 10px; 
        font-size: 1.2em;
        width: 50px;
        height: 50px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* Adds depth */
    }
    
    .MMM-MP3Player .buttons button:hover {
        background-color: #3e8e41; /* Darker green on hover */
        cursor: pointer;
    }
    

    in my config.js:

    I have added it this way:

    {
        module: "MMM-MP3Player",
        position: "bottom_center",
        "pages": {"Audio": "bottom_center"},
    			config: {
    				musicPath: "modules/MMM-MP3Player/music", 
    				autoPlay: false,
    				random: false,
    				loopList: false,
    			}
    },
    

    Can you tell me what am I doing wrong? thanks

    S 2 Replies Last reply Apr 19, 2024, 1:09 PM Reply Quote 0
    • S Offline
      sdetweil @bachoo786
      last edited by Apr 19, 2024, 1:09 PM

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

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      B 1 Reply Last reply Apr 19, 2024, 3:24 PM Reply Quote 0
      • S Offline
        sdetweil @bachoo786
        last edited by Apr 19, 2024, 1:16 PM

        @bachoo786 what shows in the developers window?

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        B 1 Reply Last reply Apr 19, 2024, 1:39 PM Reply Quote 0
        • B Offline
          bachoo786 @sdetweil
          last edited by Apr 19, 2024, 1:39 PM

          @sdetweil I will .

          Nothing says everything is loaded including the mp3 player module.

          S 1 Reply Last reply Apr 19, 2024, 1:47 PM Reply Quote 0
          • S Offline
            sdetweil @bachoo786
            last edited by sdetweil Apr 19, 2024, 1:47 PM Apr 19, 2024, 1:47 PM

            @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

            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 @sdetweil
              last edited by Apr 19, 2024, 3:24 PM

              @sdetweil here is the repo:

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

              S 1 Reply Last reply Apr 19, 2024, 3:42 PM Reply Quote 0
              • S Offline
                sdetweil @bachoo786
                last edited by Apr 19, 2024, 3:42 PM

                @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
                

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                B 1 Reply Last reply Apr 19, 2024, 3:47 PM Reply Quote 0
                • B Offline
                  bachoo786 @sdetweil
                  last edited by bachoo786 Apr 19, 2024, 3:49 PM Apr 19, 2024, 3:47 PM

                  @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 Apr 19, 2024, 3:49 PM Reply Quote 0
                  • S Offline
                    sdetweil @bachoo786
                    last edited by Apr 19, 2024, 3:49 PM

                    @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 Offline
                      sdetweil @bachoo786
                      last edited by Apr 19, 2024, 3:57 PM

                      @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
                      • 1
                      • 2
                      • 3
                      • 4
                      • 5
                      • 6
                      • 5 / 6
                      5 / 6
                      • First post
                        48/58
                        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