1174 sujets

Accessibilité du Web

Balise audio html 5

Bonjour,
je ne fait peut-être que découvrir une pratique déjà entérinée, mais je n'en entend pas beaucoup parler, ici ou ailleurs.
J'ai découvert en effectuant des essais que l'on pouvait agir sur le fond de la balise audio html 5, sans JavaScript ou plugins. On peut lui mettre un opacity ou agir dessus avec mix-blende-mode. C'est très utile quand on veut fondre cette balise dans un paysage et la rendre plus discrète. Il faut bien avouer que l'original que mettent en place les navigateurs n'est pas très esthétique, c'est le moins que l'on puisse dire.
Bonjour
ah oui, c'est certain qu'avec js, on peut faire beaucoup et beau. Même avec juste du css, on peut aussi faire un bar-graphe qui réagit à la musique (quand même 30 lignes de code et avec les @keyframes).
Je parlais plus simple, seulement de ce qu'on pouvait faire de la balise audio html5 afin de la rendre plus discrète. Sur mon essai, j'ai réussi quelque chose de très esthétique simplement en jouant sur opacity et mix-blende-mode.
Arriver à rendre discrète et esthétique la balise audio html5 avec juste deux mots, opacity: .8; et mix-blend-mode: difference; ça vaut le coup de ne pas encore surcharger la page de js. Maintenant, si l'aspect visuel du lecteur surpasse sa simple fonction d'écoute d'un titre, oui, il faut ajouter du js, surtout si on veut faire une balise audio multiple.
Modifié par Bongota (07 May 2020 - 14:58)
Salut,
et merci pour le lien, je n'avais même pas pensé aller voir ici. Alors que j'ai cherché partout une fonction qui m'intéresse au plus haut point, la possibilité de jouer sur le volume et de le définir à un niveau plus bas. J'avais même préparé une question pour le forum. La réponse est dans cet autre lien https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Cross-browser_audio_basics
Et ce que je cherchais, en vain :
// set the volume at 50%
myAudio.volume = 0.5;
Il faut utiliser JavaScript mais c'est léger.
C'est à croire que le site de Mozilla sur cette balise n'a pas les mots clés suffisants, puisque j'avais cherché partout avec : "balise audio html5 contrôler le volume" ou une combinaison de ces mots. Ou alors j'ai mal cherché Smiley decu
Merci.
Modifié par Bongota (11 May 2020 - 11:14)
Allez, une petite dernière pour la route...
JPB, tu fais de la musique, je crois, ça peut t'intéresser.
Ce que je cherchais, trouvé sur :
https://stackoverflow.com/questions/33747398/html-audio-tag-volume
<script>
  var audio = document.getElementById("myaudio");
  audio.volume = 0.1;
</script>

en ajoutant id="myaudio" dans la balise html. Ce qui n'empêche pas le visiteur de pousser le volume s'il le désire.
Pour le reste, la décoration de la balise, j'en reste à mon idée première, rendre le lecteur discret pour qu'il se fonde dans le paysage. Je ne suis pas sur Spofy, je suis dans le zen, pas dans la techno. Smiley cligne
Et merci d'avoir relancé mes recherches.
Meilleure solution
Sujet clos
Aller à