MP3 Player

bachoo786

@mumblebaj well I am trying to implement a “module” which satisfies my needs of playing any mp3 file. I do want to play the Quran but like I said initially it could play any mp3 file.

I do not have a Github link as of now sorry.

bachoo786

@sdetweil I added some logs and I can see that the notification is sent however its not received, see my updated code below with the result from developer console:

updated 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", function() {
    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;
			}
		}
	}
});

sdetweil

@bachoo786 said in MP3 Player:

button.addEventListener(“click”, function() {

change that to

button.addEventListener(“click”,()=>{

and change the self.sendNotification
to this.sendNotification

at the time the click event happens, you are not in the module code, but in the browser.

and the getDom() function has long since ended. you want the runtime to remember the context before it executes any code.
the arrow invocation ()=>{} does that, while the function(){} type invocation does not

bachoo786

@sdetweil Hey Sam

I did the changes but when i click on the “Play” or any button the mp3 file isnt played and I get this error on the developer console:

Button clicked: Play
MMM-MP3Player.js:71 Sending notification: PLAY_MUSIC some_info
MMM-MP3Player.js:72 Uncaught TypeError: this.sendNotification is not a function
at HTMLButtonElement. (MMM-MP3Player.js:72:10)

here is the updated code:

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');
    this.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;
			}
		}
	}
});

sdetweil

@bachoo786 hmm…change the this. to self. weird… because it says not a member of htmlElement .

bachoo786

@sdetweil

Nope doesn’t work.

I feel like going back to the old MP3 Player module that you helped.set up and just changing the css from the disc to something more modern and futuristic with better buttons etc.

Oh and also adding a playlist of mp3s which should be read from the mp3 folder. Display the module in half where the half on the left displays the playlist and the one on the right displays the player buttons etc.

Is that possible you think?

sdetweil

@bachoo786 no idea really. need to think.

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

bachoo786

@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);
  }
}

sdetweil

@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

bachoo786

@sdetweil what do I do then ?

sdetweil

@bachoo786 change the one line of code

mumblebaj

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

sdetweil

@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

sdetweil

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

bachoo786

@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

},

sdetweil

@bachoo786 said in MP3 Player:

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

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

bachoo786

@sdetweil

so I removed it to this:

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();
  }
}
});

but still doesnt like it gives this error:

:8182/modules/MMM-MP…MM-MP3Player.js:196 Uncaught SyntaxError: Unexpected token ','

sdetweil

@bachoo786 what is on line 195

bachoo786

@sdetweil

its this:

return wrapper;

which is around here :

..........

        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;
  },

.....

sdetweil

@bachoo786 you have a missing close brace

        wrapper.appendChild(songList);
     }   // <-----here
  if (MP3.config.songs2 != null) {

you need to use an editor with brace matching