11521 sujets

JavaScript, DOM et API Web HTML5

Audio/HTMLMediaElement : récupération de l'info sur la durée

Bonjour à tous (ça faisait un petit moment !),

Je m’entraîne à créer un player audio personnalisé avec l'api HTMLMediaElement.
Voici un pen pour voir le contexte : audio player with HTMLMediaElement

Je crée donc un template pour le lecteur :
  const addAudioPlayer = (() => {
    let i = 0
    for (const audio of audios) {
      i++
      const player = `<div class="audio-player"><button class="audio-play-pause"><svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024"><path d="M204.524 102.03L819.48 512 204.523 921.97z"/></svg></button><output class="audio-player-current-time">0:00</output><div class="progress"></div><output class="audio-player-duration">0:00</output><div><button onclick="document.document.getElementById('audio-player${i}')[0].volume += 0.1">+</button><button onclick="document.getElementById('audio-player${i}')[0].volume -= 0.1">-</button></div></div>`
      audio.id = 'audio-player' + i
      audio.insertAdjacentHTML('afterend', player)
    }
  })()

Jusque là tout va bien. Puis, toujours dans la boucle for, j'essaye de récupérer la durée totale de la musique pour l'afficher dans mon player, en essayant de prendre en compte le fait que l'élément audio doit être chargé pour être lu :
audio.addEventListener('loadedmetadata', audioDuration(audio, player, i))

Et là, ça se corse, je n'arrive pas à récupérer l'info :
NaN:NaN:NaN

Où est mon erreur ?
Modifié par Olivier C (16 Jul 2021 - 13:01)
Modérateur
Bonjour,

il est bizarre ton event Smiley smile (je ne connaissais pas)

ça ne serait pas plutôt ici ? :
audio.addEventListener('loaded', audioDuration(audio, player, i))


Cdt,
Modifié par gcyrillus (16 Jul 2021 - 13:31)
Bonjour gcyrillus, merci pour ton intervention. Toi, tu proposes d'attendre que l'élément soit chargé, moi, je tente d'attendre que les données liées à l'élément soient chargées. Quoi qu'il en soit je viens de faire un essai avec ton code, mais ça ne fonctionne pas mieux.
Modérateur
En fait je viens de m'apercevoir que ce n'est effectivement pas mieux, sur codepen les fichier audios ne semblent pas être chargés du tout et la durée affichée semble aléatoire avec l'une de ces deux valeurs 2.12 et 5.21 sur le premier lecteur uniquement., les autres restent à zero.As tu le même soucis en dehors de codepen ?

Cdt
Argh ! je suis au boulot, il faudra que je teste à la maison...
Oui, j'ai vu ces valeurs aléatoires sous CodePen, à la maison c'est un peu différent mais ça revient au même (en plus ce srcipt, lui, y arrive), Quand au ciblage du premier lecteur uniquement, c'est sans doute un problème de ciblage de l'élément, mais c'est un problème secondaire que je réglerais après coup.
Modifié par Olivier C (16 Jul 2021 - 14:00)
Modérateur
Re,

en regardant de plus prés ton code, ta fonction :
 const audioDuration = (audio, player, i) => {
    const output = document.querySelector(".audio-player-duration");
    console.log(secondsToTime(audio.duration));
    output.value = secondsToTime(audio.duration);
  };

est celle qui te met le bin au départ, elle sélectionne systématiquement le premier élément avec la class qui match. (l'erreur classique)

tu peut eventuellement faire :
 const audioDuration = (audio, player, i) => {
    const output = document.querySelector(
      ".audio-player-duration.out" + i + ""
    );
    console.log(secondsToTime(audio.duration));
    output.value = secondsToTime(audio.duration);
  };


et incrementer la seconde class dans ton template (const) 
      const player = `<div class="audio-player"><button class="audio-play-pause"><svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024"><path d="M204.524 102.03L819.48 512 204.523 921.97z"/></svg></button><output class="audio-player-current-time">0:00</output><div class="progress"></div><output class="audio-player-duration out${i}">0:00</output><div><button onclick="document.document.getElementById('audio-player${i}')[0].volume += 0.1">+</button><button onclick="document.getElementById('audio-player${i}')[0].volume -= 0.1">-</button></div></div>`;


Les fichiers ne se jouent pas, c'est ce qui détourne l'attention au départ, mais ils sont bien là dans ton codepen.

Cdt
gcyrillus a écrit :
... est celle qui te met le bin au départ, elle sélectionne systématiquement le premier élément avec la class qui match. (l'erreur classique)

Oui pardon, ça marchait dans un test précédent, je crois que j'avais plutôt fait un truc du genre :
document.querySelectorAll('.audio-player-duration')[i]

Et je sais que l'audio marche car je l'ai testé aussi dans un autre script...

Je te remercie. C'était idiot de demander de l'aide à la veille d'un départ en vacances ! Mais je ne voulais pas partir sans être débloqué car je me connais : je vais emmener ce problème dans ma tête pendant les vacances.

Bien le bonjour à toi. Et à vous tous !
Modifié par Olivier C (16 Jul 2021 - 21:23)
Sujet clos
Aller à