Discussion :

[noradan]

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

[gabi7756]

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

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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?

[casperweb]

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?

[noradan]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<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

[David94FR]

Bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Si tu veux le premier morceau se charge automatiquement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[noradan]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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?