Constat au niveau interface :

Rien de satisfaisant dans ce qui existe.

Ayant acheté ce tout petit circuit aux possibilités simples, mais assez réduites voires aléatoires pour certaines commandes, et après quelques recherches sur le net, je ne trouve que des petits juke-boxes à 3 boutons au schéma simpliste.

Je télécharge donc la documentation du circuit : peu de choses, si ce n’est quelques commandes directes (plus fort, moins fort, nouveau morceau, joue tel fichier de tel dossier, et un sytème de programmation à base de boutons et de résistances de diverses valeurs assez complexe et peu pratique).

Je trouve donc des tutos assez simples, genre juke-box à 3 morceaux...

Ça ne me suffit pas, si je peux mettre 32 ou 64 Mo de musique, il «me faut» une interface digne de la puissance de la puce ! Et puis, mes souvenirs du web, pas si lointains, remontent à la surface , et me crient «Vas-y Pierre, tu as du temps, fais-toi plaisir !»

Le résultat : une appli à l’interface sympa

Etablissement des playlists par simple glissement, boutons divers pour piloter l’équaliseur, les commandes, affichage des titres et des artistes en live, etc...

En résumé, une application pratique à utiliser, mais, convenons-en, assez disproportionnée au niveau de l’utilisation, car un lecteur mp3 doit, en principe, être près de soi (le programmer à distance via le web, donc potentiellement à l’autre bout du monde, il faut bien avouer que je n’en vois pas trop l’intérêt - un programmateur radio restant dans son lit ? Un festivalier faisant une balance son dans la salle ?)
Un développement inutile donc ("Mais Pierre, il y a Deezer maintenant, à quoi bon faire çà ?", me balaye d'un revers de la main la copine de mon fils...)
Peu importe, je le savais depuis le début, mais j'avais mon idée en tête (ce que l'on appelle un projet) et le résultat est exactement ce que je voulais faire (le propre d'un développement : concrétiser par la programmation une idée, une interface, et savoir s'arrêter à un moment, car on peut faire énormément de choses quand on connait cela..)

Et puis il y a là comme une certaine philosophie, à faire quelque-chose de complexe, et qui ne sert pas à grand chose, si ce n’est le plaisir de faire travailler ses neurones, de découvrir plein de choses intéressantes, et de faire partager sa réalisation avec vous.

A ce titre, je suis plutôt content d’apporter (enfin) ma pierre à la communauté Arduino/ESP, car bien sûr je n’ai pas tout écrit, mais surtout assemblé de nombreuses bibliothèques, de nombreux extraits de divers tutos, notamment les parties paramètrages web pour l’ESP, les diverses «libraries» Jquery, Bootstrap et Sortable.js entre autres. Un grand merci au passage à tous ces développeurs et à toute cette communauté OpenSource à qui l’on doit tant !
Puisse donc ce projet peut-être vous servir, et au moins vous donner envie d’aller plus loin dans le web car, je l’ai déjà mentionné, je m’aperçois que ces deux mondes se cotoient sans trop s’apprivoiser (je ne citerai personne, mais j’ai lu plusieurs tutos excellents dans la partie Arduino/ESP, mais pauvrissimes dès qu’il s’agit d’afficher quelque chose).

Simplement piloter à partir d’un smartPhone n’importe quel appareil, le tout en l’ayant «fait maison», je trouve ceci assez gratifiant, on peut imaginer piloter des choses plus importantes, automatiser des appareils, contrôler une machine, pourquoi pas un automatisme plus complexe, toujours avec ces petits microprocesseurs connectés, à quelques euros, bref, l’avenir est plein de surprises... En tout cas, moi, pendant toute la réalisation de ce lecteur MP3 à distance, j’ai pris le même plaisir que lorsque je fabriquais, enfant, des montages en Meccano, le tout en écoutant toute la musique que j’aime (son de guitare blues...)

Ajoût aux commentaires du code

Maintenant, je vais ajouter quelques commentaires à ceux laissés dans le code (j’ai laissé volontairement tous mes commentaires, ainsi que // certains scripts pour si parfois certains veulent mieux comprendre.)

Coté web, donc la page html, la partie la plus délicate à comprendre est la mise en place des disques sous forme d’accordéons. Non les accordéons eux-mêmes, ça, ce sont des bibliothèques qui font ça très bien, mais la façon dont ils se remplissent.
Dans un script JavaScript, on trouve cette partie :

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

Là, pour bien comprendre, il faut connaitre le html, et également la façon de fonctionner des accordéons, mais en gros, on crée pour chaque morceau un <div>, avec une certaine classe pour le titre, puis un <div> par morceau, qui contient lui-même un <p>., etc...
Au passage, ces éléments seront «glissables» vers un autre <div> qui servira de conteneur à la playliste établie. Ce <div> aura bien sûr comme ID le numéro du morceau, par exemple 07*0011, c’est par cet ID que la liste éditée sera récupérée par une commande assez magique (puissante, dirons-nous !) de l’HTML :

                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 + "@";
                		       }
                		       

Astucieux, non ?
Je ne veux pas masquer à ce stade un souci qui m’a occupé une bonne après-midi. Il s’agit d’un affichage que je ne récupérais pas. C’est dans la partie surlignage (un css différent) du morceau en cours. Rappel de l’HTML : un ID est un identificateur unique, ça permet justement de récupérer ou agir sur un élément précis.
Or le système d’établissement des playlists copie les divers morceaux en copiant donc aussi les ID. Je me retrouve donc avec des ID identiques à deux endroits différents : l’un dans l’accordéon (l’origine du morceau, rangé dans son album accordéon), et l’autre dans la liste établie !
Or, je ne le savais pas, html en ce cas ne gère que le premier trouvé. Et comme l’accordéon est, par essence, replié, je ne voyais pas que le surlignage se faisait bien, mais masqué. Chaque programmeur connait cette joie/victoire lorsque, Euréka, il comprend son erreur. J’ai eu l’Euréka dans ma tête, avant même d’ouvrir l’accordéon avec l’élément surligné - un titre de Johnny...

Les 2 codes HTML et ESP/Arduino

Ce qu'il faut bien comprendre, c'est la différence de langages et de programmation entre le langage Arduino qui va piloter le cœur de l'ESP8266, donc le pilotage hard et soft du DFPlayer mini et l'HTML, qui fera le lien entre l'ESP et le monde entier (rien que ça !).

Il y aura deux étapes différentes, deux logiques différentes en cours de développement, deux manières de faire différentes pour installer le code sur le même support !
Je ne m'étendrai pas sur la manière d'envoyer le sketch sur l'ESP, un tas de tutos existent pour ceci, il faut juste avoir les bonnes librairies installées, sinon c'est comme si on gravait une UNO.
En effet, autant l'IDE Arduino va compiler le code et le graver dans la partie réservée de l'ESP8266, autant la partie HTML, ainsi que d'autres fichiers nécessaires à l'appli ne seront que "banalement" copiés dans la mémoire EEPROM disponible.
Il faudra au passage débugger avant, il n'y a aucune vérification. Comme c'est de l'HTML, un simple navigateur suffit à faire les tests. Voir ci-joint la facilité de mise à jour, grâce à l'utilitaire de LilleFS, tout le dossier compris dans le dossier data est intégralement recopié, avec les sous-dossiers et tout ce qu'ils contiennent...

Le code HTML

Le code est largement commenté. J'ai souvent laissé volontairement quelques traces d'aide au debbuggage