Lecteur audio invisible sur Chrome

Bonjour, Mon lecteur audio n’est pas visible sur Chrome, visible sur firefox et je n’ai que le picto "play" sur Safari. Je ne sais que dire de plus. Ci-dessous un lien : Je ne pense pas que le souci soit CSS ou HTML, mystère sur la cause Auriez-vous une idée ? Merci beaucoup

As-tu vérifié que ta console n’affichait pas d’erreur et que le lecteur était bien visible dans le DOM en inspectant ta page ?

Sinon regarde si tu n’aurais pas une extension qui bloquerait ce genre de chose…

Salut Viki53. Comment fonctionne la console ? Je n’y ai jamais rien compris Le lecteur est bien visible sur Firefox. Mon lien n’a pas été publié. Le voilà si tu veux jeter un œil. https://lapagetest.fr/termine/index.html Un super merci

J’ai des erreurs 404 sur pas mal de fichiers dans l’onglet réseau… dont ceux utilisés par le lecteur.

Je suspecte qu’en corrigeant ça de manière à fournir un fichier exploitable ton lecteur s’affichera mieux

Une visite chez le "validators" de w3c devrait résoudre le problème ? Merci viki53

Plus de souci niveau 3Wc, mais toujours pas de lecteur… SNIF :/ Bonne soirée

Tes fichiers mp3 (entre autres) ne sont pas au bon endroit.

Les mp3/ogg doivent être au même endroit que ton index.html. Enfin le plus logique serait d’avoir un dossier dédié à ces fichiers et de corriger tes liens :

  <audio controls>
    <source src="viper.mp3" type="audio/mp3">
    <source src="viper.ogg" type="audio/ogg">
    <p>Votre navigateur ne prend pas en charge l'audio HTML5. Voici, à la place, un <a href="viper.mp3">lien sur l'audio</a>.</p>
  </audio>

Qui deviendrait :

  <audio controls>
    <source src="/audio/viper.mp3" type="audio/mp3">
    <source src="/audio/viper.ogg" type="audio/ogg">
    <p>Votre navigateur ne prend pas en charge l'audio HTML5. Voici, à la place, un <a href="viper.mp3">lien sur l'audio</a>.</p>
  </audio>

En plaçant tous tes fichiers audio dans le dossier audio à la racine de ton serveur.

Plus de souci niveau 3Wc

Les balises ont l’air bien balancées donc Par contre, il y a encore par exemple

 		<style>	

			audio{
  background-color:red;
  height: 100px;
	position: relative;
	z-index: 99;
}

}}
</style>

Je vois que pour le second (il y a deux appels mais mon Firefox affiche trois fois le lecteur…) tu as preload="auto" qui semble problématique pour Chrome… (même remarque pour autoplay…)

Mon lecteur audio n’est pas visible sur Chrome, visible sur firefox et je n’ai que le picto "play" sur Safari.

Je reproduis bien le souci, mais je ne sais pas d’où ça peut venir et n’ai pas le temps d’investiguer. À ta place, je construirai une page minimale/épurée puis rajouterai les styles progressivement et enfin les scripts progressivement. Quand il y a tout à la fois, on ne sait pas lequel pose problème et donc où chercher rapidement.

Bonjour, Merci pour vos réponses. Changements effectués. Je vais tenter d’épurer la page pour tenter de découvrir le(s) souci(s) Bonne journée,

LOL. J’avais ceci caché dans mes CSS : `object, embed, canvas, video, audio { min-height:100%; border:0; object-fit: cover; width: auto; object-position: center; } Merci à vous… bonne journée