[Résolu] Audio inexistant sur tablettes

Bonjour Bongota,

Justement, le principe même du lecteur HTML5 est qu'il est natif sans JavaScript. Le problème vient d'ailleurs.

Le player que tu utilises doit être mal foutu car son CSS devrait laisser la main au HTML en cas d'indisponibilité.

Il y a bien un problème avec le lecteur audio html 5 dans mon code. J'ai désactivé le JavaScript dans about:config de Firefox et sur le site, je me retrouve exactement avec le problème vu sur le mobile et les tablettes. Il y a le titre textuel écrit au-dessus du lecteur, mais pas de lecteur.
Peu de visiteurs désactivent aujourd'hui le JavaScript et les titres sont toujours disponibles avec le lien de téléchargement, qui permet aussi d'écouter sans télécharger. Mais c'est quand même un problème, et mon texte

<noscript>
      Attention, JavaScript n'est pas activé sur votre navigateur, le site apparaîtra incomplet !
    </noscript>

ne s'affiche pas en l'absence de JavaScript. Ça, c'est aussi un problème, je pourrais très bien avertir ici de l'absence du lecteur audio sans JS.
Mon lecteur JS est assez complexe et l'auteur a mélangé un peu de css avec le code JavaScript, ce qui ne rend pas facile les corrections.
La solution serait de mettre un lecteur html 5 sans JavaScript à la place de celui qui est en haut du site et qui donne des courts extraits des musiques.
Modifié par Bongota (22 Dec 2023 - 13:54)

C'est difficile de donner un avis sur des navigateurs que l'on ne possède pas... En tous les cas, moi, j'ai bien ta balise <noscript> qui fonctionne si absence de JS. Sur ton site principal du moins.

Là je suis un peu coincé mais je te répond plus tard. Si tu as une URL à proposer c'est mieux. En MP si tu préfères.

J'ai trouvé : ce n'est pas ton player qui est en cause, c'est ton slideshow.

Il tronque le bas de ta vidéo avec son `overflow: hidden` et du coup on ne voit plus les commandes du lecteur. Et cela est valable pour tous les slideshows de la page. Il faudrait ajuster tout cela.

En attendant voici une première solution : supprime le `height: 18rem` de ton slideshows, ça lui évitera de tronquer son contenu.

En fait ce problème n'est pas réservé aux tablettes, j'ai le même problème sur mon Chrome à jour de bureau. A tel point que, ne voyant aucun player sur la page d'accueil, j'avais cru que l'on parlait d'un autre site...
Modifié par Olivier C (22 Dec 2023 - 21:09)

Ce que tu pointes est pertinent sur les commandes des vidéos. J'avais remarqué ça, mais étant donné qu'il y a de toute façon une flèche "play" au milieu de la vidéo, je n'y avait pas apporté une grande importance. Voilà un problème éliminé.
Par contre, les lecteurs audio ne sont pas dans le slideshow, il ne sont pas encapsulés. Sauf qu'il y a du css dans le JavaScript et que c'est un peu difficile à extraire. De ce côté, le problème reste entier.
Merci de t'être penché dessus.

Bongota a écrit :
Par contre, les lecteurs audio ne sont pas dans le slideshow, il ne sont pas encapsulés.

Alors, je ne sais pas ce qu'il en est dans le code source car j'ai du mal à saisir la hiérarchie. Mais je peux te certifier que, du côté du code HTML interprété par les navigateurs, tes players sont bien intégrés dans tes slideshows. De toute façon j'ai testé (enlève la classe "slideshow" avec l'inspecteur pour voir).

En fait, il suffit par exemple que tu n'ais pas mis la balise fermante de la div des slides pour que le navigateur tente de "réparer" ton site en vu du rendu en les ajoutant virtuellement à la volée.

Je ne sais plus trop quoi dire.
Le premier lecteur audio, celui tout en haut et qui donne un court extrait de tous les titres du site est dans la class playlist. Il est à width:30em; de façon à ne pas occuper toute la page. Il est lui aussi commandé par le JavaScript. Il est relativement indépendant du reste de la page, enfermé dans sa class playlist. Pourtant, lui aussi il n'apparaît pas sur certains navigateurs/devices. Et il a de la place autour de lui.
Les autres lecteurs audio du site, je ne les vois pas dans le slidshow.

<h4 class="stitre">Bala</h4>
        			   <div id="bala"></div>
        		<div class="auteur">Bob Gnupa &copy;</div>
          <p><span class="lettrine">S</span>ur ce titre, la rythmique principale est jouée en acoustique, au balafon, autre instrument de musique africain emblématique. Ce rythme répétitif est accompagné de guimiques et mélodies au synthétiseur et d'un <a href="http://cliniquejembe.free.fr/Baton.html">bâton de pluie.</a><p>
                       /*Il est seul, ici*/            
	     <audio src="Musique/Bala.mp3" data-volume="1" preload="none">
		Votre navigateur ne supporte pas la balise audio.
	     </audio>
     /*Après, on part sur autre chose, la galerie d'images*/
            <div class="picture">
            <div class="galerie">

Vue générale : https://musiquenvrac.fr

