Establishment of playlists by simple sliding, various buttons to control the equalizer, controls, display of titles and artists live, etc ...

In summary, a practical application to use, but, let's admit, quite disproportionate in terms of use, because an mp3 player must, in principle, be near you (program it remotely via the web, therefore potentially at home. On the other side of the world, I must admit that I don't really see the point - a radio programmer staying in bed?
A useless development therefore ("But Pierre, there is Deezer now, what's the point of doing that?", sweeps me away my son's girlfriend ...) Regardless, I knew it from the start, but I had my idea in mind (what is called a project) and the result is exactly what I wanted to do (the characteristic of a development: make it happen through programming an idea, an interface, and knowing how to stop at a point, because you can do a lot of things when you know that ..)

And then there is a certain philosophy there, to do something complex, and which is of little use, if it is not the pleasure of making your neurons work, of discovering lots of interesting things, and of share its achievement with you.

As such, I am rather happy to bring (finally) my stone to the Arduino / ESP community, because of course I did not write everything, but especially assembled many libraries, many extracts from various tutorials, in particular the web settings parts for ESP, the various Jquery, Bootstrap and Sortable.js “libraries” among others. A big thank you in passing to all these developers and to this whole OpenSource community to whom we owe so much!
May this project perhaps be of use to you, and at least make you want to go further in the web because, as I have already mentioned, I realize that these two worlds rub shoulders without getting too tamed (I will not quote anyone, but I have read several excellent tutorials in the Arduino / ESP part, but very poor when it comes to displaying something).

Simply control any device from a smartPhone, all while having it "homemade", I find this quite rewarding, we can imagine controlling more important things, automating devices, controlling a machine, why not a more complex automation, always with these small microprocessors connected, at a few dollars, in short, the future is full of surprises ... In any case, me, during all the realization of this remote MP3 player, I took the same pleasure as when I made, as a child, assemblies in Meccano, while listening to all the music I love.

Now I'm going to add some comments to the ones left in the code (I've left all my comments on purpose, as well as // some scripts so sometimes some want to understand better.)

On the web side, so the html page, the most difficult part to understand is the placement of the disks in the form of accordions. Not the accordions themselves, that is libraries that do that very well, but the way they fill up.
In a JavaScript script, we find this part:

let cpt=NombreDisques();
               		for (var numDisque = 1; numDisque < (cpt+1); numDisque++) {
               			let dossier= "Disque n°"+numDisque;
               			let collaps = "collapsible"+numDisque;
               			let malist="MaListe"+numDisque;
               			str1 = toString(numDisque); // pour gérer DFP qui veut des noms de dossiers en 01, 02, etc.		
               			j=(numDisque.toString());   // idem
               			let nom="**"+j.padStart(2, '0'); // idem
               			let monID="titredisque"+numDisque;
               			var Dat = window['vinyl' + numDisque];//attribution dynamique des noms de variables
               			var Lis = ('MaListe' + numDisque); // idem...
               			var TitreDisque=('titredisque' + numDisque);// c'est pour ajouter l'auteur après le numéro de dossier (ou du disque...)
               			var DefDisque = document.createElement('div');//on crée un div pour l'onglet entier de l'accordéon
               				DefDisque.classList.add('card', 'bg-warning');
               				var Le_div = document.createElement('div');// puis je crée un div conteneur du titre
               				Le_div.classList.add('card-header');
               				var Le_a = document.createElement('a');// avec son a et ses attributs
               				Le_a.classList.add('card-link', 'collapsed');
               				Le_a.style.cssText = " font-family: 'Fugaz One', cursive; font-size: 2rem; color: red;" ;
               				Le_a.setAttribute("data-toggle","collapse");
               				Le_a.setAttribute("data-parent","accordion");
               				Le_a.href="#"+collaps;
               				Le_a.id=monID;
               				Le_a.textContent = dossier;// le titre en question avec l'indexation automatique
               				Le_div.appendChild(Le_a);// établissement de la hiérarchie
               				DefDisque.appendChild(Le_div);// idem
               				
               
               			var ContenuDisque = document.createElement('div');// puis un conteneur d'accordéon
               			ContenuDisque.classList.add('collapse');
               			ContenuDisque.id=collaps;// avec l'indextation automatique
               			var cont = document.createElement('div');
               			cont.classList.add('card-footer');
               			var divListe = document.createElement('div');
               			divListe.id=malist;
               			var morceaux = JSON.parse(Dat);// et là je remplis les div de chaque morceau (les morceaux de musiques en lisant et exploitant les définitions Json. C'est un peu le cœur de la page, où JavaScript est bien exploité !
               			
               				    for(let i = 0; i < morceaux.Titres.length; i++) { // remplissage pour chacun des disques de tous les titres
               				      var monMorceau = document.createElement('div');
               				      var Parametre1 = document.createElement('p');
               				      var Parametre2 = document.createElement('b');
               				      var Parametre3 = document.createElement('b');
               				      
               				    	monMorceau.id = morceaux.Titres[i].dos +"*"+morceaux.Titres[i].num;   //on pourra ainsi identifier le morceau par son id...      
               						    			      	               
               				      Parametre1.innerHTML =  morceaux.Titres[i].titre ;
               				      monMorceau.appendChild(Parametre1);
               				      divListe.appendChild(monMorceau); 
               				    }				    
               				    auteur=morceaux.Titres[1].aut;// je prends le premier de la liste
               				Le_a.insertAdjacentHTML('beforeend', " : "+auteur); 			
               			cont.appendChild(divListe);
               			ContenuDisque.appendChild(cont);
               			DefDisque.appendChild(ContenuDisque);
               			document.getElementById("accordion").appendChild(DefDisque); 
               		
                 	}
               
                

                const myNodelist=document.getElementById("listePlayListe").getElementsByTagName("div");// ici, je récupère la liste avec les éventuels ajouts, par ses ID
                Cette puissante commande me sélectionne les div «enfants» de la div ayant pour ID «listePlayListe», il ne me reste plus qu’à récupérer ma playlist, séparée dans la boucle par des @
                		var plList = "";
                		       for(var i = 0; i < myNodelist.length; ++i){
                		           plList += myNodelist[i].id + "@";
                		       }