Lecteur MP3 en JavaScript : tuto avec visualiseur en 4 étapes

Dans ce tutoriel, tu vas créer un lecteur MP3 en JavaScript, avec HTML, CSS et Bootstrap : charger un fichier audio depuis ton appareil, le lire, le mettre en pause ou l’arrêter, régler le volume, suivre la progression et afficher un visualiseur audio animé. Un projet concret pour découvrir l’élément audio et la Web Audio API.

Niveau : débutant à intermédiaireDurée : ~1 hHTML · CSS · Bootstrap · JavaScriptCode source gratuit

Lecteur MP3 en JavaScript avec visualiseur audio, boutons Play, Pause et Stop — Le résultat final : le lecteur MP3 avec son visualiseur audio

Télécharger le code source du projet sur GitHub

Sommaire

Ce que tu vas construire : un lecteur MP3 en JavaScript

Ce lecteur MP3 en JavaScript fonctionne directement dans le navigateur, sur ordinateur comme sur smartphone. Aucun serveur n’est nécessaire : le fichier audio reste sur ton appareil.

📂 Charger un MP3Choisis un fichier audio depuis ton appareil.

▶️ ContrôlesBoutons Play, Pause et Stop.

🔊 Volume et progressionUn curseur de volume et une barre de progression.

📊 VisualiseurDes barres animées qui suivent la musique en temps réel.

Prérequis

Les bases de HTML, CSS et JavaScript
Un éditeur de code et un navigateur récent
Un fichier MP3 pour tester
Aucune installation : Bootstrap est chargé via CDN

💡

Nouveau en JavaScript ?

Commence par la calculatrice en HTML, CSS et JavaScript pour découvrir les événements et le DOM.

Arborescence du projet

lecteur-mp3/ ├── mp3.html # structure du lecteur ├── mp3.css # mise en forme ├── mp3.js # logique audio et visualiseur └── logo.png # ton logo

Étape 1 : la structure HTML (mp3.html)

La page contient un sélecteur de fichier, l’élément <audio>, un <canvas> pour le visualiseur, les boutons de contrôle, une barre de progression et un curseur de volume, le tout dans une carte Bootstrap :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lecteur MP3</title>
    <!-- Lien vers Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <!-- Votre CSS -->
    <link rel="stylesheet" href="mp3.css">
</head>
<body>
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <div id="image-container" class="mb-5 d-flex justify-content-center">
                            <img id="image" src="logo.png" alt="Image" class="img-fluid">
                        </div>
                        <h3 class="card-title text-center" style="color: blue;"><b>Lecteur MP3 / MP3 MediaPlayer</b></h3>
                        <input type="file" id="file-input" class="form-control mb-3">
                        <audio id="audio" class="w-100 d-none" controls>
                            Votre navigateur ne supporte pas l'élément audio.
                        </audio>
                        <canvas id="visualizer" class="w-100" height="100"></canvas>
                        <div class="text-center mb-3">
                            <button id="play" class="btn btn-primary mr-2">Play</button>
                            <button id="pause" class="btn btn-secondary mr-2">Pause</button>
                            <button id="stop" class="btn btn-danger">Stop</button>
                        </div>
                        <div class="progress">
                            <div id="progress-bar" class="progress-bar" role="progressbar" style="width: 0;"></div>
                        </div>
                        <div class="mt-3">
                            <input type="range" id="volume" class="custom-range" min="0" max="1" step="0.01" value="1">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Lien vers jQuery et Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <!-- Votre fichier JavaScript -->
    <script src="mp3.js"></script>
</body>
</html>

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lecteur MP3</title>
    <!-- Lien vers Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <!-- Votre CSS -->
    <link rel="stylesheet" href="mp3.css">
</head>
<body>
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <div id="image-container" class="mb-5 d-flex justify-content-center">
                            <img id="image" src="logo.png" alt="Image" class="img-fluid">
                        </div>
                        <h3 class="card-title text-center" style="color: blue;"><b>Lecteur MP3 / MP3 MediaPlayer</b></h3>
                        <input type="file" id="file-input" class="form-control mb-3">
                        <audio id="audio" class="w-100 d-none" controls>
                            Votre navigateur ne supporte pas l'élément audio.
                        </audio>
                        <canvas id="visualizer" class="w-100" height="100"></canvas>
                        <div class="text-center mb-3">
                            <button id="play" class="btn btn-primary mr-2">Play</button>
                            <button id="pause" class="btn btn-secondary mr-2">Pause</button>
                            <button id="stop" class="btn btn-danger">Stop</button>
                        </div>
                        <div class="progress">
                            <div id="progress-bar" class="progress-bar" role="progressbar" style="width: 0;"></div>
                        </div>
                        <div class="mt-3">
                            <input type="range" id="volume" class="custom-range" min="0" max="1" step="0.01" value="1">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Lien vers jQuery et Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <!-- Votre fichier JavaScript -->
    <script src="mp3.js"></script>
