Lire différents liens audios dans un même lecteur

MiKLJS
Javascript

Bonjour,
Je souhaite pouvoir cliquer sur différentes Div contenant chacune un lien audio et, au clic de la souris, lire l'audio dans un lecteur audio (toujours le même).

<body>
  <audio id="lecteur_audio" controls="controls">audio inconnu</audio>

  <ul>
    <li class="piste_audio" href="/audios/03-flamenco.mp3">flamenco</li>
    <li class="piste_audio" href="/audios/11-bwv847-bosendorfer.mp3">Bach</li>
    <li class="piste_audio" href="/audios/04-rencontre.mp3">Rencontre</li>
  </ul>

    <script src="/moment_musical/test.js"></script>
</body>
</html>
var lecteur = document.getElementById('lecteur_audio');
var pistes = document.querySelectorAll('.piste_audio');

for (var i=0; i < pistes.length; i++ ) {
   var lien = pistes[i].getAttribute('href');
   pistes[i].addEventListener('click',() =>
   lecteur.setAttribute('src',lien));
   lecteur.play();
}

ce que je constate
C'est seul le dernier lien de ma boucle for qui est pris en compte.
ce que j'aimerais
C'est pourvoir switcher entre les différents liens.

Merci par avance pour votre aide.

3 réponses

MiKLJS
Auteur

Bon, il semblerait que le problème vienne de la portée de la variable. Avec let à la place de var, tout fonctionne à merveille.

var lecteur = document.getElementById('lecteur_audio');
var pistes = document.querySelectorAll('.piste_audio');

for (var i=0; i < pistes.length; i++ ) {
    let piste = pistes[i].getAttribute('href');
    pistes[i].addEventListener('click',() => {
        lecteur.setAttribute('src',piste);
        lecteur.play()});
}
Orivoir21

Bonjour, l'attribut href n'existe pas sur l'élement li si tu veux ajouter des attributs personnalisé pour les faire fonctionner avec JavaScript il existe les attributs data-*
un attribut data-href permettrait de garder un document valide.

  <ul>
    <li class="piste_audio" data-href="/audios/03-flamenco.mp3">flamenco</li>
    <li class="piste_audio" data-href="/audios/11-bwv847-bosendorfer.mp3">Bach</li>
    <li class="piste_audio" data-href="/audios/04-rencontre.mp3">Rencontre</li>
  </ul>

MDN attributes data

Tu dois pouvoir lire la source lorsque l'élément et cliqué pour ne plus avoir de problème de portée de variables.

var lecteur = document.getElementById('lecteur_audio');
var pistes = document.querySelectorAll('.piste_audio');

for (var i=0; i < pistes.length; i++ ) {
    pistes[i].addEventListener('click',() => {
        const src = this.getAttribute('data-href');
        lecteur.setAttribute('src',piste);
        lecteur.play()
    });
}
MiKLJS
Auteur

Merci Orivoir21 d'avoir attiré mon attention sur la validité de mon document. J'avais utilisé href car au départ j'avais déclaré mon lien dans une balise <a>.