• 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 8.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.
  • S Away
    sdetweil @bachoo786
    last edited by Apr 14, 2024, 11:21 PM

    @bachoo786 no idea really. need to think.

    do you have a git repo I can clone to look at

    Sam

    How to add modules

    learning how to use browser developers window for css changes

    B 1 Reply Last reply Apr 15, 2024, 12:56 PM Reply Quote 0
    • B Offline
      bachoo786 @sdetweil
      last edited by sdetweil Apr 15, 2024, 2:49 PM Apr 15, 2024, 12:56 PM

      @sdetweil I dont I am afraid.

      Do you think posting the codes on here would be suffice? the node-helper, js and the css files?

      MMM-MP3Player.js:

      var arrPlayed = [];
      var audioElement = null; // Define it here globally
      Module.register("MMM-MP3Player",{
      	defaults: {
      		musicPath: "modules/MMM-MP3Player/music/", 
      		autoPlay: true,
      		random: false,
      		loopList: true,
      	},
      	getStyles: function() {
      		return ["style.css"];
      	},
      
      getDom: function() {
          var self = this;
          var wrapper = document.createElement("div");
          wrapper.id = self.identifier + "_wrapper";
      
      
      
          var player = document.createElement("div");
          player.className = "player";
      
          self.info = document.createElement("div");
          self.info.className = "info";
      
          self.artist = document.createElement("span");
          self.artist.className = "artist";
          self.artist.innerHTML = "MMM-MP3Player";
      
          self.song = document.createElement("span");
          self.song.className = "name";
          self.song.innerHTML = self.config.autoPlay ? "AutoPlay Enabled" : "AutoPlay Disabled";
          self.song.innerHTML += self.config.random ? "<br />Random Enabled" : "<br />Random Disabled";
      
          var progress = document.createElement("div");
          progress.className = "progress-bar";
      
          self.bar = document.createElement("div");
          self.bar.className = "bar";
          progress.appendChild(self.bar);
      
          self.info.appendChild(self.artist);
          self.info.appendChild(self.song);
          self.info.appendChild(progress);
      
          self.album_art = document.createElement("div");
          self.album_art.className = "album-art";
          player.appendChild(self.album_art);
          player.appendChild(self.info);
      
          // Controls container
          var controls = document.createElement("div");
          controls.className = "controls";
      
          // Define buttons and associated notifications
          var buttons = {
              "Play": 'PLAY_MUSIC',
              "Stop": 'STOP_MUSIC',
              "Next": 'NEXT_TRACK',
              "Previous": 'PREVIOUS_TRACK',
              "Random On": 'RANDOM_ON',
              "Random Off": 'RANDOM_OFF'
          };
      
          Object.keys(buttons).forEach(function(key) {
              var button = document.createElement("button");
              button.innerHTML = key;
      button.addEventListener("click",()=>{
          console.log("Button clicked: " + key);
          console.log("Sending notification:", buttons[key], 'some_info');
          self.sendNotification('buttons[key]', 'some_info');
              });
              controls.appendChild(button);
          });
      
          player.appendChild(controls);
      
      
          // Initialize the audio element
          audioElement = document.createElement("audio");
          audioElement.id = self.identifier+"_player";
          wrapper.appendChild(audioElement);
          wrapper.appendChild(player);
      
          setTimeout(function() {
              self.sendSocketNotification("INITIATEDEVICES", self.config);
          }, 3000);
      
          return wrapper;
      },
      	socketNotificationReceived: function(notification, payload){
      		var self = this;
      		switch(notification){
      			case "Error": // Universal error handler
      				self.musicFound = false;
      				console.log("[MMM-MP3Player] Error! ", payload);
      				break;
      			case "Music_Files": // this populates the songs list (array)
      				self.songs = payload;
      				self.current = 0;
      				self.musicFound = true;
      				console.log("[MMM-MP3Player] Music Found");
      				arrPlayed = Array(self.songs.length).fill(false);
      				if (self.config.autoPlay){
      					if (self.config.random){
      						ind = Math.floor(Math.random() * self.songs.length); //(self.current + 1) % self.songs.length;
      						arrPlayed[ind] = true;
      						self.current = ind;
      					}
      					self.sendSocketNotification("LOADFILE", self.songs[self.current]);
      				}
      				break;
      			case "Music_File": // this is called everytime a song is sent from the server
      				//console.log(payload[3]);
      				if (payload[3] == 'music.png') {
      					self.album_art.className = "album-art";
      					self.album_art.classList.add('active');
      				}
      				else {
      					self.album_art.classList.toggle('active');
      					self.album_art.className = "album-art-found";
      					var chngstyle = document.querySelector('.album-art-found').style;
      					chngstyle.setProperty("--backgroundImage", "url('" + payload[3] + "')");
      					//var mystr = window.getComputedStyle(document.querySelector('.album-art-found'), '::before').getPropertyValue('background-image');
      					//console.log(mystr);
      				}
      				
      				// create url of the raw data received and play it
      				audioElement=document.getElementById(self.identifier+"_player");
      				var binaryData = [];
      				binaryData.push(payload[0]);
      				if ((payload[2] = 'mp3') || (payload[2] = 'flac')){
      					var url = window.URL.createObjectURL(new Blob(binaryData, {type: "audio/mpeg"}));
      				}
      				/*else if (payload[2] = 'ogg'){
      					var url = window.URL.createObjectURL(new Blob(binaryData, {type: "audio/ogg"}));
      				}*/
      				else if (payload[2] = 'wav'){
      					var url = window.URL.createObjectURL(new Blob(binaryData, {type: "audio/wav"}));
      				}
      				audioElement.load();
      				audioElement.setAttribute('src', url);
      				audioElement.volume = 1;
      				audioElement.play();
      				self.artist.innerHTML = payload[1][0];
      				self.song.innerHTML = payload[1][1];
      				//self.album_art.classList.add('active');
      				// progress bar (thanks to Michael Foley @ https://codepen.io/mdf/pen/ZWbvBv)
      				var timer;
      				var percent = 0;
      				audioElement.addEventListener("playing", function(_event) {
      					advance(_event.target.duration, audioElement);
      				});
      				audioElement.addEventListener("pause", function(_event) {
      					clearTimeout(timer);
      				});
      				var advance = function(duration, element) {
      					increment = 10/duration
      					percent = Math.min(increment * element.currentTime * 10, 100);
      					self.bar.style.width = percent+'%'
      					startTimer(duration, element);
      				}
      				var startTimer = function(duration, element){ 
      					if(percent < 100) {
      						timer = setTimeout(function (){advance(duration, element)}, 100);
      					}
      				}
      				// next track & loop
      				audioElement.onended = function() {
      					if(!self.musicFound){
      						self.album_art.classList.toggle('active');
      						return;
      					}
      					if (self.config.random){
      						if (!arrPlayed.includes(false)){ // if all files are played
      							if (!self.config.loopList) {
      								self.artist.innerHTML = "Playlist ended";
      								self.song.innerHTML = "";
      								console.log("[MMM-MP3Player] Playlist ended");
      								return;
      							}
      							arrPlayed.fill(false);
      						}
      						do {
      							ind = Math.floor(Math.random() * self.songs.length); //(self.current + 1) % self.songs.length;
      						} while ( (arrPlayed[ind]) || ((ind == self.current) && (self.songs.length>1)) ); //ind == self.current: not to play one song twice - in the end of list and in the beginning of newly created list)
      						arrPlayed[ind] = true;
      						self.current = ind;
      					}
      					else {
      						if(self.current==(self.songs.length-1)){ // if all files are played
      							if (!self.config.loopList){
      								self.artist.innerHTML = "Playlist ended";
      								self.song.innerHTML = "";
      								console.log("[MMM-MP3Player] Playlist ended");
      								return;
      							}
      							self.current = -1;
      						}
      						self.current++;
      					}
      					self.sendSocketNotification("LOADFILE", self.songs[self.current]);
      				};
      				console.log("[MMM-MP3Player] Music Played");
      				break;
      		}
      	},
      
      notificationReceived: function(notification, payload, sender) {
          console.log("Notification received:", notification);
      		var self = this;
      		if (self.musicFound){
      			switch(notification){
      				case "PLAY_MUSIC":
      					if (audioElement.paused){
      						audioElement.play();
      					}
      					else {
      						self.sendSocketNotification("LOADFILE", self.songs[self.current]);
      					}
      					break;
      				case "STOP_MUSIC":
      					audioElement.pause();
      					break;
      				case "NEXT_TRACK":
      					if(!self.musicFound){
      						self.album_art.classList.toggle('active');
      						return;
      					}
      					if (self.config.random){
      						if (!arrPlayed.includes(false)){
      							arrPlayed.fill(false);
      						}
      						do {
      							ind = Math.floor(Math.random() * self.songs.length); // (self.current + 1) % self.songs.length;
      						} while (arrPlayed[ind] || ind == self.current); // ind == self.current: not to play one song twice - in the end of list and in the beginning of newly created list)
      						arrPlayed[ind] = true;
      						self.current = ind;
      					}
      					else {
      						if(self.current==(self.songs.length-1)){ // this assures the loop
      							self.current = -1;
      						}
      						self.current++;
      					}
      					self.sendSocketNotification("LOADFILE", self.songs[self.current]);
      					break;
      				case "PREVIOUS_TRACK":
      					if(self.current==0){ // this assures the loop
      							self.current = (self.songs.length);
      						}
      					self.current--;
      					self.sendSocketNotification("LOADFILE", self.songs[self.current]);
      					break;
      				case "RANDOM_ON":
      					self.config.random = true;
      					break;
      				case "RANDOM_OFF":
      					self.config.random = false;
      					break;
      			}
      		}
      	}
      });
      

      node_helper.js:

      /* Magic Mirror Node Helper: MMM-MP3Player
       * By asimhsidd
       *
       * Remade by Pavel Smelov.
       * Version 1.2.0 - 2020.09.14
       * GPLv3 License
       */
      
      const NodeHelper = require("node_helper");
      const ID3 = require('node-id3');
      const path = require('path')
      const fs = require('fs');
      
      var music_files_list = [];
      
      module.exports = NodeHelper.create({
      	socketNotificationReceived: function(notification, payload) {
      		var self = this;
      		switch(notification) {
      			case "INITIATEDEVICES":
      				music_files_list = [];
      				var self = this;
      				self.searchMP3(payload.musicPath);
      				if(music_files_list.length){
      					console.log("[MMM-MP3Player] Found ", music_files_list.length, "track(s)");
      					self.sendSocketNotification("Music_Files",music_files_list);
      				}
      				else {
      					console.log("[MMM-MP3Player] Music may not be found");
      				}
      				break;
      			case "LOADFILE":
      				//console.log('[MMM-MP3Player] trying to play next track');
      				if (fs.existsSync(payload)){
      					fs.readFile(payload, function(err, data) {
      						extension = path.basename(payload).split('.').pop(); //extension = path.extname(payload); //returns ext with dot
      						var cover = '';
      						if (extension == "mp3") {
      							tags = ID3.read(data);
      							if (typeof tags.image != "undefined") {
      								/*var base64String = "";
      								for (var i = 0; i < tags.image.imageBuffer.length; i++) {
      									base64String += String.fromCharCode(tags.image.imageBuffer[i]);
      								}
      								cover = "data:image/" + tags.image.mime + ";base64," + Buffer.from(base64String).toString('base64'); */
      								cover = "data:image/" + tags.image.mime + ";base64," + tags.image.imageBuffer.toString('base64');
      							}
      							if (typeof tags.artist == "undefined" && typeof tags.title == "undefined"){ tags.title = path.basename(payload); }
      						}
      						else {
      							tags = {artist:'', title:path.basename(payload)};
      						}
      						if (cover == '') {
      							if (fs.existsSync(path.join(path.dirname(payload),'cover.jpg'))){
      								cover = path.join('/', path.dirname(payload), 'cover.jpg');
      							}
      							else {
      								cover = "music.png";
      							}
      						}
      						self.sendSocketNotification("Music_File",[data,[tags.artist,tags.title], extension, cover]);
      					});
      				}
      				else {
      					self.sendSocketNotification("Error","File can not be opened");
      				}
      				break;
      		}
      	},
      	searchMP3(startPath){ // thanks to Lucio M. Tato at https://stackoverflow.com/questions/25460574/find-files-by-extension-html-under-a-folder-in-nodejs
      		var self = this;
      		var filter_mp3 = RegExp('.mp3'); // var filter = /.mp3/;
      		var filter_flac = RegExp('.flac');
      		//var filter_ogg = RegExp('.ogg');
      		var filter_wav = RegExp('.wav');
      		if (!fs.existsSync(startPath)){
      			console.log("[MMM-MP3Player] no dir ",startPath);
      			return;
      		}
      		var files=fs.readdirSync(startPath);
      		for(var i=0;i<files.length;i++){
      			var filename=path.join(startPath,files[i]);
      			var stat = fs.lstatSync(filename);
      			if (stat.isDirectory()){
      				self.searchMP3(filename); //recurse
      			}else if ( (filter_mp3.test(filename)) || (filter_flac.test(filename)) /*|| (filter_ogg.test(filename))*/ || (filter_wav.test(filename)) ){
      				music_files_list.push(filename.replace(/\/\/+/g, '/')); // to avoid double slashes (https://stackoverflow.com/questions/23584117/replace-multiple-slashes-in-text-with-single-slash-with-javascript/23584219)
      			}
      		}
      	}
      });
      

      style.css:

      /*
       * player css is amdended version of Shayan's player @ https://codepen.io/shayanea/pen/yvvjya
       * Version 1.2.0 - 2020.09.14
       */
      @import url("https://fonts.googleapis.com/css?family=Fira+Sans");
      
      
      .player {
        font-family: "Fira Sans", Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        position: relative;
        background-color: #fff;
        border-radius: 15px;
        width: 300px;
        height: 80px;
        z-index: 5;
        -webkit-box-shadow: 0px 0px 117px -6px rgba(255,255,255,1);
        -moz-box-shadow: 0px 0px 117px -6px rgba(255,255,255,1);
        box-shadow: 0px 0px 117px -6px rgba(255,255,255,1);
        display: flex;
        /*justify-content: flex-end;  */
      }
      .player .info {
        padding: 15px 0px 0px 90px;
        width:65%;
      }
      .player .info .artist,
      .player .info .name {
      	display: block;
      	line-height: 1.0em;
      }
      .player .info .artist {
        color: #222;
        font-size: 16px;
        margin-bottom: 4px;
      }
      .player .info .name {
        color: #808080; /*#999*/
        font-size: 16px; /*13px*/
        margin-bottom: 8px;
      }
      .player .info .progress-bar {
        background-color: #ddd;
        height: 3px;
        width: 100%;
        position: relative;
      }
      
      .controls {
        display: flex;
        justify-content: space-around; /* Distributes space between buttons */
        padding: 10px;
      }
      
      .controls button {
        padding: 5px 10px;
        font-size: 14px;
        color: white;
        background-color: #666; /* Dark grey button background */
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s;
      }
      
      .controls button:hover {
        background-color: #777; /* Lighten button on hover */
      }
      
      .controls button:active {
        background-color: #555; /* Darken button on active/click */
      }
      
      
      .player .info .progress-bar .bar {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        background-color: #666;
        transition: all 0.2s ease;
      }
      .player .album-art-found {
        position: absolute;
        left: -10px;
        height: 80px;
        width: 80px;
        /* background-color:white; */
        box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.2);
        transform: scale(1.2);
        transition: all 0.5s ease;
      }
      .player .album-art-found::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 80px;
        background-image: var(--backgroundImage);
      }
      .player .album-art {
        position: absolute;
        left: -10px;
        height: 80px;
        width: 80px;
        border-radius: 50%;
        background-color:white;
        box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.2);
        transform: scale(1.2);
        transition: all 0.5s ease;
      }
      .player .album-art::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 50%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 50px;
        background-image: url("music.png");
      }
      .player .album-art.active {
        box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.4);
        transform: scale(1.2);
        transition: all 1s ease;
        background: linear-gradient(270deg, #2f987d, #4190bd, #d29b2d, #4bd22d, #d2692d, #9e2dd2, #d22daf, #3f2dd2);
        background-size: 1600% 1600%;
        -webkit-animation: ColorChanger 20s ease infinite;
        -moz-animation: ColorChanger 20s ease infinite;
        animation: ColorChanger 20s ease infinite; 
      }
      .player .album-art.active::before {
        animation: rotation 3s infinite linear;
        -webkit-animation: rotation 3s infinite linear;
        animation-fill-mode: forwards;
      }
      
      @-webkit-keyframes ColorChanger {
          0%{background-position:0% 50%}
          50%{background-position:100% 50%}
          100%{background-position:0% 50%}
      }
      @-moz-keyframes ColorChanger {
          0%{background-position:0% 50%}
          50%{background-position:100% 50%}
          100%{background-position:0% 50%}
      }
      @keyframes ColorChanger { 
          0%{background-position:0% 50%}
          50%{background-position:100% 50%}
          100%{background-position:0% 50%}
      }
      @keyframes rotation {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
      
      S 1 Reply Last reply Apr 15, 2024, 5:46 PM Reply Quote 0
      • S Away
        sdetweil @bachoo786
        last edited by Apr 15, 2024, 5:46 PM

        @bachoo786 better if you make a github repo

        but the main problem is you cannot sendNotification to yourself…

        BUT you CAN call the notificationReceived function instead

        Sam

        How to add modules

        learning how to use browser developers window for css changes

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

          @sdetweil what do I do then ?

          S 1 Reply Last reply Apr 15, 2024, 11:06 PM Reply Quote 0
          • S Away
            sdetweil @bachoo786
            last edited by Apr 15, 2024, 11:06 PM

            @bachoo786 change the one line of code

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            mumblebajM 1 Reply Last reply Apr 16, 2024, 3:07 PM Reply Quote 0
            • mumblebajM Offline
              mumblebaj Module Developer @sdetweil
              last edited by Apr 16, 2024, 3:07 PM

              @sdetweil and @bachoo786 There is a lot wrong with that code snippets. Can’t make it work the way it stands.

              Check out my modules at: https://github.com/mumblebaj?tab=repositories

              S 1 Reply Last reply Apr 16, 2024, 4:18 PM Reply Quote 0
              • S Away
                sdetweil @mumblebaj
                last edited by sdetweil Apr 16, 2024, 4:32 PM Apr 16, 2024, 4:18 PM

                @mumblebaj @bachoo786 here is a repo for this module

                it is built with name sensitive constructs, so if you rename the files it will adjust automatically… (except for the css file… today it has no module prefix on its selectors)

                https://github.com/sdetweil/new-MP3Player

                (as I already have a module repo with MMM)

                put some music files in the music folder

                install instructions

                cd ~/MagicMirror/modules
                git clone https://github.com/sdetweil/new-MP3Player
                cd new-MP3Player
                npm install 
                

                change the modulename in config.js if u had the prior code

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                S 1 Reply Last reply Apr 17, 2024, 3:31 PM Reply Quote 0
                • S Away
                  sdetweil @sdetweil
                  last edited by Apr 17, 2024, 3:31 PM

                  I updated the player to get rid of as many global variables as possible

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  B 1 Reply Last reply Apr 18, 2024, 12:49 PM Reply Quote 0
                  • B Offline
                    bachoo786 @sdetweil
                    last edited by bachoo786 Apr 18, 2024, 12:50 PM Apr 18, 2024, 12:49 PM

                    @sdetweil

                    Hi Sam thanks for that I will try it out soon.

                    I am currently working on the existing mp3 player module and have added another songList i.e. songList2 as per my get dom function. Trouble is I get this error when I restart the MagicMirror, the error is from the developer console. I am scratching my head to resolve it but it doesnt work.

                    here is the code:

                    MMM-MP3Player.js:

                    var MP3;
                    var substr;
                    Module.register("MMM-MP3Player", {
                      defaults: {
                        songs: [],
                        songs2: [],  // Add this line for the second song list
                        musicPath: "modules/MMM-MP3Player/music",
                        musicPath2: "modules/MMM-MP3Player/music2",
                        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("Starting module:", MP3.name);
                      this.sendSocketNotification('SOURCE_MUSIC', {musicPath: this.config.musicPath, extensions: this.config.extensions});
                      this.sendSocketNotification('SOURCE_MUSIC2', {musicPath: this.config.musicPath2, extensions: this.config.extensions}); // Send notification to load songs from the second directory
                    },
                    
                    getDom: function(){
                        var wrapper = document.createElement("div");
                    
                        if(MP3.config.songs != null) {
                            // Display the list of MP3 files
                            var songList = MP3.createElement("ul", "songList", "songList");
                            for(var i = 0; i < MP3.config.songs.length; i++) {
                                var listItem = MP3.createElement("li", "songItem", "songItem" + i);
                                listItem.innerHTML = MP3.config.songs[i].substr(0, MP3.config.songs[i].length - 4);
                                listItem.addEventListener("click", function(index) {
                                    return function() {
                                        MP3.setCurrentSong(index);
                                        MP3.audio.play();
                                        MP3.play.getElementsByTagName('i')[0].className = "fa fa-pause";
                                        MP3.mediaPlayer.classList.add("play");
                                        MP3.updateDurationLabel();
                                    };
                                }(i));
                                songList.appendChild(listItem);
                            }
                            wrapper.appendChild(songList);
                    
                      if (MP3.config.songs2 != null) {
                        var songList2 = MP3.createElement("ul", "songList2", "songList2");
                        for (var i = 0; i < MP3.config.songs2.length; i++) {
                          var listItem = MP3.createElement("li", "songItem2", "songItem2-" + i);
                          listItem.innerHTML = MP3.config.songs2[i].substr(0, MP3.config.songs2[i].length - 4);
                          listItem.addEventListener("click", function(index) {
                            return function() {
                              MP3.setCurrentSong(index, 'music2');
                              MP3.audio.play();
                              MP3.play.getElementsByTagName('i')[0].className = "fa fa-pause";
                              MP3.mediaPlayer.classList.add("play");
                              MP3.updateDurationLabel();
                            };
                          }(i));
                          songList2.appendChild(listItem);
                        }
                        wrapper.appendChild(songList2);
                    
                            // 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;
                    },
                    
                      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, type='music1') {
                      var path = type === 'music1' ? MP3.config.musicPath : MP3.config.musicPath2;  // Use musicPath2 from config
                      MP3.audio.src = path + '/' + MP3.config['songs' + (type === 'music1' ? '' : '2')][index];
                      MP3.songTitle.innerHTML = MP3.config['songs' + (type === 'music1' ? '' : '2')][index].substr(0, MP3.config['songs' + (type === 'music1' ? '' : '2')][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") {
                        if (payload.type === 'music1') {
                          MP3.config.songs = payload.songs;
                        } else if (payload.type === 'music2') {
                          MP3.config.songs2 = payload.songs;
                        }
                        MP3.setCurrentSong(0); // set initial song for each list
                        MP3.updateDom();
                      }
                    },
                    });
                    

                    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') {
                        var songs = this.getSongs(payload.musicPath, payload.extensions);
                        self.sendSocketNotification("RETURNED_MUSIC", {songs: songs, type: 'music1'});
                      } else if (notification === 'SOURCE_MUSIC2') {
                        var songs = this.getSongs(payload.musicPath, payload.extensions);
                        self.sendSocketNotification("RETURNED_MUSIC", {songs: songs, type: 'music2'});
                      }
                    },
                    getSongs: function(path, ext){
                      var songs = [];
                      var contents = Fs.readdirSync(path);
                      contents.forEach(file => {
                        if (this.checkExt(file, ext)) {  // Use the checkExt function to filter files
                          songs.push(file);
                        }
                      });
                      console.log("mp3 player returning song list="+ songs);
                      return songs;
                    },
                    });
                    

                    the error I get is:

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

                    which is this

                    },
                    
                    S 1 Reply Last reply Apr 18, 2024, 12:54 PM Reply Quote 0
                    • S Away
                      sdetweil @bachoo786
                      last edited by Apr 18, 2024, 12:54 PM

                      @bachoo786 said in MP3 Player:

                      MP3.updateDom();
                      }
                      },
                      });

                      yep, it’s that trailing comma saying another function is coming

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      B 1 Reply Last reply Apr 18, 2024, 1:04 PM Reply Quote 0
                      • 1
                      • 2
                      • 3
                      • 4
                      • 5
                      • 6
                      • 3 / 6
                      3 / 6
                      • First post
                        22/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