</body>
</html>

mp3.html

<input type= »file »> : permet de choisir un fichier MP3
<audio> : l’élément natif qui lit le son
<canvas id= »visualizer »> : la zone de dessin du visualiseur
Les boutons Play, Pause et Stop, la barre de progression et le curseur de volume

Étape 2 : la mise en forme (mp3.css)

Bootstrap gère l’essentiel. Ce fichier ajoute l’ombre et les coins arrondis de la carte, le style du visualiseur et des curseurs :

/* style.css */
body {
    background-color: #f8f9fa;
}

.card {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

#image-container {
    width: 100%;
    overflow: hidden;
}

#image {
    width: 100%;
    height: auto;
    max-width: 200px; /* Ajustez cette valeur en fonction de vos besoins */
}

.btn {
    border-radius: 20px;
}

.progress {
    height: 10px;
    border-radius: 5px;
}

.progress-bar {
    background-color: #007bff;
}

.custom-range::-webkit-slider-thumb {
    background-color: #007bff;
}

#visualizer {
    background-color: #f0f0f0;
    border-radius: 10px;
}

/* style.css */
body {
    background-color: #f8f9fa;
}

.card {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

#image-container {
    width: 100%;
    overflow: hidden;
}

#image {
    width: 100%;
    height: auto;
    max-width: 200px; /* Ajustez cette valeur en fonction de vos besoins */
}

.btn {
    border-radius: 20px;
}

.progress {
    height: 10px;
    border-radius: 5px;
}

.progress-bar {
    background-color: #007bff;
}

.custom-range::-webkit-slider-thumb {
    background-color: #007bff;
}

#visualizer {
    background-color: #f0f0f0;
    border-radius: 10px;
}

mp3.css

Étape 3 : la logique audio (mp3.js)

C’est le cœur de ton lecteur MP3 en JavaScript. Ce fichier charge le son, branche les boutons et dessine le visualiseur :

// script.js
document.addEventListener("DOMContentLoaded", function() {
    var audio = document.getElementById("audio");
    var fileInput = document.getElementById("file-input");
    var playButton = document.getElementById("play");
    var pauseButton = document.getElementById("pause");
    var stopButton = document.getElementById("stop");
    var progressBar = document.getElementById("progress-bar");
    var volumeControl = document.getElementById("volume");
    var canvas = document.getElementById("visualizer");
    var canvasCtx = canvas.getContext("2d");

    var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    var analyser = audioCtx.createAnalyser();
    var source;
    var dataArray;
    var bufferLength;

    fileInput.addEventListener("change", function(event) {
        var file = event.target.files[0];
        if (file) {
            var objectURL = URL.createObjectURL(file);
            audio.src = objectURL;
            audio.classList.remove("d-none");

            audio.addEventListener('play', function() {
                if (!source) {
                    source = audioCtx.createMediaElementSource(audio);
                    source.connect(analyser);
                    analyser.connect(audioCtx.destination);
                    analyser.fftSize = 256;
                    bufferLength = analyser.frequencyBinCount;
                    dataArray = new Uint8Array(bufferLength);
                }
                drawVisualizer();
            });
        }
    });

    function drawVisualizer() {
        requestAnimationFrame(drawVisualizer);

        analyser.getByteFrequencyData(dataArray);

        canvasCtx.fillStyle = 'rgba(240, 240, 240, 1)';
        canvasCtx.fillRect(0, 0, canvas.width, canvas.height);

        var barWidth = (canvas.width / bufferLength) * 2.5;
        var barHeight;
        var x = 0;

        for (var i = 0; i < bufferLength; i++) {
            barHeight = dataArray[i];

            canvasCtx.fillStyle = 'rgba(0, 123, 255, ' + (barHeight / 256) + ')';
            canvasCtx.fillRect(x, canvas.height - barHeight / 2, barWidth, barHeight / 2);

            x += barWidth + 1;
        }
    }

    playButton.addEventListener("click", function() {
        audio.play();
    });

    pauseButton.addEventListener("click", function() {
        audio.pause();
    });

    stopButton.addEventListener("click", function() {
        audio.pause();
        audio.currentTime = 0;
    });

    audio.addEventListener("timeupdate", function() {
        var percentage = (audio.currentTime / audio.duration) * 100;
        progressBar.style.width = percentage + "%";
    });

    volumeControl.addEventListener("input", function() {
        audio.volume = volumeControl.value;
    });
});

