MP3 Player

sdetweil · Apr 16, 2024, 3:07 PM

@bachoo786 change the one line of code

mumblebaj · Apr 16, 2024, 3:07 PM

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

sdetweil · Apr 16, 2024, 4:32 PM

@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 · Apr 17, 2024, 3:31 PM

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

bachoo786 · Apr 18, 2024, 12:50 PM

@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 · Apr 18, 2024, 1:04 PM

@bachoo786 said in MP3 Player:

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

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

bachoo786 · Apr 18, 2024, 1:04 PM

@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 · Apr 18, 2024, 1:07 PM

@bachoo786 what is on line 195

bachoo786 · Apr 18, 2024, 1:09 PM

@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 · Apr 18, 2024, 1:20 PM

@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