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