Liste de lecture en HTML

Version imprimable

04/09/2025, 16h47
noradan

Liste de lecture en HTML

Bonjour
est-ce qu'on peut avec la balise <audio> (ou autrement...) créer une liste de lecture c'est-à-dire faire jouer plusieurs morceau à la suite avec un seul clic pour le premier

Merci

Bonjour,
Sans utiliser de JS, c'est pas possible…

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
const playlist = [
      "morceau1.mp3",
      "morceau2.mp3",
      "morceau3.mp3"
    ];
 
// Ou tu récupères ca depuis un fichier plat ( Json, txt) ou base de donnée (API ? Fichier PHP ?)
 
    let currentTrack = 0;
    const player = document.getElementById("audioPlayer");
 
    // Tu start le premier sur un click
    player.src = playlist[currentTrack];
 
    // Boucle pour aller sur les suivants
    player.addEventListener("ended", () => {
      currentTrack++;
      if (currentTrack < playlist.length) {
        player.src = playlist[currentTrack];
        player.play();
      } else {
        console.log("Fin");
      }

J'ai pas test mais dans l'idée, ça devrait être un truc comme ça.

Cdt

10/08/2026, 14h33
noradan

Je me relance dans ce projet.

j'ai placé le code précédent entre balise <script> mais ça ne suffit pas

concrètement qu'est-ce que je dois écrire dans mon fichier html?
10/08/2026, 15h55
casperweb

Citation:

concrètement qu'est-ce que je dois écrire dans mon fichier html?

Une balise audio avec le bon identifiant.
As tu des erreurs dans la console?

Faire jouer une liste de lecture

Ndm : discussions similaires fusionnées ici

Bonjour
j'avais déjà posé une question à ce sujet il y a pas mal de temps mais je n'arrive plus à retrouver le post.

Je souhaite faire jouer une liste de lecture. La balise <audio> permet de lire un seul élément et j'en veux plusieurs.
Dans cet ancien post quelqu'un m'avait donné le code JS suivant que j'avais gardé à l'époque
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <script> const playlist = [ "Disconnected - 05-Disconnected.mp3", "Disconnected - 02-Broken.mp3", "Disconnected - 01-Killer.mp3" ]; let currentTrack = 0; const player = document.getElementById("audioPlayer"); // Tu start le premier sur un click player.src = playlist[currentTrack]; // Boucle pour aller sur les suivants player.addEventListener("ended", () => { currentTrack++; if (currentTrack < playlist.length) { player.src = playlist[currentTrack]; player.play(); } else { console.log("Fin"); } </script>
mais je ne sais pas quoi en faire

Pour le moment j'ai écrit
Code:

1 2 3 <figure style="margin-top:5rem;color:magenta;font-style:italic"><figcaption> <h4>Selection of the moment</h4></figcaption> <audio controls src="Disconnected - 05-Disconnected.mp3"> </audio>
J'ai même ajouté "id=audioPlayer" dans la balise audio sans succes
Comment lier le script avec le lecteur ?

16/08/2026, 16h02
casperweb
Bonjour,

>> Comment lier le script avec le lecteur ?
ou place tu le script? juste avant </body> ou dans un fichier externe?
pour lier un script externe c'est :
Code:

1 2 <script src="exemple.js"></script> </body>
ou
Code:

1 2 <script src="exemple.js" defer></script> </head>
Enfin le code Js est lier au code HTML grâce à l'écouteur d'évènement qui agis sur l’élément audio parce que celui-ci est identifier par l’objet player obtenu par la methode getElementById() de l'objet document en L9.
Donc dans ton HTML tu dois écrire la balise audio comme ceci :

Code:

<audio controls id="audioPlayer">

Il est recommandé de ne pas avoir d'espace ni de caractère spéciaux dans les nom de fichiers et de répertoire.

PS : n'oublie pas de fermer accolade et parenthèse de ton script
A lire : https://developer.mozilla.org/fr/doc...getElementById
https://www.toutjavascript.com/refer...lementbyid.php

Bonjour,

Tu crées un fichier externe playlist.js (plus propre) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
const playlist = [
    "Disconnected%20-%2005-Disconnected.mp3",
    "Disconnected%20-%2002-Broken.mp3",
    "Disconnected%20-%2001-Killer.mp3"
];
 
let currentTrack = 0;
const player = document.getElementById("audioPlayer");
const trackInfo = document.getElementById("trackInfo");
 
function updateTrackInfo() {
    const trackName = playlist[currentTrack].replace('%20', ' ').replace('.mp3', '');
    trackInfo.textContent = `En lecture : ${trackName}`;
}
 
player.src = playlist[currentTrack];
updateTrackInfo();
 
player.addEventListener("ended", function() {
    currentTrack++;
    if (currentTrack < playlist.length) {
        player.src = playlist[currentTrack];
        updateTrackInfo();
        player.play();
    } else {
        trackInfo.textContent = "Fin de la playlist";
    }
});
 
player.addEventListener("error", function() {
    trackInfo.textContent = "Erreur de chargement";
});

Tu peux gérer les espaces dans les noms de fichiers en les remplaçant par %20.

Dans ton HTML, tu l'appelles avant </body> :

Code:

1
2
<script src="playlist.js"></script>
</body>

Si tu veux le premier morceau se charge automatiquement :

Code:

<audio controls id="audioPlayer" preload="metadata">

Désolé mais j'avais posté une réponse il y a 3 ou 4 jours mais elle n'apparaît pas
J'y disais que ça ne fonctionnait toujours pas
J'ai donc mon js comme suit

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const playlist = [
      "Disconnected%20-%2005-Disconnected.mp3",
      "Disconnected%20-%2002-Broken.mp3",
      "Disconnected%20-%2001-Killer.mp3"
    ]; 
	  let currentTrack = 0;
const player = document.getElementById("audioPlayer");
const trackInfo = document.getElementById("trackInfo");
 
function updateTrackInfo() {
    const trackName = playlist[currentTrack].replace('%20', ' ').replace('.mp3', '');
    trackInfo.textContent = `En lecture : ${trackName}`;
}
 
player.src = playlist[currentTrack];
updateTrackInfo();
 
player.addEventListener("ended", function() {
    currentTrack++;
    if (currentTrack < playlist.length) {
        player.src = playlist[currentTrack];
        updateTrackInfo();
        player.play();
    } else {
        trackInfo.textContent = "Fin de la playlist";
    }
});
 
player.addEventListener("error", function() {
    trackInfo.textContent = "Erreur de chargement";
});

et dans mon html

Code:

1
2
3
4
5
6
 
<figure style="margin-top:5rem;color:magenta;font-style:italic">
<figcaption> <h4>Selection of the moment</h4></figcaption>
<audio id="audioPlayer" controls >  <!--src="Disconnected - 05-Disconnected.mp3"-->
</audio>
</figure>

suivit de

Code:

1
2
<script src="playlist.js"></script>
</body>

et ça ne joue que le premier.
D'ailleurs le lecteur m'affiche 13'10 mais arrivée à cette durée il continue avec du silence jusqu'à 13'17 avant de s'arrêter

23/08/2026, 16h12
casperweb

Bonjour, qu'est ce qui s'affiche dans la console comme message?

Tu es bien sur que si tu lance les fichier .mp3 avec un lecteur audio il y a bien du son?
23/08/2026, 20h14
noradan

Il n'y a rien dans la console !
Tout fonctionne sauf que ça ne lis pas la liste mais uniquement le premier.
Par acquis de conscience j'ai même changé l'ordre des morceaux... pas de problème ça ne joue que le 1
23/08/2026, 22h45
casperweb

1 pièce(s) jointe(s)
Bonsoir, bizarre que tu n'aie rien dans la console, tu devrais avoir un appel du fichier lu. Tu n'as pas d'erreur dans l'onglet réseau? Des erreurs 404?

J'ai testé ton code en modifiant ceci :
Code:

1 2 3 4 5 const playlist = [ "https://tim-school.com/codepen/christmas1/2.mp3", "https://tim-school.com/codepen/christmas1/4.mp3", "https://tim-school.com/codepen/christmas1/6.mp3" ];
et ajouté un paragraphe dans le HTML :

Code:

<p id="trackInfo"></p>

Cela fonctionne correctement, les trois fichiers ce joue à la suite. Je ne comprends pas le problème. Peut être que tu pourras partager l'URL de la page qui pose problème une fois que tu auras uploader ton site sur serveur distant.

Voici ce que j'ai dans la console :
Pièce jointe 678396
26/08/2026, 14h21
noradan

Pardon !
Heureusement que tu as mis ta copie de console; je n'ai pas mis le bon onglet. J'étais resté avec la "console" de l'inspecteur.
et j'avais en effet

Code:

Uncaught TypeError: can't access property "textContent", trackInfo is null

J'ai donc ajouté ta ligne et IT WAAARKS !

Une chose de réglée !
Maintenant 3 autres petites bricoles :
Il semble que "replace" ne remplace que la première occurence. J'ai bien essayé "/%20/g" comme j'ai lu mais ça n'a pas marché il me reste un "%20".

Comment faire afficher le titre du morceau, celui de l'album et le nom de l'artiste sur une petite ligne en dessous du lecteur avec un défilement. Normalement ils sont planqués à l'intérieur du mp3. Comment accède-t-on aux meta ?
Parce que pour le moment le trackinfo est écrit avant et ça casse la présentation de la page.

Comment se repositionner au début (pas rejouer) c'est-à-dire que si l'on reclique ça parte du 1 car là on repart du dernier?

J'ai bien eu l'idée de copier "let currentTrack = 0;" et "currentTrack = 0" dans le else mais ça n'a pas fonctionné
26/08/2026, 15h58
casperweb

Bonjour,
>> Comment accède-t-on aux meta ?
Pour lire les métadonnée d'un fichier .mp3 il te faut installer une librairie externe.

>> Comment se repositionner au début (pas rejouer) c'est-à-dire que si l'on reclique ça parte du 1 car là on repart du dernier?
currentTrack = 0 est un bon début, il te faut également lancer la lecture en appelant la méthode play() sur le lecteur.

Il y a un tuto sur zds avec un TP:
https://zestedesavoir.com/tutoriels/...ideo-en-html5/