11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Lecteur audio JS avec liste

Bonjour,
il y a une chose que je ne comprends pas dans le code html de l'un de mes sites. J'ai un lecteur audio en JavaScript. Le code fourni l'est pour un lecteur avec une liste de titres :
https://web.silvercherry.fr/player.html
<div class="playlist">
	<audio src="https://monsite.fr/monfichier1.mp3" preload="metadata" controls>
		Votre navigateur ne supporte pas la balise audio.
	</audio>
	<!-- Ici sera inséré le player customisé et la balie audio sera masquée (pas supprimée) -->
	<ul>
		<li id="https://monsite.fr/monfichier1.mp3">Fichier 1</li>
		<li id="https://monsite.fr/monfichier2.mp3">Fichier 2</li>
		<li id="https://monsite.fr/monfichier3.mp3">Fichier 3</li>
	</ul>
</div>

Je n'utilise pas cette fonction de liste, il n'y a qu'un titre à gérer sur mon lecteur. J'ai par conséquent enlevé cette liste. La chose étrange, c'est que si je ne place pas un <ul> à la fermeture de l'audio, de cette façon 
<div class="playlist">
	<audio src="Musique/Bala.mp3" data-volume="0.8" preload="none">
	Votre navigateur ne supporte pas la balise audio.
	</audio><ul>
</div>

ça ne fonctionne plus. Le <ul> est présent dans le JavaScript pour une liste, mais j'ai enlevé la liste, ce qui bloque le code JS si je ne laisse pas un <ul>.
Évidemment, le validateur me signale une erreur <ul> non fermé. J'ai tenté de fermer </ul>, le validateur ne dit plus rien. Ça paraît étrange, d'être valide avec une balise ouverte/fermée sans rien à l'intérieur. Mis à part l'alerte du validateur, tout fonctionne très bien, depuis des mois, mais je voudrais savoir un peu.
Modérateur
Salut,

En regardant vite fait ton lien, la librairie JS accepte une simple balise audio. Or, ton problème veut dire que le ul soit une dépendance forte à audio.
Certainement, si tu a regardé le JavaScript, un peu lourd, ul est présent plusieurs fois sous cette forme :
N=O[R].getElementsByTagName("ul")

Ce que je peux faire, c'est supprimer dans le JavaScript la partie qui se rapporte à ces listes ul. Un code un peu long et que je n'ai pas fait, je ne suis pas certain de réussir.
Modifié par Bongota (22 Nov 2022 - 19:48)
Salut,

Smiley hum

si tu n'as pas de playlist, il faut peut être juste enlever la classe qui indique que tu as une playlist ? (la balise div entière ne sert plus je pense) 
<div class="playlist">

Modifié par Mathieuu (23 Nov 2022 - 10:19)
playlist est la class qui permet de positionner le lecteur et d'ajuster sa couleur et taille. En fait, la liste de lecture des titres multiples est donnée uniquement par les <ul> et <li>. Regardes le JavaScrit, il y a bien un appel vers ul. Si je n'ai pas utilisé la balise audio html 5, c'est justement pour avoir plus de souplesse de ce côté, et une continuité d'aspect sur les différents navigateurs. Si j'enlève playlist, je n'ai plus aucun contrôle sur l'aspect du lecteur et sa position.

J'ai regardé ce code JavaScript pour enlever cette partie de titres multiples. Il est trop compliqué pour mes connaissances en JS pour le moment pour que je puisse le faire.
Ce que je pourrait tenter, c'est de remettre une liste, avec un titre "fantôme" , et le problème sera réglé du côté du validateur. Avouons que c'est un un peu tiré par les cheveux, en plus de dérouter les visiteurs vers un titre qui n'existera pas.
Je viens de tenter d'enlever tous les ul du Javascript et laisser vide (""). Ça fonctionne toujours du côté du lecteur. Si je vais plus loin, que j'enlève le <ul> qui suit </audio> dans le html, le lecteur est bloqué !
Est ce que tu as testé ? Smiley sweatdrop Parce que je suis vaguement sur de ce que j'ai compris du code ..

Perso quand je lis leur code, il y a très clairement un cas qui traite la balise audio et un autre cas qui traite la classe "playlist" sur l’élément parent de la balise audio.

Toi tu n'as pas de playlist donc tu dois juste laisser la balise audio et enlever la classe playlist, et ça rajoutera tout seul leur player à eux après ta balise audio (et ça cache la balise audio donc ça prend la place en gros)

Bref si tu peux tester juste ça, sans le div et le ul : 

<audio src="https://monsite.fr/monfichier1.mp3" preload="metadata" controls>
		Votre navigateur ne supporte pas la balise audio.
	</audio>
Effectivement, ton idée fonctionne, à condition d'enlever controls, sinon, j'ai deux players qui s'affichent l'un au dessus de l'autre. Maintenant, c'est bien leur player qui s'affiche et qui joue, mais il est tout blanc, je n'ai plus son formatage en css. J'ai tenté un span pour retrouver les couleurs de la class player, mais ça bloque la lecture. Et on a plus besoin des ul. Je cherche.
C'est fait, il suffisait de rajouter background-color:lightgray; sur .player dans le css. Pour le reste, le formatage du lecteur est en place - barre de progression, durée du titre, barre de volume et aussi la tête de dragon, que j'aime bien. Ce lecteur a une licence qui permet de le modifier, c'est pourquoi je mentionne l'auteur sur mon site.
Merci pour l'aide, je vais enlever tous ces ul qui font crier le validateur, bien que ça fonctionne parfaitement depuis des mois.
Je fais les modifications, je charge sur le serveur et je te donne le lien du site.
Modifié par Bongota (23 Nov 2022 - 15:47)
Meilleure solution
Prévenir un modérateur
Répondre au sujet
Aller à