Juste pour te rappeler qu'il y a du html dans le JavaScript , notamment une class player, que j'ai bien dans mon css. Le problème est peut-être à chercher ici (je m'étais trompé dans un autre post, je parlais de css dans le Javascript). Ci-dessous un extrait de ce JS avec html.

ElementsByClassName("backward"),x=document.getElementsByClassName("forward"),y=0;y<=r.length-1;y++){r[y].insertAdjacentHTML("afterend","<div class=\"player\"><div class=\"play\" title=\"Play\" tabindex=\"0\"><span></span></div><div class=\"pause\" title=\"Pause\" tabindex=\"0\" style=\"display: none;\"><span></span></div><div class=\"backward\" title=\"Backward\" tabindex=\"0\"><span></span><span></span></div><div class=\"forward\" title=\"Forward\" tabindex=\"0\"><span></span><span></span></div><div class=\"title\"></div><div class=\"prog\" aria-label=\"Progression\" tabindex=\"0\"><div class=\"progBarre\"></div></div><div class=\"timer\">00:00</div><div class=\"volumeF\" title=\"Volume\" aria-label=\"Volume : 1\" tabindex=\"0\"><div class=\"volumeBarre\"></div></div></div>");var A=r[y].getAttribute("data-volume");if(null!==

Modifié par Bongota (22 Dec 2023 - 23:02)

1/ Lorsque les choses sont si embrouillée, surtout lorsque le JS s'en mêle, la première chose à faire n'est pas d'aller voir le code source, mais de regarder le code interprété par le navigateur, via l'inspecteur.

Ensuite on peut chercher à comprendre d'où vient le problème à partir de tous les codes qui impactent le rendu. On commence par le HTML généré par le serveur (juste du HTML ou via un PHP, etc) et ensuite on regarde s'il n'y a pas du JS qui modifie le tout.

Je disais donc que je pensais (et pense toujours) que si les vidéos ne doivent pas se trouver dans les slides, alors qu'elles y sont, c'est qu'il doit manquer une balise de fermeture. Voilà pour le premier point.

2/ Maintenant, pour le script par lui-même, il ne fonctionne effectivement pas (je pourrais même dire "il ne fonctionne plus", car à une époque il me semble avoir visité ton site et l'avoir vu à l'oeuvre). Et lorsque l'on regarde encore une fois l'inspecteur, mais cette fois à partir de la console, on aperçoit bien une erreur liée à ton script :

script.js:48 
       Uncaught TypeError: Failed to execute 'insertAdjacentHTML' on 'Element': This document requires 'TrustedHTML' assignment.
    at HTMLDocument.<anonymous> (script.js:48:6383)

Et en allant voir la ligne 48 il s'agit bien d'un problème lié à l'injection du template HTML du player par le script, je ne mets que le début de la ligne (elle a une manière de concaténer le HTML la dev', c'est atroce, même sans les littéraux on pouvait faire mieux que ça à l'époque) :

r[y].insertAdjacentHTML("afterend", "<div class=\"player\"><div class=\"play\" title=\"Play\" tabindex=\"0\"><span></span></div><div class=\"pause\"...

Alors, qu'est-ce que tu as pu toucher pour que l'on en arrive là ?... si tu es en mesure de le dire...

Une piste à creuser : n'aurais tu pas récemment bougé tes règles CSP ?
Modifié par Olivier C (23 Dec 2023 - 00:33)

Salut,
merci de t'être penché sur ce problème. Du travail !
Il faut que je vérifie tout ça, ça fait un peu mal pour quelque chose qui fonctionnait avant.
Ce que j'ai fait ? Je ne sais pas trop. Je ne suis pas intervenu sur cette partie du site depuis des mois et des mois, ni sur le html et encore moins sur le JavaScript. Mais il se peut en effet que mes règles CSP y soient pour quelque chose. Pourtant, il n'y a pas longtemps que j'ai mis le CSP en fonction sur le site. Et seulement depuis deux jours que j'ai déporté le JavaScript dans un fichier externe.
Je crois fermement à toutes tes investigations, mais résumons.
- les deux vidéos ne sont pas contrôlées par le JavaScript, elles sont en simple audio html 5. On peut dire que ça va de ce côté, surtout depuis ta correction d'hier sur la hauteur. Ces vidéos sont en tous cas lues partout.
- les lecteurs audio en JS, problème, comme tu le décrit. Le JavaScript de la développeuse m'a toujours un peu fait peur, il n'est pas très clair.
Je vais tenter de voir tout ça, y compris peut-être adopter un autre lecteur audio JS.
Ça reste quand même un mystère pour moi le fait que ces lecteurs audio fonctionnent sur beaucoup de devices, même en mobile avec Firefox 106.1.0 sur Android.
Merci pour tout.
(je vais effectuer un essai tout de suite en virant le CSP)

Le premier verdict est sans appel, accusé, levez-vous !
C'est le CSP qui empêche, sur certains navigateurs d'ouvrir les lecteurs audio, notamment Chrome. Je l'ai viré du htaccess et les lecteurs apparaissent de nouveau. On en parle ici :
https://security.stackexchange.com/questions/249237/when-is-content-security-policy-csp-not-appropriate
Reste à voir les balises qui manquent peut-être et refaire le CSP afin qu'il n'interfère pas avec les lecteurs audio.
A plus.

Modifié par Bongota (23 Dec 2023 - 10:09)

On peut dire que c'est résolu.
Le CSP n'est pas difficile à mettre en place, quand on a assimilé les règles. Par contre, ses interactions avec le reste du code sont à surveiller attentivement, il y a beaucoup d'effets secondaires.
Le message de Stack Orverflow est bien clair :
Hence, CSP directives impose restrictions on active content, like the scripts, links and forms on an HTML document.

Rèle n° 1 du développeur (même un amateur comme moi) : toujours vérifier qu'un ajout ne perturbe pas le site.
Règle n° 2 : toujours vérifier qu'un ajout ne perturbe pas le site.
Règle n° 3 : toujours.............................................
Ainsi de suite.
Règle que je n'ai pas appliquée cette fois.