@sdetweil can you please recommend some editor with brace matching?
also I added close brace but that didnt resolve the issue got another error now right at the bottom.
error:
Uncaught SyntaxError: missing ) after argument list :8182/modules/MMM-MP…MM-MP3Player.js:264
here is line 263 and 264:
}
}
here is the full code:
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" + "   ";
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();
}
}
});
you see all I am trying to do is to add like a playlist to the module so basically I have added the songList and it shows all the songs i.e. .mp3 files in the music folder within the module’s folder.
I am now adding music2 folder to show another set of mp3 files and I thought of grouping each folder by artist name and display it on the front end.
this method is tedious as I need to repeat this for many artists.
a better method I think would be of having several artists folders in the module’s “single” music folder and in each artist’s folder there will be various mp3s.
this way the module should display the available artist i.e. folders in the front end and when I click on the artist’s name on the front end it would collapse down and show the mp3s in that respective artist’s folder.
I did try to work on this “better method” but didnt get far so I went for the easier option as I already had a single “songList” which was working and showing the mp3s in the “music” folder.
