Metadonnées MP3 avec JavaScript et la librairie Mutag
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MP3 Metadata</title>
<!-- Librairie Mutag https://github.com/chunqiuyiyu/mutag
Télécharger https://raw.githubusercontent.com/chunqiuyiyu/mutag/master/dist/mutag.min.js -->
<script src="mutag.min.js"></script>
</head>
<body>
<input id="fileInput" type="file">
<br>
<img id="albumArt" src="" alt="" style="width: 150px; height: 150px;">
<p>Titre : <span id="title"></span></p>
<p>Album : <span id="album"></span></p>
<p>Artiste : <span id="artist"></span></p>
<p>Année : <span id="year"></span></p>
<script>
// mutag pour charger les métadonnées
const mutag = window.mutag;
// L'élément parcourir
const fileInputElement = document.getElementById("fileInput");
// Les éléments pour afficher les metadonnées
const albumArtElement = document.getElementById("albumArt");
const titleElement = document.getElementById("title");
const albumElement = document.getElementById("album");
const artistElement = document.getElementById("artist");
const yearElement = document.getElementById("year");
// Quand un fichier est chargé
fileInputElement.onchange = () => {
const selectedFile = fileInputElement.files[0];
console.log(selectedFile);
// Pour le fichier chargé tentative de chargement des métadonnées
mutag.fetch(selectedFile).then((tags) => {
console.log(tags);
// Affiche le blob dans l'élément img
albumArtElement.src = URL.createObjectURL(tags.APIC);
// Affiche les autres metadonnées (titre, album, artiste, année)
titleElement.innerHTML = tags.TIT2;
albumElement.innerHTML = tags.TALB;
artistElement.innerHTML = tags.TPE1;
yearElement.innerHTML = tags.TYER;
});
}
</script>
</body>
</html>Vous pouvez consulter le Github de la librairie Mutag
Commentaires
Enregistrer un commentaire