Discussion :

[noradan]

Bonjour
je ne trouve pas ce que j'ai mal écrit.
Dans le html j'ai

Code html :

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

1
2
<audio id="audioPlayer" controls ></audio>
<div id="toto" style="color:white"></div>

dans le js

Code :

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

1
2
3
4
5
6
7
8
9
const toto=document.getElementById("toto");
const player = document.getElementById("audioPlayer");
player.addEventListener("ended", function() {
    MorsoEnCours++;
    if (MorsoEnCours < playlist.length) { toto.innerHTML=`je suis ici`;
        player.src = repertoire_liste+playlist[MorsoEnCours][0];
        updateTrackInfo();
        player.play();
    }

Mon "je suis ici" ne s'affiche pas alors que le player fonctionne tout à fait.
J'ai pourtant vraiment l'impression de ne pas avoir fait de faute

D'ailleurs pendant qu'on y est est-ce que j'interprète correctement ce qui se passe en disant
lorsque je clique sur "play" ça joue mais uniquement en mode html le script n'y est encore pour rien, en attendant que le player <audio> envoie je ne sais où un code de fin de morceau "ended" qui est attendu par le cript, auquel cas il lance la fonction sans nom se trouvant à l'intérieur du "player.addEventListener", incrémente le numéro du morceau et relance le tout player.play().
Et puisqu'on en parle mon objectif est de faire fonctionner un autre événement à savoir un clic sur image

Code :

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

1
2
3
4
btnprec.addEventListener("click", () => {
  // Passe à l'indice suivant (revient à 0 à la fin)
  MorsoEnCours = (MorsoEnCours + 1) % playlist.length;
  toto.innerHTML=`je suis ici`;

C'est parce que le "clic" ne donnait rien que j'ai voulu vérifier.

[casperweb]

Bonjour,
Tu ne donnes pas un code testable (pour que l'on puisse reproduire le problème) . On ne sais pas comment est déclarer la variable MorsoEnCours. Ni comment est déclarer la variable repertoire_liste.

Mon "je suis ici" ne s'affiche pas alors que le player fonctionne tout à fait.

Quelles sont les erreurs dans la console?

lorsque je clique sur "play" ça joue mais uniquement en mode html le script n'y est encore pour rien,

Pas tout à fait puisque tu n'indique aucun fichier dans l'attribut src en HTML, c'est donc bien une injection du script pour commencer avant que tu ne cliques sur le bouton play du control de la balise <audio>.

en attendant que le player <audio> envoie je ne sais où un code de fin de morceau "ended"

Cela s'appelle un écouteur d’événement, et l'évènement écouté est la fin de la lecture du fichier. Quand le fichier (le premier son donc) à terminé la fonction anonyme liée à l'écouteur d'évènement est exécutée.

Et puisqu'on en parle mon objectif est de faire fonctionner un autre événement à savoir un clic sur image

Il faut que btnprec soit défini au préalable.

Pour du texte on utilise la propriété textContent.
https://developer.mozilla.org/fr/doc...de/textContent
Pour de l'HTML innerHTML
https://developer.mozilla.org/fr/doc...ment/innerHTML

Autre chose, si tu as des noms de variables, fonction en anglais reste en anglais. Si tu veux en français écrit les noms de fonctions et de variables en français. Mais pas les deux langues dans un même projet. Choisis une ou l'autre.

[noradan]

Je ne sais pas très bien ce qu'il faut au minimum pour être "testable". Je crois avoir donné tout ce qui m'a paru intervenir dans la question.
Comme on m'a dit de l'écrire

Code :

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

<script type="module" src="/playlist_root.js"></script>

est écrit juste avant </body>

ensuite il y a le html que j'ai donné. La variable MorsoEnCours est bêtement

Code :

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

 let MorsoEnCours = 0;

Pour le reste c'est pareil; je crois qu'il n'y a rien de spécial

Code :

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

1
2
import {playlist} from './listelecture/playlist.js';
const repertoire_liste='/listelecture/';

Je mets ce genre de chose pour pouvoir changer les emplacements en n'ayant qu'un minimum de modifications à faire.
Comme je l'ai dit, toute la partie "lecteur" marche très bien. J'ai juste voulu ajouter des bouton "précédent" et "suivant".
Comme il ne fonctionnaient pas j'ai voulu testé si, au moins, il y a une réaction au clic, donc faire bêtement une impression. Comme iln'y en avait pas, je l'ai mis dans le "player.addEventListener" puisque je suis sûr qu'on passe par là puisque le lecteur fonctionne

Quelles sont les erreurs dans la console?

Il n'y a rien ; c'est ça que je ne comprends pas !

puisque tu n'indique aucun fichier dans l'attribut src en HTML, c'est donc bien une injection du script pour commencer

D'accord, pigé !

Il faut que btnprec soit défini au préalable.

Je pense qu'il l'est

Code :

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

1
2
 
const btnprec = document.getElementById("btn-prec");

lequel btn-prec est l'image classique des lecteurs pour aller au précédent.

Code :

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

<img id="btn-prec" src="bouton-prec.png" width="30px" >

Pour du texte on utilise la propriété textContent.

Tu veux dire que "je suis ici" ne peut pas être considérer comme du html ? De toute façon je viens d'essayer avec textcontent et ça ne marche pas plus.

[casperweb]

Bonjour,

Tu veux dire que "je suis ici" ne peut pas être considérer comme du html ?

Non, il est possible de l'utiliser. Ce que je veux dire c'est d'utiliser les propriétés adéquate, si tu souhaites insérer du texte utilise une propriété faite pour du texte même si une propriété pour de l'HTML fonctionne.

Je ne vois pas ce qui pourrait poser problème si les variables sont bien définie.
Un code testable est un code que d'autre peuvent reproduire le problème que tu rencontres; Avec le code complet ou un page en ligne pour voir le comportement du navigateur?

Le code ci après fonctionne, le texte est inséré au clique sur l'image :

Code html :

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
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <audio id="audioPlayer" controls></audio>
        <div id="toto" style="color:rgb(255, 0, 0)"></div>
        <img id="btn-prec" src="bouton-prec.png" width="30" alt="Bouton précédant">
        <script>
            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"
            ];
            let MorsoEnCours = 0;
            const toto=document.getElementById("toto");
            const btnprec = document.getElementById("btn-prec");
            btnprec.addEventListener("click", () => {
                // Passe à l'indice suivant (revient à 0 à la fin)
                MorsoEnCours = (MorsoEnCours + 1) % playlist.length;
                toto.innerHTML=`je suis ici`;
            }); 
 
        </script>
    </body>
</html>

Tu as deux erreurs HTML pour la balise <img> celle-ci prend TOUJOURS deux attributs obligatoires au minimum, l'attribut src et alt pour un texte alternatif qui décrit l'image.
La deuxième erreur, pour l'attribut width et height c'est automatiquement des pixels pas besoins d'indiquer l'unité ici.

[melka one]

bonjour

le div a un style color en white le texte est en conséquence en blanc et le div il n'est pas en blanc ? ce qui pourrais expliquer pourquoi on ne vois pas le texte.

Code html :

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

<div id="toto" style="color:white"></div>

Aussi normalement quand on change le src d'un fichier audio pour bien faire on doit faire un load sur l' audio et terminer par l'evenement onloadMetadata afin de demarrer la lecture des que c'est possible et utiliser onerror pour gerer les erreurs de chargement

Code :

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

1
2
3
4
5
var audio=document.getElementBid('la_balise')
audio.src='le_chemin';
audio.load();
audio.onloadedmetadata=function(audio){audio.play()}
audio.onerror=.function(){alert('erreur de chargement')};

[noradan]

Non "melka one" le fond d'écran est en DarkBlue, raison pour laquelle j'ai mis du blanc.

Pour Casperweb
J'ai bien examiné ton code et je n'ai pas vu de différence avec le mien... celui que j'ai posté au début de la discussion
je n'ai donc en fait rien changé et aujourd'hui tout va bien .... Je suis incapable de te dire pourquoi rien n'a fonctionné hier. Je purge régulièrement les caches de Firefox
et le code ne fonctionnait pas. Et ce matin ça marche. J'ai peut-être été victime de somnambulisme ou d'une crise d'épilepsie, j'ai écrit quelque chose sans m'en souvenir.

En tout cas encore merci, j'en apprend toujours un peu.

Pendant que j'y suis,
Je voulais coller deux images (mes boutons) si bien que je me suis retrouver avec une ligne d'un kilomètre

Code html :

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

1
2
3
<div><!-- LAISSER SUR UNE LIGNE-->
<audio id="audioPlayer" controls ></audio><img id="btn-prec" src="/materiel_prog/bouton-prec.png" width="30px" style="margin:0px;padding:0px"><img id="btn-suiv"src="/materiel_prog/bouton-suivant.png" width="30px" style="margin:0px;padding:0px">
</div>

pour lire correctement la ligne j'ai été contraint de couper ma ligne au '>' de la première image...pour ne pas introduire d'espace entre les boutons.
D'où ma question : existe-t-il en html un symbole du genre % ou // pour joindre deux lignes de code.

[Pytet]

Bonjour,

Une solution possible pour ne pas introduire d'espace entre deux éléments inline est d'utiliser des commentaires html :

Code html :

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

1
2
3
4
5
6
<div>
  <!-- LAISSER SUR UNE LIGNE -->
  <audio id="audioPlayer" controls></audio><!-- 
  --><img id="btn-prec" src="/materiel_prog/bouton-prec.png" width="30" style="margin: 0px; padding: 0px"><!--
  --><img id="btn-suiv" src="/materiel_prog/bouton-suivant.png" width="30" style="margin: 0px; padding: 0px">
</div>

https://www.alsacreations.com/astuce...esirables.html


Pour rappel : ne pas renseigner l'unité "px" dans les attributs html width et height.