@leej00 hello mate
how did you configure the last part i.e.
STEP7. EDIT GOOGLE ASSISTANT MODULE CONFIG
Open the Magic Mirror configuration file with TextEditor and modify it with the contents of github
there is soo much information on github that needs to be added on to the config.js, which part of it did you add to your config.js? can you please share it?
I get the google icon on my mm but when I say “Ok Google” nothing happens"
Thanks.
@Fozi sorry to be a constant pain but what are your thoughts on using a led TV instead of the VA monitor?
@ianperrin thanks for the reply.
here is my config:
/* Magic Mirror Config Sample
*
* By Michael Teeuw http://michaelteeuw.nl
* MIT Licensed.
*
* For more information how you can configurate this file
* See https://github.com/MichMich/MagicMirror#configuration
*
*/
var config = {
address: "0.0.0.0", // Address to listen on, can be:
// - "localhost", "127.0.0.1", "::1" to listen on loopback interface
// - another specific IPv4/6 to listen on a specific interface
// - "", "0.0.0.0", "::" to listen on any interface
// Default, when address config is left out, is "localhost"
port: 8181,
ipWhitelist: [], // Set [] to allow all IP addresses
// or add a specific IPv4 of 192.168.1.5 :
// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"],
// or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],
language: "en",
timeFormat: 24,
units: "metric",
// customCss: 'css/custom.css',
modules: [
// {
// module: "alert",
// },
{
module: "updatenotification",
position: "top_bar"
},
{
module: "clock",
position: "top_left"
},
{
module: 'MMM-ModuleScheduler',
},
{
module: 'MMM-SystemStats',
position: 'bottom_bar', // This can be any of the regions.
// classes: 'small dimmed', // Add your own styling. OPTIONAL.
// header: 'System Stats', // Set the header text OPTIONAL
config: {
updateInterval: 10000, // every 10 seconds
align: 'right', // align labels
units: 'metric',
view: 'textAndIcon',
},
},
{
module: "currentweather",
position: "top_right",
config: {
location: "London",
locationID: "xx", //ID from http://bulk.openweathermap.org/sample/; unzip the gz file and find your city
appid: "xx"
}
},
{
module: "weatherforecast",
position: "top_right",
header: "Weather Forecast",
config: {
location: "xx",
locationID: "xx", //ID from http://www.openweathermap.org/help/city_list.txt
appid: "xx"
}
},
{
module: 'random_quotes',
position: 'lower_third',
config: {
updateInterval: '8',
fadeSpeed: '4'
}
},
{
module: 'MMM-homeassistant-sensors',
position: 'top_left',
config: {
host: "xx",
port: "xx",
https: true,
token: "xx",
prettyName: false,
// updateInterval: "1000",
title: "Shower",
stripName: false,
values: [{
sensor: "sensor.shower",
icons: [{
"default": "shower"
}
]
},{
sensor: "timer.water",
icons: [{
"default": "water-pump"
}
]
}
]
}
},
{
module: 'MMM-homeassistant-sensors',
position: 'top_left',
config: {
host: "xx",
port: "xx",
https: true,
token: "xx",
prettyName: false,
// updateInterval: "1000",
title: "Namaaz Time",
stripName: false,
values: [{
sensor: "sensor.fajr",
icons: [{
"default": "clock-outline"
}
]
},{
sensor: "sensor.zohr",
icons: [{
"default": "clock-outline"
}
]
},{
sensor: "sensor.maghrib",
icons: [{
"default": "clock-outline"
}
]
}
]
}
},
{
module: 'MMM-UKNationalRail',
position: 'bottom_left',
header: 'Wealdstone Departures',
classes: 'scheduler',
config: {
module_schedule: {from: '0 9 * * 3', to: '0 18 * * 3' },
stationCode: 'HRW', // CRS code for station
app_id: 'xx', // TransportAPI App ID
app_key: 'xx', // TransportAPI App Key
updateInterval: 1 * 60 * 1000,
maxResults: 5, //Optional - Maximum results to display.
showOrigin: false, //Optional - Show the origin of the train in the table
destination: 'EUS',
to_offset: 'PT02:00:00',
operator: 'LM'
}
},
{
module: 'MMM-TFL',
position: 'bottom_left',
config: {
updateTime: 600000,
modes: ['tube'],
lines: 'metropolitan'
}
},
//{
// module: "MMM-AssistantMk2",
// position: "bottom_right",
// config: {
// assistantConfig: {
// latitude: 51.508530,
// longitude: -0.076132,
// },
// micConfig: { // put there configuration generated by auto-installer
// sampleRate : 16000, // audio sample rate
// threshold : 0.1, // silence threshold (rec only)
// thresholdStart: null, // silence threshold to start recording, overrides threshold (rec only)
// thresholdEnd : null, // silence threshold to end recording, overrides threshold (rec only)
// verbose : false, // log info to the console. Use this when you want to check mic working or not.
// silence : 0,
// recorder: "arecord",
// device: "plughw:AK5371",
// },
// responseConfig: {
// useHTML5: true,
// useScreenOutput: true,
// useAudioOutput: true,
// useChime: true,
// timer: 2000,
// myMagicWord: false,
// delay: 0.5
//// playProgram: "mpg321"
// },
//// recorder: "arecord",
// // device: "plughw:AK5371",
//// },
// recipes: [ "with-MMM-Hotword.js"],
// }
//},
// {
// module: "MMM-Hotword",
// position: "bottom_right",
// config: {
// useDisplay: false,
// chimeOnFinish: null,
// recipes: ["with-AMk2v3_smart-mirror.js"],
// mic: {
// recordProgram: "arecord",
// device: "plughw:AK5371",
// },
// },
// },
{
module: 'newsfeed',
position: 'bottom_bar',
config: {
feeds: [
{
title: "BBC News UK",
url: "http://feeds.bbci.co.uk/news/england/rss.xml"
},
{
title: "Sky News",
url: "http://feeds.skynews.com/feeds/rss/world.xml"
}
],
showSourceTitle: true,
showPublishDate: true,
ignoreOldItems: true,
ignoreOlderThan: 50400000,
updateInterval: 10000
}
},
]
};
/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== "undefined") {module.exports = config;}
@sdetweil said in MP3 Player:
@bachoo786 said in MP3 Player:
fs.readdir(musicFolder, (err, files) => {
the modulename.js that runs in the browser cannot read files directly, due to security restrictions ( any script could read ALL your files without you knowing)
this is why the node_helper exists…
so whats the alternative? I had this MMM-QuranPlayer module that was able to read mp3 files from the folders in the “public” directory which was located in the root folder of the module.
I changed from this:
if (MP3.config.musicData) {
const musicList = MP3.createElement("ul", "musicList", "musicList");
MP3.config.musicData.forEach(folderData => {
// Folder item
const folderItem = MP3.createElement("li", "folderItem", `folderItem-${folderData.folderName}`);
folderItem.innerHTML = `
<span class="folderName">${folderData.folderName}</span>
<i class="fa fa-chevron-down"></i>
`;
// Songs list within the folder
const songsList = MP3.createElement("ul", "songsList", `songsList-${folderData.folderName}`);
songsList.style.display = 'none'; // Initially hide the songs list
folderData.songs.forEach(song => {
const songItem = MP3.createElement("li", "songItem", `songItem-${song}`);
songItem.innerHTML = song.substr(0, song.length - 4);
songsList.appendChild(songItem);
});
// Click event listeners
folderItem.addEventListener('click', () => {
songsList.style.display = songsList.style.display === 'none' ? 'block' : 'none'; // Toggle display
folderItem.querySelector('.fa').classList.toggle('fa-chevron-down');
folderItem.querySelector('.fa').classList.toggle('fa-chevron-up');
});
songsList.addEventListener('click', (event) => {
const clickedSongItem = event.target;
if (clickedSongItem.classList.contains('songItem')) {
const songName = clickedSongItem.innerText;
const folderName = folderData.folderName;
MP3.playSong(folderName, songName);
}
});
folderItem.appendChild(songsList);
musicList.appendChild(folderItem);
});
to this:
if (MP3.config.musicData) {
const fs = require('fs');
const path = require('path');
const musicFolder = path.resolve(MP3.config.musicData.musicPath);
const supportedExtensions = this.defaults.extensions; // Use module's default extensions
fs.readdir(musicFolder, (err, files) => {
if (err) {
console.error("Error reading music directory:", err);
// Handle the error - display message to user, etc.
} else {
const musicFiles = files.filter(file => supportedExtensions.includes(path.extname(file).toLowerCase()));
if (musicFiles.length > 0) {
const musicList = MP3.createElement("ul", "musicList");
musicFiles.forEach(musicFile => {
const songItem = MP3.createElement('li', 'songItem');
songItem.innerHTML = musicFile.substr(0, musicFile.length - 4);
songItem.addEventListener('click', () => {
MP3.playSong(musicFile); // Assuming you want to play the song directly
});
musicList.appendChild(songItem);
});
@sdetweil so I made a mistake, i wanted my code to look for the mp3 files automatically in the folders within the music directory.
currently I am getting an error in the developer console:
Uncaught SyntaxError: Unexpected token ',' (at MMM-MP3Player.js:184:2)
its the “,” at the end of
return wrapper
I am trying to have one ‘music’ folder with subfolders for each artist containing their songs. This way, the module would display artists on the frontend, and clicking an artist’s name would show the songs in their folder, and click on the song would then play the mp3 file.
feel like giving up really even though I think I am close
@sdetweil I will .
Nothing says everything is loaded including the mp3 player module.
@sdetweil sorry to mess with your head but I have been working on this for the last 3 hours and have come up with the following that should show the folders on the front end and when any folder is clicked it should reveal the mp3 files. the issue I am facing is that I am having no errors whatsoever but the module will just not show on the front end. I am pulling my hair out now !
these are my files:
node_helper.js:
var NodeHelper = require('node_helper');
const Fs = require('fs');
module.exports = NodeHelper.create({
start: function() {
console.log("Loaded MP3Player node_helper");
},
socketNotificationReceived: function(notification, payload) {
var self = this;
if (notification === 'SOURCE_MUSIC') {
const musicPath = payload.musicPath;
const extensions = payload.extensions;
Fs.readdir(musicPath, (err, folders) => {
if (err) {
console.error("Error reading music directory:", err);
self.sendSocketNotification('ERROR', {message: "Error reading music directory"});
} else {
const musicData = folders.map(folder => ({
folderName: folder,
songs: Fs.readdirSync(`${musicPath}/${folder}`).filter(file => self.checkExt(file, extensions))
}));
self.sendSocketNotification("RETURNED_MUSIC", { musicData: musicData });
}
});
}
},
checkExt: function(file, ext) {
return ext.some(extension => file.toLowerCase().endsWith(extension));
}
});
MMM-MP3Player.js:
var MP3;
var substr;
Module.register("MMM-MP3Player", {
defaults: {
songs: [],
musicPath: "modules/MMM-MP3Player/music",
extensions: ["mp3", "wma", "acc", "ogg"],
songs: null,
autoPlay: false,
random: false,
},
audio: null,
songTitle: null,
mediaPlayer: null,
dataAvailable: true,
curSong :0,
curLength : 0,
time: null,
play: null,
firstTime: true,
substr: null,
getStyles: function(){
return ["MMM-MP3Player.css", "font-awesome.css"];
},
start: function(){
MP3 = this;
console.log("autoPlay configuration:", MP3.config.autoPlay);
Log.info("Starting module: " + MP3.name);
},
getDom: function() {
var wrapper = document.createElement("div");
if (MP3.config.musicData) {
const musicList = MP3.createElement("ul", "musicList", "musicList");
MP3.config.musicData.forEach(folderData => {
// Folder item
const folderItem = MP3.createElement("li", "folderItem", `folderItem-${folderData.folderName}`);
folderItem.innerHTML = `
<span class="folderName">${folderData.folderName}</span>
<i class="fa fa-chevron-down"></i>
`;
// Songs list within the folder
const songsList = MP3.createElement("ul", "songsList", `songsList-${folderData.folderName}`);
songsList.style.display = 'none'; // Initially hide the songs list
folderData.songs.forEach(song => {
const songItem = MP3.createElement("li", "songItem", `songItem-${song}`);
songItem.innerHTML = song.substr(0, song.length - 4);
songsList.appendChild(songItem);
});
// Click event listeners
folderItem.addEventListener('click', () => {
songsList.style.display = songsList.style.display === 'none' ? 'block' : 'none'; // Toggle display
folderItem.querySelector('.fa').classList.toggle('fa-chevron-down');
folderItem.querySelector('.fa').classList.toggle('fa-chevron-up');
});
songsList.addEventListener('click', (event) => {
const clickedSongItem = event.target;
if (clickedSongItem.classList.contains('songItem')) {
const songName = clickedSongItem.innerText;
const folderName = folderData.folderName;
MP3.playSong(folderName, songName);
}
});
folderItem.appendChild(songsList);
musicList.appendChild(folderItem);
});
wrapper.appendChild(musicList);
// Add the rest of the existing code...
MP3.mediaPlayer = MP3.createElement("div", "mediaPlayer", "mediaPlayer");
MP3.audio = MP3.createElement("audio", "audioPlayer", "audioPlayer");
MP3.audio.addEventListener("loadeddata", () => {
MP3.dataAvailable = true;
MP3.curLength = MP3.audio.duration;
MP3.updateDurationLabel();
}),
MP3.audio.addEventListener("ended", () => {
Log.log(" play ended")
MP3.audio.currentTime = 0;
if(MP3.config.autoPlay)
{
MP3.loadNext(MP3.config.random)
}
else
MP3.mediaPlayer.classList.toggle("play");
}),
MP3.audio.addEventListener("timeupdate", () => {
MP3.updateDurationLabel();
}),
MP3.mediaPlayer.appendChild(MP3.audio);
// Add the rest of the controls to MP3.mediaPlayer
var controls = MP3.createElement("div", "controls", false);
MP3.songTitle = MP3.createElement("span", "title", "songTitle");
MP3.setCurrentSong(MP3.curSong);
controls.appendChild(MP3.songTitle);
var discArea = MP3.createElement("div", "discarea", false);
discArea.appendChild(MP3.createElement("div", "disc", false));
var stylus = MP3.createElement("div", "stylus", false);
stylus.appendChild(MP3.createElement("div", "pivot", false));
stylus.appendChild(MP3.createElement("div", "arm", false));
stylus.appendChild(MP3.createElement("div", "head", false));
discArea.appendChild(stylus);
MP3.mediaPlayer.appendChild(discArea);
var buttons = MP3.createElement("div", "buttons", false);
// Previous Button
var prev = MP3.createButton("back", "prevButton", "fa fa-backward");
prev.addEventListener("click", () => {
MP3.mediaPlayer.classList.toggle("play");
MP3.dataAvailable = false;
MP3.loadNext(MP3.config.random);
MP3.audio.play();
MP3.play.getElementsByTagName('i')[0].className = "fa fa-pause";
}, false),
buttons.appendChild(prev);
// Play Button
MP3.play = MP3.createButton("play", "playButton", "fa fa-play");
MP3.play.addEventListener("click", () => {
MP3.mediaPlayer.classList.toggle("play");
if (MP3.audio.paused) {
setTimeout(() => {
MP3.audio.play();
}, 300);
MP3.play.getElementsByTagName('i')[0].className = "fa fa-pause";
MP3.timer = setInterval(MP3.updateDurationLabel, 100);
} else {
//MP3.loadNext(MP3.config.random);
MP3.play.getElementsByTagName('i')[0].className = "fa fa-play";
clearInterval(MP3.timer);
MP3.audio.pause();
}
}, false);
buttons.appendChild(MP3.play);
// Stop Button
var stop = MP3.createButton("stop", "stopButton", "fa fa-stop");
stop.addEventListener("click", () => {
MP3.mediaPlayer.classList.remove("play");
MP3.audio.pause();
MP3.audio.currentTime = 0;
MP3.play.getElementsByTagName('i')[0].className = "fa fa-play";
MP3.updateDurationLabel();
}, false);
buttons.appendChild(stop);
// Next Button
var next = MP3.createButton("next", "nextButton", "fa fa-forward");
next.addEventListener("click", () => {
MP3.mediaPlayer.classList.toggle("play");
MP3.dataAvailable = false;
MP3.loadNext(MP3.config.random);
MP3.play.getElementsByTagName('i')[0].className = "fa fa-play";
}, false);
buttons.appendChild(next);
controls.appendChild(buttons);
var subControls = MP3.createElement("div", "subControls", false);
var duration = MP3.createElement("span", "duration", "currentDuration");
duration.innerHTML = "00:00" + "   ";
subControls.appendChild(duration);
var volumeSlider = MP3.createElement("input", "volumeSlider", "volumeSlider");
volumeSlider.type = "range";
volumeSlider.min = "0";
volumeSlider.max = "1";
volumeSlider.step = "0.01";
volumeSlider.addEventListener("input", () => {
MP3.audio.volume = parseFloat(volumeSlider.value);
}, false);
subControls.appendChild(volumeSlider);
controls.appendChild(subControls);
MP3.mediaPlayer.appendChild(controls);
wrapper.appendChild(MP3.mediaPlayer);
}
if(MP3.firstTime && MP3.config.autoPlay){
console.log("First time and autoPlay are true. Setting firstTime to false.");
MP3.firstTime=false;
}
return wrapper;
},
playSong: function(folderName, songName) {
const songPath = MP3.config.musicPath + '/' + folderName + '/' + songName;
MP3.audio.src = songPath;
MP3.songTitle.innerHTML = songName;
MP3.audio.play();
},
createElement: function(type, className, id){
var elem = document.createElement(type);
if(className) elem.className = className;
if(id) elem.id = id;
return elem;
},
createButton: function(className, id, icon){
var button = document.createElement('button');
button.className = className;
button.id = id;
var ico = document.createElement("i");
ico.className = icon;
button.appendChild(ico);
return button;
},
updateDurationLabel: function() {
var duration = document.getElementById('currentDuration');
if (MP3.dataAvailable && MP3.audio.duration > 0) {
duration.innerText = MP3.parseTime(MP3.audio.currentTime) + " / " + MP3.parseTime(MP3.audio.duration);
} else {
duration.innerText = "00:00 / 00:00";
}
},
parseTime: function(time){
const minutes = Math.floor(time / 60)
const seconds = Math.floor(time - minutes * 60)
const secondsZero = seconds < 10 ? "0" : ""
const minutesZero = minutes < 10 ? "0" : ""
return minutesZero + minutes.toString() + ":" + secondsZero + seconds.toString()
},
setCurrentSong: function(index){
if(MP3.audio!= undefined){
MP3.audio.src = MP3.config.musicPath + '/' + MP3.config.songs[index];
MP3.songTitle.innerHTML = MP3.config.songs[index].substr(0, MP3.config.songs[index].length - 4);
MP3.curSong = index;
}
},
loadNext: function(next){
let index=0;
console.log("loadNext: Autoplay:", MP3.config.autoPlay); // Add this line for logging
MP3.audio.pause();
if(next) index= (MP3.curSong + 1) % MP3.config.songs.length;
else index = (MP3.curSong - 1) < 0 ? MP3.config.songs.length - 1 : MP3.curSong - 1;
MP3.setCurrentSong(index);
MP3.audio.play();
},
notificationReceived: function (notification, payload) {
if(notification === "ALL_MODULES_STARTED")
MP3.sendSocketNotification('SOURCE_MUSIC', MP3.config);
},
socketNotificationReceived: function(notification, payload){
if(notification === "RETURNED_MUSIC")
MP3.config.songs = payload.songs;
// set the initial song index
MP3.setCurrentSong(0);
// paint the player
MP3.updateDom(2);
},
});
MMM-MP3Player.css:
@import url("https://fonts.googleapis.com/css?family=Roboto"); /* Simpler, modern font */
.MMM-MP3Player .songInfo {
flex: 1; /* Fill half of the available space */
padding: 20px;
font-family: 'Roboto', sans-serif;
}
.MMM-MP3Player .songTitle {
font-size: 4em;
font-weight: bold;
color: #333; /* Darker text */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.MMM-MP3Player .container {
position: relative; /* Add this if not present */
/* ...other styles... */
}
.MMM-MP3Player .songsList {
position: absolute;
left: 10px; /* Adjust to align correctly, can be in px or % */
top: -360px; /* Adjust to align correctly, can be in px or % */
width: 50%; /* Adjust to not exceed the container width */
max-width: calc(100% - 40px); /* Subtract total horizontal padding */
align-items: center;
padding: 20px;
box-sizing: border-box;
font-size: 2em;
font-weight: bold;
color: #FFF;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
z-index: 1000;
background-image:
linear-gradient(
to bottom,
rgba(255, 255, 255, 0.8) 0%,
rgba(255, 255, 255, 0.75) 25%,
rgba(255, 255, 255, 0.6) 50%,
rgba(255, 255, 255, 0.4) 75%,
rgba(255, 255, 255, 0.3) 100%
),
url('images/qsonglist.png');
background-size: cover;
background-position: center; border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.MMM-MP3Player .mediaPlayer {
position: absolute;
right: 0; /* Adjust as needed to align to the right */
top: -130px; /* Aligns to the top of the container */
width: 50%; /* Or whatever width you require */
align-items: center;
padding: 20px;
box-sizing: border-box;
justify-content: center;
z-index: 1000;
}
.MMM-MP3Player .controls {
width: 80%;
margin-top: 20px;
}
.MMM-MP3Player .buttons button {
background-color: #4CAF50; /* Example: Green for modern feel */
color: white;
border: none;
border-radius: 50%;
margin-right: 10px;
font-size: 1.2em;
width: 50px;
height: 50px;
box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* Adds depth */
}
.MMM-MP3Player .buttons button:hover {
background-color: #3e8e41; /* Darker green on hover */
cursor: pointer;
}
in my config.js:
I have added it this way:
{
module: "MMM-MP3Player",
position: "bottom_center",
"pages": {"Audio": "bottom_center"},
config: {
musicPath: "modules/MMM-MP3Player/music",
autoPlay: false,
random: false,
loopList: false,
}
},
Can you tell me what am I doing wrong? thanks
@sdetweil ok I will try and explain the “better” method:
I’m basically trying to add a playlist feature to the MP3 player module I’m working on. My initial setup involved adding a songList to MP3Player.js, which lists all the songs—.mp3 files—in the ‘music’ folder of the module. I’ve also added a second folder, ‘music2’, to categorize songs by artist. Each artist’s name is tagged with an ‘h2’ in the CSS, for both songList and songList2.
However, this setup becomes cumbersome because it requires repeating the process for multiple artists, creating many folders and modifying the code each time for songList3, songList4, etc.
I thought a better approach would be to have one ‘music’ folder with subfolders for each artist containing their songs. This way, the module would display artists on the frontend, and clicking an artist’s name would show the songs in their folder.
I did start on this more streamlined method, but it proved challenging, so I reverted to the simpler, original method which we’ve been discussing since yesterday, as that uses a “single” songList displaying songs from the ‘music’ folder and has been working for me. So I have been trying to add another “songList2” to add more artists and their respective music.
I hope that makes sense?
@sdetweil ah right so I need to change it to something like this:
MP3.setCurrentSong(0, 'songName');
Also did you manage to look into my later code which I described as the “better way”
@sdetweil ah thanks will look into it no need to apologise mate.
Did you have a chance to look into my 2 sets of codes ?
@sdetweil
here is the code for trying out the “better” method:
MMM-MP3Player.js:
var MP3;
var substr;
Module.register("MMM-MP3Player", {
defaults: {
songs: [],
musicPath: "modules/MMM-MP3Player/music",
extensions: ["mp3", "wma", "acc", "ogg"],
songs: null,
autoPlay: false,
random: false,
},
audio: null,
songTitle: null,
mediaPlayer: null,
dataAvailable: true,
curSong :0,
curLength : 0,
time: null,
play: null,
firstTime: true,
substr: null,
getStyles: function(){
return ["MMM-MP3Player.css", "font-awesome.css"];
},
start: function(){
MP3 = this;
console.log("autoPlay configuration:", MP3.config.autoPlay);
Log.info("Starting module: " + MP3.name);
},
getDom: function(){
var wrapper = document.createElement("div");
if(MP3.config.folders) {
var folderList = document.createElement("ul");
folderList.className = "folderList";
MP3.config.folders.forEach((folder, index) => {
var folderItem = document.createElement("li");
folderItem.className = "folderItem";
folderItem.textContent = folder.name;
folderItem.onclick = function() {
this.classList.toggle("active");
var songList = this.nextElementSibling;
if (!songList) {
songList = document.createElement("ul");
songList.className = "songList";
folder.songs.forEach(song => {
var songItem = document.createElement("li");
songItem.className = "songItem";
songItem.textContent = song.substr(0, song.length - 4); // removes extension
songItem.onclick = function() {
// Set the song from the specific folder
MP3.setCurrentSong(folder.name, song);
MP3.audio.play();
MP3.play.getElementsByTagName('i')[0].className = "fa fa-pause";
MP3.mediaPlayer.classList.add("play");
MP3.updateDurationLabel();
};
songList.appendChild(songItem);
});
this.parentNode.insertBefore(songList, this.nextSibling);
} else {
songList.parentNode.removeChild(songList);
}
};
folderList.appendChild(folderItem);
});
wrapper.appendChild(folderList);
// 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;
},
setCurrentSong: function(folderName, songName){
if(MP3.audio!= undefined){
MP3.audio.src = MP3.config.musicPath + '/' + folderName + '/' + songName;
MP3.songTitle.innerHTML = songName.substr(0, songName.length - 4); // update song title display
// Update the current song, handling file paths
MP3.curSong = MP3.config.folders.findIndex(folder => folder.name === folderName);
}
},
createElement: function(type, className, id){
var elem = document.createElement(type);
if(className) elem.className = className;
if(id) elem.id = id;
return elem;
},
createButton: function(className, id, icon){
var button = document.createElement('button');
button.className = className;
button.id = id;
var ico = document.createElement("i");
ico.className = icon;
button.appendChild(ico);
return button;
},
updateDurationLabel: function() {
var duration = document.getElementById('currentDuration');
if (MP3.dataAvailable && MP3.audio.duration > 0) {
duration.innerText = MP3.parseTime(MP3.audio.currentTime) + " / " + MP3.parseTime(MP3.audio.duration);
} else {
duration.innerText = "00:00 / 00:00";
}
},
parseTime: function(time){
const minutes = Math.floor(time / 60)
const seconds = Math.floor(time - minutes * 60)
const secondsZero = seconds < 10 ? "0" : ""
const minutesZero = minutes < 10 ? "0" : ""
return minutesZero + minutes.toString() + ":" + secondsZero + seconds.toString()
},
setCurrentSong: function(index){
if(MP3.audio!= undefined){
MP3.audio.src = MP3.config.musicPath + '/' + MP3.config.songs[index];
MP3.songTitle.innerHTML = MP3.config.songs[index].substr(0, MP3.config.songs[index].length - 4);
MP3.curSong = index;
}
},
loadNext: function(next){
let index=0;
console.log("loadNext: Autoplay:", MP3.config.autoPlay); // Add this line for logging
MP3.audio.pause();
if(next) index= (MP3.curSong + 1) % MP3.config.songs.length;
else index = (MP3.curSong - 1) < 0 ? MP3.config.songs.length - 1 : MP3.curSong - 1;
MP3.setCurrentSong(index);
MP3.audio.play();
},
notificationReceived: function (notification, payload) {
if(notification === "ALL_MODULES_STARTED")
MP3.sendSocketNotification('SOURCE_MUSIC', MP3.config);
},
socketNotificationReceived: function(notification, payload){
if(notification === "RETURNED_MUSIC")
MP3.config.songs = payload.songs;
// set the initial song index
MP3.setCurrentSong(0);
// paint the player
MP3.updateDom(2);
},
});
and the updated node-helper.js:
var NodeHelper = require('node_helper');
const Fs = require('fs');
const Path = require('path');
module.exports = NodeHelper.create({
start: function() {
console.log("Loaded MP3Player node_helper");
},
socketNotificationReceived: function(notification, payload){
var self = this;
if(notification == 'SOURCE_MUSIC'){
var folders = this.getFoldersWithSongs(payload.musicPath, payload.extensions);
self.sendSocketNotification("RETURNED_MUSIC", {folders: folders});
}
},
getFoldersWithSongs: function(path, ext){
var folders = [];
var contents = Fs.readdirSync(path, { withFileTypes: true });
contents.forEach(dirent => {
if (dirent.isDirectory()) {
let songFiles = Fs.readdirSync(Path.join(path, dirent.name))
.filter(file => this.checkExt(file, ext));
if (songFiles.length > 0) {
folders.push({name: dirent.name, songs: songFiles});
}
}
});
console.log("mp3 player returning folder list with songs="+ folders)
return folders;
},
checkExt: function(file, ext){
return ext.some(extension => file.toLowerCase().endsWith("." + extension));
}
});