MP3 Player

bachoo786

Hi there

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

and I am trying to make it more nicer by trying to mimic this music player:

What I am struggling with is, is it possible to make a module on magicmirror using html code? because the one from codepen uses html and I am not sure how I can do that?

Any help or guidance will be very much appreciated.

Thanks.

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