// script.js
document.addEventListener("DOMContentLoaded", function() {
    var audio = document.getElementById("audio");
    var fileInput = document.getElementById("file-input");
    var playButton = document.getElementById("play");
    var pauseButton = document.getElementById("pause");
    var stopButton = document.getElementById("stop");
    var progressBar = document.getElementById("progress-bar");
    var volumeControl = document.getElementById("volume");
    var canvas = document.getElementById("visualizer");
    var canvasCtx = canvas.getContext("2d");

    var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    var analyser = audioCtx.createAnalyser();
    var source;
    var dataArray;
    var bufferLength;

    fileInput.addEventListener("change", function(event) {
        var file = event.target.files[0];
        if (file) {
            var objectURL = URL.createObjectURL(file);
            audio.src = objectURL;
            audio.classList.remove("d-none");

            audio.addEventListener('play', function() {
                if (!source) {
                    source = audioCtx.createMediaElementSource(audio);
                    source.connect(analyser);
                    analyser.connect(audioCtx.destination);
                    analyser.fftSize = 256;
                    bufferLength = analyser.frequencyBinCount;
                    dataArray = new Uint8Array(bufferLength);
                }
                drawVisualizer();
            });
        }
    });

    function drawVisualizer() {
        requestAnimationFrame(drawVisualizer);

        analyser.getByteFrequencyData(dataArray);

        canvasCtx.fillStyle = 'rgba(240, 240, 240, 1)';
        canvasCtx.fillRect(0, 0, canvas.width, canvas.height);

        var barWidth = (canvas.width / bufferLength) * 2.5;
        var barHeight;
        var x = 0;

        for (var i = 0; i < bufferLength; i++) {
            barHeight = dataArray[i];

            canvasCtx.fillStyle = 'rgba(0, 123, 255, ' + (barHeight / 256) + ')';
            canvasCtx.fillRect(x, canvas.height - barHeight / 2, barWidth, barHeight / 2);

            x += barWidth + 1;
        }
    }

    playButton.addEventListener("click", function() {
        audio.play();
    });

    pauseButton.addEventListener("click", function() {
        audio.pause();
    });

    stopButton.addEventListener("click", function() {
        audio.pause();
        audio.currentTime = 0;
    });

    audio.addEventListener("timeupdate", function() {
        var percentage = (audio.currentTime / audio.duration) * 100;
        progressBar.style.width = percentage + "%";
    });

    volumeControl.addEventListener("input", function() {
        audio.volume = volumeControl.value;
    });
});

mp3.js

Comment fonctionne ce code

ChargementÀ l’événement change, URL.createObjectURL() crée une adresse locale pour le fichier choisi.

Web Audio APIUn AudioContext et un analyseur étudient le son en temps réel.

drawVisualizer()Lit les fréquences et dessine des barres sur le canvas, image après image avec requestAnimationFrame().

Play / Pause / StopAppellent play() et pause(), et remettent currentTime à zéro pour Stop.

ProgressionL’événement timeupdate met à jour la largeur de la barre.

VolumeLe curseur modifie audio.volume, entre 0 et 1.

ℹ️

Pourquoi le son ne démarre pas tout seul ?

Les navigateurs bloquent la lecture audio automatique. Le son ne peut démarrer qu’après une action de l’utilisateur, comme un clic sur Play.

Étape 4 : tester ton lecteur MP3

Ouvre mp3.html dans ton navigateur
Choisis un fichier MP3 sur ton appareil
Teste Play, Pause et Stop, puis le volume
Observe le visualiseur et la barre de progression pendant la lecture

Télécharger le code source du projet sur GitHub

Ce que ce projet t’apprend

HTML : structurer une interface avec des éléments natifs comme <audio>, <canvas> et <input type="file">
CSS : soigner l’apparence d’une application avec peu de code
JavaScript : gérer des événements, manipuler un média et dessiner en temps réel avec la Web Audio API

Aller plus loin

Créer une playlist en acceptant plusieurs fichiers (attribut multiple sur l’input)
Afficher le temps écoulé et la durée totale (mm:ss)
Permettre de cliquer sur la barre de progression pour avancer dans le morceau
Changer la forme du visualiseur : onde, cercle, couleurs dynamiques
Continuer avec un autre projet JavaScript : le moteur de recherche texte et images ou la Quiz App

FAQ : questions fréquentes

Mon fichier MP3 est-il envoyé sur Internet ?

Non. Le fichier est lu localement grâce à URL.createObjectURL() : il ne quitte jamais ton appareil.

Pourquoi le visualiseur reste immobile ?

Le visualiseur ne s’anime que pendant la lecture. Vérifie qu’un fichier est chargé et que tu as cliqué sur Play : les navigateurs exigent une action de l’utilisateur pour démarrer l’audio.

Le lecteur fonctionne-t-il sur smartphone ?

Oui, il fonctionne dans les navigateurs mobiles récents. Sur iPhone, le volume se règle avec les boutons de l’appareil plutôt qu’avec le curseur.

Quels formats audio sont acceptés ?

Le MP3 est lu partout. Selon le navigateur, l’élément audio accepte aussi d’autres formats comme WAV, OGG ou AAC.

Bravo, ton lecteur MP3 en JavaScript est terminé ! Tu as découvert la manipulation de l’audio et le dessin en temps réel. Partage ta version ou tes questions en commentaire !