Le code HTML
<!DOCTYPE html>
<html>
<head>
<title>Utilitaire de fichiers pour cyberlecteur MP3</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="CSS/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Codystar&family=Big Shoulders Display&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fugaz+One&display=swap" rel="stylesheet">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/bootstrap-slider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/css/bootstrap-slider.min.css">
<script type="text/javascript">
function iterate(titre) {
//alert("coucou2");
mil1Export='"dos": "';
interExport='", "';
mil2Export='num": "';
mil3Export='titre": "';
mil4Export='aut": "';
finExport="\"}, {";
titre=titre.substring(0, (titre.length -4));//j'enlève le.mp3
titre=titre.replace("\'", "\\'");// pour échapper les apostrophes
NumList = document.getElementById('NumeroListe').value; //je récupère le numéro de la liste
asupp = document.getElementById('supp').value; //je récupère le nombre de caractères à enlever au début
DebutNum = document.getElementById('numero').value; //je récupère le chiffre de départ
artiste = document.getElementById('artiste').value; //je récupère le nom de l'artiste
DebutNum=(Number(DebutNum)+compteur);
deb=DebutNum.toString();
valeur =deb.padStart(4, '0'); // je rajoute des zéros devant
titre=titre.substring(asupp, titre.length);//j'enlève le début
compteur++;
exportText=exportText+mil1Export+NumList+interExport+mil2Export+valeur+interExport+mil3Export+titre+interExport+mil4Export+artiste+finExport;//alert(export);
}
var compteur=0;
var exportText="";
function traiterliste() {
compteur=0;
document.getElementById('ListeTraitee').innerHTML=""; //on fait le vide, en cas de répétition
NumList = document.getElementById('NumeroListe').value; //je récupère le numéro de la liste
Nomdata="vinyl"+NumList;
var aTraiter = document.getElementById('ListeSansTraitement').value; //je récupère dans la champ du collage des listes de fichiers
aTraiter=aTraiter.split(/\r\n|\r|\n/);//ici, j'explose en tableau toutes les lignes
exportText="";
aTraiter.forEach(iterate);
exportText=Nomdata+"=\'{\"Titres\": [{"+exportText;
exportText=exportText.substring(0, (exportText.length -4));//j'enlève la fin, car le Json est strict !
exportText=exportText+" } ] }';";
document.getElementById('ListeTraitee').innerHTML=exportText; //on fait le vide, en cas de répétition
}
</script>
</head>
<body>
<div class="jumbotron text-center">
<h2>Utilitaire pour préparation de listes Json pour Juke-Box MP3 DFPlayer</h2>
<h3 id="MESSAGE3"></h3>
<p>
Copier/coller d'après liste des fichiers mp3 sur le finder</em></p>
</div>
</div>
<br> <br>
<div class='coinbis' style=" border-style: solid; width: 90%; margin: 0 auto;">
<div class="form-group" style ="text-align: center;">
<h3>Liste à traiter</h3>
<textarea class="afficheur" id="ListeSansTraitement" width= 90% name='listexistante' rows=20 cols=60 wrap=physical></textarea>
</div>
<br>
<br>
<div class="jumbotron text-center">
<h3 >Réglage paramètres</h3>
Numéro de la liste (vinyl) <input type="" id="NumeroListe" value="1"style= "width:25px;"/> <br>
Nom de l'artiste <input type="" id="artiste" value="Artiste"style= "width:300px;"/> <br>
Supprimer à partir de <input type="" id="supp" value="5"style= "width:20px;"/> caractères<br>
Démarrer à : <input type="" id="numero" value="0100" style= "width:60px;"/> <br>
<button class="btn btn-primary" style=" margin: 0 auto;" onclick="traiterliste();">Traiter cette liste...</button><br>
</div>
<h3 style ="text-align: center;">Liste traitée</h3>
<a >La liste obtenue ci-dessous est la définition au format JSon d'un disque. Il faudra importer cette définition dans la page index.html au format Json</a>
<div class='afficheur' style="font-family: 'Big Shoulders Display', cursive; font-size: 2rem; color: cornflowerblue;" id="ListeTraitee">
<br>
</div> <br>
<div style ="text-align: center;" >
<a class="btn btn-primary btn-sm bi bi-music-note-beamed " href="index.html" role="button">Retour vers le lecteur de playlist</a>
</div>
<br>
</div>
</div>
</body>
</html>
C'est tout
J'espère que ce projet trouvera un écho favorable parmi les internautes. Si vous voulez me contacter, voici mon email (à retaper, pour éviter la collecte automatique d'emails...)
© Copyright Pierre Saunière.Tous droits réservés. Site réalisé par moi-même, avec l'aide de quelques bibliothèques Open Source, of course !