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?

[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

[casperweb]

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 :

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

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 :

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

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

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

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

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é

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

[noradan]

Je n'ai rein trouvé concernant les liste de leecteure dans le tuto.
Sinon j'ai donc changer le if comme suit

Code :

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

1
2
3
4
5
6
7
8
9
   if (currentTrack < playlist.length) {
        player.src = playlist[currentTrack];
        updateTrackInfo();
        player.play();
    } else {
        trackInfo.textContent = "Fin de la playlist";
		let currentTrack = 0;
		player.play();
    }

mais ça ne va pas.

En fait pour que ça marche j'ai du recopier le bloc complet du "if" i.e.

Code :

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

1
2
 player.src = playlist[currentTrack];
        updateTrackInfo();

sans mettre de "play".
Je ne sais pas si c'est bien comme ça qu'il faut.

[casperweb]

Bonjour, on fait précéder le nom d'une variable de "let" uniquement la première fois que l'on déclare une variable, par la suite plus nécessaire d'écrire "let".
En L7 de ton dernier code, tu redéclares une variable currentTrack mais ce n'est pas la même variable que plus haut. Le mot clé "let" sert à déclarer une variable dans un scope. Le scope c'est le bloque qui commence par une accolade ouvrante et se termine par une accolade fermante. Si bien que ta variable currentTrack n'a d'existence que entre les L5 et L9 pas ailleurs.

Pour rejouer à l'infini, tu n'as pas besoin d'un if else. Un if simple suffit pour redéfinir currentTrack à zéro si celui-ci est en dehors des clous.
Je ferais ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
player.addEventListener("ended", function () {
     if (currentTrack >= playlist.length) {
          currentTrack = 0;
     }
 
     player.src = playlist[currentTrack];
     updateTrackInfo();
     player.play();
     currentTrack++; 
});

[noradan]

on fait précéder le nom d'une variable de "let" uniquement la première fois que l'on déclare une variable, par la suite plus nécessaire d'écrire "let".

C'est ce que j'ai fini par faire tout seul.

Je ne souhaite pas que ça joue en boucle mais seulement que ça se remette au début. j'ai donc laissé le "else"

Par contre, je ne sais pas ce que j'ai changé mais quand ça a commencé à fonctionné , s'affichait le titre dans la page html. Je ne sais pas ce que j'ai fait mais plus rien ne s'affiche; le

Code :

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

  trackInfo.textContent = `En lecture : ${trackName}`;

n'affiche plus rien.

Qu'est-ce que j'ai fait ?
Ai-je supprimé par mégarde quelque chose dans le html ?
D'ailleurs : faut-il mettre quelque chose dans le html pour récupérer les " textContent"

Pendant qu'on y est j'imagine que le "$" sert en quelque sorte de caractère d'échappement pour faire afficher la valeur de "trackName". Ai-je raison ?

[casperweb]

Je ne souhaite pas que ça joue en boucle mais seulement que ça se remette au début. j'ai donc laissé le "else"

Ha désolé j'ai mal compris. La solution est indiquée dans le tuto de zds que j'ai mentionné plus haut. Utilise la propriété currentTime du lecteur.

D'ailleurs : faut-il mettre quelque chose dans le html pour récupérer les " textContent"

Non pas nécessaire obligatoirement, tu peux créer un élément en JS, lui attribuer des attributs HTML et leurs valeurs puis le pousser dans le DOM. Renseigne-toi sur les fonctions du DOM.

Pendant qu'on y est j'imagine que le "$" sert en quelque sorte de caractère d'échappement pour faire afficher la valeur de "trackName". Ai-je raison ?

Ce n'est pas vraiment un caractère d’échappement. Ce sont des expressions dans un gabarit littérale. Tu pourrais utiliser la concaténation :

Code :

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

trackInfo.textContent = "En lecture :" + trackName;

Mais quand tu as plusieurs éléments à concaténer le fait de devoir terminer la chaine puis ajouter le caractère de concaténation (+) puis rouvrir la chaine..... Et ainsi de suite. Je trouve plus facile d'écrire et de lire le code avec les gabarits littéraux. Les deux syntaxe sont bonnes, c'est à toi de voir avec quoi tu as le plus d'aisance.
https://developer.mozilla.org/fr/doc...ls#description

[noradan]

le problème du tuto c'est qu'il ne manie pas des listes. Mais bon ... pour le moment ça fonctionne.
Ce que j'ai perdu par contre c'est le nom de la piste qui s'affichait et qui ne s'affiche plus.
Je n'ai pas la moindre idée de ce que j'ai viré et à quel endroit.

Que faut-il écrire et où pour faire afficher dans la page des éléments récuppérés dans le fichier js ?
La liste étant courte (10 éléments) je peux très bien écrire les infos intéressantes dans une liste de listes. Le pb est alors de les faire afficher et je ne trouve pas comment faire dans ce que j'ai lu ici et là

[casperweb]

Bonjour,

le problème du tuto c'est qu'il ne manie pas des listes. Mais bon ...

Tu ne trouveras pas de tuto pour tout ce que tu souhaites faire précisément. Tu dois adapter en fonction de ce que tu trouves sur le net qui est accessible pour toi. Si tu te dit bien ce tuto ne parle pas de ce que je souhaites et que tu ne le lit pas, tu passes à coté de certaine choses qui pourraient t'être utile pour ton projet.

Je n'ai pas la moindre idée de ce que j'ai viré et à quel endroit.

Reposte tout ton code pour que l'on regarde.

Que faut-il écrire et où pour faire afficher dans la page des éléments récuppérés dans le fichier js ?

Tu pourrais très bien placer le texte que tu souhaites afficher dans le fichiers .js. Dans un objet par exemple. Tu aurais alors un tableau d’objets.

Code :

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

1
2
3
4
5
6
const playlist = [
     {
          titre: "Le titre du morceau que je souhaite afficher.",
          url: "Disconnected%20-%2005-Disconnected.mp3"
     },
// ..... Le reste du code

A toi de voir ce qui est plus facile d'implémenter.

PS : Pour récupérer les données dans ce nouveau tableau, je te laisse chercher. Si tu n'y arrives pas je te filerais un coups de patte.

[noradan]

En fait il y avait un display:none dans un coin perdu Désolé pour ça... Je me doutais bien que c'était un truc débile.

En revanche je n'arrive pas à faire afficher le "trackInfo" là où je le souhaite.
J'ai un

Code :

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

 <p id="trackInfo" style="color:white"></p>

et il y a bien

Code :

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

1
2
trackInfo = document.getElementById("trackInfo")
trackInfo.textContent = `En lecture : ${trackName}`

Mais ça ne s'affiche que si je mets le <p> à la ligne qui précède la balise <script>
Du coup il est complètement en dehors des environnement et casse toute la présentation de la page.
Je voudrais l'avoir par exemple en dessous du lecteur

Par exemple, ça

Code :

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

1
2
3
4
5
6
7
 
<figure style="margin-top:5rem;color:magenta;font-style:italic">
<figcaption> <h4>Selection of the moment</h4></figcaption>
<audio id="audioPlayer" controls > 
</audio>
</figure>
 <p id="trackInfo" style="color:white"></p>

ça n'affiche rien parce qu'il y a des choses après et pourtant pas grand chose; je me contente de fermer un div {flex: 0 0 25%} c'est tout.
Le <p> doit être en dehors de ce div ... ce qui évidemment rajoute une colonne et met le binz