MP3 Player

[sdetweil]

@bachoo786 yes just return the html from getDom

[bachoo786]

@sdetweil do you mind showing my an example? I cant get my head round with the html and a magic mirror module. thank you for the heads up

[sdetweil]

@bachoo786 a module returns just a div containing the html content. in text form or in node form

 '<div><p>this is a paragraph</><table><th>...</th><tr>...</>tr></table></div>'

or you create the same structure with document.createElement(type). where type is a string with the html element type, ‘div’, ‘table’…

i helped jim write that module.

if the content needs access to some scripts, then u tell mm about them in the response to the getScripts method. likewise for css the module can provide a file thru the response to getStyles

in either case you have to do all the work of ordering the content correctly
mm just injects the content in the page fom where you configured the module position

i created a routine to create the element put it under the parent, and is classes and set its value

see it and how its used in my birthdaylist module

[bachoo786]

@sdetweil

so i had modified the mp3 player module and here is the js file:

/* MagicMIrror Module - MMM-MP3Player
 *
 * This is a 3rd Party Module for the [MagicMirror² By Michael Teeuw http://michaelteeuw.nl]
 * (https://github.com/MichMich/MagicMirror/).
 *
 * A mp3 player -- 
 * can use a url or a local directory (music) 
 *
 * NOT tested with Raspberry Pi.
 * It DOES work with Windows 10!!!
 *
 * version: 1.0.0
 *
 * Module created by @justjim1220 @Seann & @sdetweil
 *
 * Licensed with a crapload of good ole' Southern Sweet Tea
 * and a lot of Cheyenne Extreme Menthol cigars!!!
 */

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.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");
                };
            }(i));
            songList.appendChild(listItem);
        }
        wrapper.appendChild(songList);

        // 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.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) {
        duration.innerText = MP3.parseTime(MP3.audio.currentTime) + " / " + MP3.parseTime(MP3.curLength);
    } else {
        // Since 'index' is not defined here, let's use MP3.curSong instead
        duration.innerText = MP3.parseTime(MP3.audio.currentTime).substr(0, MP3.config.songs[MP3.curSong].length - 4);
    }
},

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

i am trying to get help from chatgpt to integrate the codepen music player style and i am told to replace the getdom function to this:

getDom: function() {
    var wrapper = document.createElement("div");
    wrapper.className = "music-player";

    // Using the first song as the default display if songs are available
    var currentSongTitle = this.config.songs.length > 0 ? this.config.songs[this.curSong].title : 'No song selected';
    var currentArtist = this.config.songs.length > 0 ? this.config.songs[this.curSong].artist : '';

    // Constructing the player's main section with the current song's info
    wrapper.innerHTML = `
        <div class="player-main">
            <div class="main-current">
                <div class="current-keyvisual">
                    <!-- Placeholder for current song image; adapt as necessary -->
                    <img src="path/to/your/default/image.png" />
                </div>
                <div class="current-info">
                    <h1>${currentSongTitle}</h1>
                    <p>${currentArtist}</p>
                </div>
            </div>
            <div class="main-control">
                <!-- Placeholder for controls; will be filled in programmatically -->
            </div>
        </div>
        <ul class="player-list">
            <!-- Songs list will be dynamically populated -->
        </ul>
    `;

    // Dynamically populate the song list
    var songList = wrapper.querySelector(".player-list");
    this.config.songs.forEach((song, index) => {
        var listItem = document.createElement("li");
        listItem.innerHTML = `
            <img class="list-cover" src="${song.cover}" />
            <div class="list-info">
                <div class="info-title">${song.title}</div>
                <div class="info-artist">${song.artist}</div>
            </div>
        `;
        listItem.addEventListener("click", () => {
            this.setCurrentSong(index);
            this.audio.play();
            // Update play/pause button and song info as needed
        });
        songList.appendChild(listItem);
    });

    // Programmatically add controls to the main-control div
    var controlsContainer = wrapper.querySelector(".main-control");
    controlsContainer.appendChild(this.play); // Reusing the play button you've already created
    // Add other controls (previous, next, stop) by reusing your existing elements or creating new ones if needed

    return wrapper;
},

