Forum d'entraide PHPFrance

Bonjour à tous,

Le lecteur de fichier audio HTML <audio> ne s'affiche pas bien sur iPhone iOS : il y a le bouton PLAY, mais pas le reste.

<audio controls>
<source src="fichier_audio.mp3" type="audio/mpeg">
</audio>

J'ai remarqué que si on ajoute un width:100%, ça fonctionne et ça s'affiche sur l'iPhone :
Là où ça devient cocasse, c'est lorsque je veux mettre une largeur exprimée en pixel :
Si la valeur est inférieure à 587px, ça ne s'affiche pas bien (seulement le bouton Play au lieu de la barre de controle.

Quelqu'un pourrait-il m'expliquer ce bug et pourquoi cela n'est pas résolu par Apple? Afficher un lecteur audio HTML5
correctement me parait très important...
J'avais même réussi à changer le background-color de <audio> et lui donner un look super cool avec des gradients,
mais ça ne marche que sur ordinateur, pas sur iPhone (pas d'android pour tester l'affichage).

Voili-voilà, merci! ^^

Dans la spec HTML5 il n'y a pas d'obligation sur les contrôles à afficher quand tu mets controls à true, donc il ne s'agit pas d'un bug mais d'un choix de l'éditeur :
https://html.spec.whatwg.org/multipage/ ... a-controls

Si tu veux un player identique sur toutes les plateformes, c'est à toi de le développer, et justement HTML5 permet cela.

Salut Arthur,

Mais comment expliques-tu que le lecteur audio s'affiche correctement si on mets un width de 100% ? ou un width >= 587px ?
Avec par exemple un width de 287px, le lecteur audio va très bien s'afficher sur ordi, mais pas sur iPhone.
Même si on parle de specs HTML5, ce n'est pas normal que Safari affiche les correctement sur un ordi mais pas sur un smartphone.
On ne parle pas de responsive design là, mais bien d'un bug (le player disparaît, laissant un bouton play-pause tout moche.)

Je ne souhaite pas avoir un player identique, mais juste qu'il s'affiche, comme sur les ordis
(les players ont un look un peu différent sur chaque navigateur mais ça fait l'affaire. Je suis d'accord avec toi
que la personne qui veut un look identique doit développer son propre player, je l'ai déjà fait. Là, je remonte un bug Safari-iPhone.)

Pour moi c'est clairement un bug d'affichage. Comme si un site web s'affichait correctement sur un ordi, mais pas sur un smartphone.

La balise audio avec l'attribut controls fait le boulot sur ordi, mais pas sur iOS.
Pas testé sous Android ni autre navigateur que Safari pour smartphone.

Mais comment expliques-tu que le lecteur audio s'affiche [différement sur desktop et sur mobile]

Quand tu utilises la balise <audio controls> la spec HTML5 autorise le navigateur à afficher le player audio de son choix avec les contrôles de son choix.
Donc le navigateur affiche le player audio qu'il veut !

Même si on parle de specs HTML5, ce n'est pas normal que Safari affiche [un player différent sur desktop et sur mobile]

Le navigateur affiche le player audio qu'il veut !

Je ne souhaite pas avoir un player identique, mais juste qu'il s'affiche, comme sur les ordis

Tu peux souhaiter ce que tu veux, mais si ce que tu souhaites n'est indiqué nulle part dans la spec HTML5 alors le mieux c'est que tu participes aux workgroups du W3C sur la spec HTML.
Et en attendant tu auras plus vite fait de développer ton propre player ou d'en utiliser un déjà existant.

Pour moi c'est clairement un bug d'affichage.

Pour toi, peut être, mais si ce comportement n'enfreint aucune règle de la spec HTML5 alors ce n'est pas un bug !

Si ça peut aider quelqu'un, voici le code HTML pour afficher correctement le lecteur natif HTML5 sous iOS/iPhone :
(sans avoir à coder votre propre player ou en utiliser un)
Si le lecteur natif s'affiche mal sur d'autres smartphones/tablettes, vous pouvez me l'indiquer, ainsi que la solution que vous avez trouvé pour l'afficher correctement. Merci!