the buttons and controls are not integrated I think

[KristjanESPERANTO]

@bachoo786 said in MP3 Player:

I am tyring to modify this mp3 player module: https://github.com/justjim1220/MMM-MP3Player

Maybe use this newer fork as base: https://github.com/x3mEr/MMM-MP3Player

[bachoo786]

@KristjanESPERANTO hey thanks for that. how do i control the buttons? it says its done via notifications but I dont want to install another module to control the playback. is it possible to just use buttons like play,pause,stop,next and previous?

i am running my magic mirror on a 7 inch touch screen display

[sdetweil]

@bachoo786 said in MP3 Player:

MP3.createElement(“ul”, “songList”, "

you cant create multiple elements at once
https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

songList is not an html element

html is not magic just grunt work on laying out tye structure
css is the magic. it can turn the output into completely different looking stuff.

im a teacher, not doer.
first thing is to get your head around the way you want it to look, draw it on paper
then side by side create the html view on paper. start w div,etc.
figure out where the data (song) components go title, image…
figure out where there are repeating elements… all this is for A song, and it repeats for the next

then figure out the user interaction. play/stop, progress bar.
there is no magic. you can create a button, but YOU have to attach a routine yo the button for when its pressed. gor a progress bar, you have to start some timer, with routine , to get the progress as a nunber% calculate what the progress bad element needs and then tell it to change.
that means you need to have a place where the progress bar element is known to use it

once you figure this out, then you can create code to do it.
chatgpt is a cheat waste of time. it can give you the shell of something, but it doesnt know the business logic. thats your job. and THAT is the work.

[sdetweil]

@bachoo786 said in MP3 Player:

how do i control the buttons?

your chatgpt code added the event/notification handler (eventlistener)

        listItem.addEventListener("click", () => {
            this.setCurrentSong(index)

[sdetweil]

@bachoo786 i looked thru the code and see we used a routine to create the elements so my comments above were misleading. sorry.

my newer routine also adds parent and value
from the birthdayList module referenced above

	// create document element worker
	createEl : function (type, id, className, parent, value) {
		var el= document.createElement(type)
		if(id)
			el.id = id
		if(className)
			el.className = className
		if(parent)
			parent.appendChild(el)
		if(value) {
			var e = document.createTextNode(value)
			el.appendChild(e)
		}

		return el
	},

and how its used

	getDom: function() {
		var wrapper = this.createEl("div",null,null,null,null);
		if(this.suspended==false){

			if(Object.keys(this.active_birthdays).length > 0) {

				let counter = 0

				// create your table here
				var table = this.createEl("table", "birthday-table","TABLE", wrapper, null);

				// create table header here, array of column names

				var table_header = this.createTableHeader(table, null, [" "," "])

				// create looped row section
				var tBody = this.createEl('tbody', "birthday-tbody", "TBODY", table, null);

this makes the main code smaller and more readable.
just like the html indentation, the elements have parent/child relationships
you have to build them either way

[bachoo786]

@sdetweil

Sam I appreciate you are a teacher and honestly I know that you help and teach everyone around here. I believe I am nearly there with this mp3 player module but its just the ui is not that aesthetic, hence why I thought of changing it.

however I did build another module some what a religious one but it can be used as an mp3 player if one wishes. here are the files:

MMM-QuranPlayer.js:

Module.register("MMM-QuranPlayer", {
    // Default module config.
    defaults: {},


    // start method
    start: function() {
        this.reciters = [];
        this.selectedReciter = null;
        this.surahs = [];
        this.selectedSurah = null;
        this.sendSocketNotification("GET_RECITERS");
        this.currentIndex = 0; 
    },

    getStyles: function() {
        return ["MMM-QuranPlayer.css"];
    },

    // Override dom generator to build the UI
    getDom: function() {
        var wrapper = document.createElement("div");
        wrapper.className = "MMM-QuranPlayer";

        var leftPanel = document.createElement("div");
        leftPanel.className = "left-panel";
        var rightPanel = document.createElement("div");
        rightPanel.className = "right-panel";

        this.audioPlayer = document.createElement("audio");
        this.audioPlayer.className = "audio-player";
        this.audioPlayer.controls = true;
        rightPanel.appendChild(this.audioPlayer);

        this.reciters.forEach((reciter) => {
            var folderElement = document.createElement("div");
            folderElement.innerHTML = reciter;
            folderElement.className = "folder";
            folderElement.onclick = () => {
                this.selectedReciter = reciter;
                this.sendSocketNotification("GET_SURAH_LIST", reciter);
            };
            leftPanel.appendChild(folderElement);
        });

        var surahListElement = document.createElement("div");
        surahListElement.className = "surah-list";
        leftPanel.appendChild(surahListElement);

var controls = ["Play", "Pause", "Stop", "Next", "Previous"];
controls.forEach((control) => {
    var controlElement = document.createElement("div");
    controlElement.innerHTML = control;
    controlElement.className = "control";
    // Bind the actual functionalities here, inside the loop
    controlElement.onclick = () => {
        if (control === "Play") {
            this.playSurah(this.selectedSurah); // Assumes this.selectedSurah is the surah to play
        } else if (control === "Pause") {
            this.pauseAudio();
        } else if (control === "Stop") {
            this.stopAudio();
        } else if (control === "Next") {
            this.nextSurah();
        } else if (control === "Previous") {
            this.previousSurah();
        }


        // Implement Next and Previous based on your app logic
    };
    rightPanel.appendChild(controlElement);
});
        wrapper.appendChild(leftPanel);
        wrapper.appendChild(rightPanel);

        return wrapper;
    },

    socketNotificationReceived: function(notification, payload) {
        if (notification === "RECITERS_RESULT") {
            this.reciters = payload;
            this.updateDom();
        } else if (notification === "SURAH_LIST_RESULT") {
            var surahListElement = document.querySelector(".surah-list");
            surahListElement.innerHTML = "";
            payload.forEach((surah) => {
                var surahElement = document.createElement("div");
                surahElement.innerHTML = surah;
                surahElement.className = "surah";
                surahElement.onclick = () => {
                    this.selectedSurah = surah;
                    this.playSurah(surah);
                };
                surahListElement.appendChild(surahElement);
            });
        }
    },

playSurah: function(surah) {
    let index = this.surahs.indexOf(surah); // Find the index of the surah
    if (index !== -1) {
        this.currentIndex = index; // Update the current index
    }
    if (this.selectedReciter && surah) {
        this.audioPlayer.src = this.getFileUrl(this.selectedReciter, surah);
        this.audioPlayer.play();
        this.selectedSurah = surah; // Update the selected surah
    }
},
    pauseAudio: function() {
        this.audioPlayer.pause();
    },

    stopAudio: function() {
        this.audioPlayer.pause();
        this.audioPlayer.currentTime = 0;
    },

nextSurah: function() {
    if (this.currentIndex < this.surahs.length - 1) {
        this.currentIndex++;
        this.selectedSurah = this.surahs[this.currentIndex];
        this.playSurah(this.selectedSurah);
    } else {
        // Loop to the start or handle as desired if you're at the end of the list
        this.currentIndex = 0;
        this.selectedSurah = this.surahs[this.currentIndex];
        this.playSurah(this.selectedSurah);
    }
},

previousSurah: function() {
    if (this.currentIndex > 0) {
        this.currentIndex--;
        this.selectedSurah = this.surahs[this.currentIndex];
        this.playSurah(this.selectedSurah);
    } else {
        // Loop to the end or handle as desired if you're at the start of the list
        this.currentIndex = this.surahs.length - 1;
        this.selectedSurah = this.surahs[this.currentIndex];
        this.playSurah(this.selectedSurah);
    }
},
    // Helper function to construct the URL to the MP3 file
    getFileUrl: function(reciter, surah) {
        return `/modules/MMM-QuranPlayer/public/${reciter}/${surah}.mp3`;
    },
});

node_helper.js:

var NodeHelper = require("node_helper");
const fs = require("fs");
const path = require("path");

module.exports = NodeHelper.create({
    start: function() {
        this.expressApp.get('/MMM-QuranPlayer/play', (req, res) => {
            res.send("Playing...");
        });
    },

    socketNotificationReceived: function(notification, payload) {
        if (notification === "GET_RECITERS") {
            this.sendReciters();
        } else if (notification === "GET_SURAH_LIST") {
            this.sendSurahList(payload);
        } else if (notification === "PLAY_SURAH") {
            console.log(`Playing ${payload.surah} by ${payload.reciter}`);
        }
    },

    sendReciters: function() {
        const recitersDir = path.join(this.path, "public");
        fs.readdir(recitersDir, (err, files) => {
            if (err) {
                this.sendSocketNotification("RECITERS_RESULT", []);
                return;
            }
            this.sendSocketNotification("RECITERS_RESULT", files);
        });
    },

    sendSurahList: function(reciter) {
        const surahDir = path.join(this.path, "public", reciter);
        fs.readdir(surahDir, (err, files) => {
            if (err) {
                this.sendSocketNotification("SURAH_LIST_RESULT", []);
                return;
            }
            this.sendSocketNotification("SURAH_LIST_RESULT", files.map(file => file.replace('.mp3', '')));
        });
    },
});

and the css:

.MMM-QuranPlayer {
    position: absolute; /* Absolute positioning relative to the nearest positioned ancestor or to the body */
    top: 70%; /* Start at half the height of the screen */
    left: 0; /* Align the left of the module to the left of the screen */
    width: 100vw; /* Full width of the viewport */
    height: 50vh; /* Half the height of the viewport */
    display: flex;
    flex-direction: row; /* Align children horizontally */
    transform: translateY(-50%); /* Shift upwards by half the module's height */
    justify-content: space-around; /* Even space around items */
}

.MMM-QuranPlayer .left-panel,
.MMM-QuranPlayer .right-panel {
    flex-basis: 50%; /* Each panel will take up to 50% of the module's width */
    display: flex;
    flex-direction: column;
    justify-content: start; /* Align items to the start of the column */
    align-items: center; /* Center items horizontally */
    overflow-y: auto; /* Allows scrolling for overflowing content */
    margin-top: 20px; /* Adds some space at the top inside the panel */
}

.MMM-QuranPlayer .left-panel {
    flex-basis: 50%; /* Each panel will take up to 50% of the module's width */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center items vertically within the panel */
    align-items: flex-start; /* Align items to the start (left side) of the panel */
    overflow-y: auto; /* Allows scrolling for overflowing content */
    height: 100vh; /* Set the height to match the right panel or as needed */
    margin-top: 0; /* Reset any additional margin */
    transform: translateY(-50%); /* Shift upwards by half the module's height */
    padding-top: 60%; /* Adjust this value to push the content down */
}

body .MMM-QuranPlayer .right-panel {
    align-items: flex-end;
    justify-content: center;
    height: 100vh;
}

body .MMM-QuranPlayer .folder,
body .MMM-QuranPlayer .control {
    margin: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #60DD8E;
    cursor: pointer;
    width: auto;
}

body .MMM-QuranPlayer .audio-player {
    width: 100%;
    max-width: 400px; /* Set a max-width if necessary */
}

I am trying to achieve something similar to the mp3-player module but just make it nicer and also have the module full screen on the 7 inch display like a dashboard, in which the module is split in the middle with the left hand side being the playlist i.e. all the mp3 files as per the folders. and the right hand side being the actual mp3 player with all the controls and functions etc.