Est-il possible de styliser la balise audio html5?


120

Je n'ai trouvé aucune ressource sur la façon de procéder. Quelque chose d'aussi simple que de changer la couleur du lecteur serait bien d'avoir :)


3
Ça me fait penser aux boutons rythmiques des vieux Wurlitzers - "samba", "jazz", "valse", ...
David Gelhar

1
Différents navigateurs réagissent différemment au style de l'élément audio - stackoverflow.com/a/27765938/325251
mvark

1
oui, et c'est-à-dire qu'il a l'air le pire. comment peuvent-ils le rendre si mauvais?
live-love

1
style vidéo réponse cross-browser advprog.blogspot.co.uk/2013/07/…
Mousey

@ 40-Love: est-ce une question sérieuse? c'est Microsoft !!
Ringo

Réponses:


47

Oui! La balise audio HTML5 avec l'attribut "contrôles" utilise le lecteur par défaut du navigateur. Vous pouvez le personnaliser à votre guise en n'utilisant pas les commandes du navigateur, mais en déplaçant vos propres commandes et en parlant à l'API audio via javascript.

Heureusement, d'autres personnes l'ont déjà fait. Mon lecteur préféré en ce moment est jPlayer , il est très stylé et fonctionne très bien. Vérifiez-le.


49
Donc la réponse est "non, ce n'est pas possible, vous devez utiliser un lecteur externe"?
Fernando

2
@Fernando: c'est en effet possible. Cela répond à la question "est-ce possible?"
Dan Schnau

3
Merci @dsschnau. J'ai posté mon commentaire car la question porte sur le style de la balise vidéo html5 , et toutes les réponses sont plus ou moins comme oui, c'est possible, en utilisant d'autres balises .
Fernando

10
Alors, est-ce vraiment un «non»? Faire rouler votre propre interface utilisateur n'est pas la même chose qu'un balisage existant.
bob

2
Cette réponse n'est en réalité qu'un lien vers une ressource. Et si jPlayer disparaît ?
Kyle

74
<audio>

audio::-webkit-media-controls-panel

audio::-webkit-media-controls-mute-button

audio::-webkit-media-controls-play-button

audio::-webkit-media-controls-timeline-container

audio::-webkit-media-controls-current-time-display

audio::-webkit-media-controls-time-remaining-display

audio::-webkit-media-controls-timeline

audio::-webkit-media-controls-volume-slider-container

audio::-webkit-media-controls-volume-slider

audio::-webkit-media-controls-seek-back-button

audio::-webkit-media-controls-seek-forward-button

audio::-webkit-media-controls-fullscreen-button

audio::-webkit-media-controls-rewind-button

audio::-webkit-media-controls-return-to-realtime-button

audio::-webkit-media-controls-toggle-closed-captions-button

RÉFÉRENCE: https://chromium.googlesource.com/chromium/blink/+/72fef91ac1ef679207f51def8133b336a6f6588f/Source/core/css/mediaControls.css?autodive=0%2F%2F%2F


18
Mauvaise présentation mais sélecteur CSS utile!
benoît

6
pouvez-vous s'il vous plaît montrer un exemple comment les utiliser? juste un exemple de code?
Xsmael le

9
Ceci n'est pris en charge que par les navigateurs basés sur le Webkit (par exemple, pas Firefox, IE, etc.)
gilad mayani

2
Très beau piratage, c'est la bonne réponse et merci beaucoup! Je change de style de balise audio sans douleur et code JS supplémentaire, ViVa Fabio
java acm


64

Oui: vous pouvez masquer l'interface utilisateur intégrée du navigateur (en supprimant l' controlsattribut de audio) et à la place créer votre propre interface et contrôler la lecture en utilisant Javascript ( source ):

<audio id="player" src="vincent.mp3"></audio>
<div> 
  <button onclick="document.getElementById('player').play()">Play</button> 
  <button onclick="document.getElementById('player').pause()">Pause</button> 
  <button onclick="document.getElementById('player').volume += 0.1">Vol +</button> 
  <button onclick="document.getElementById('player').volume -= 0.1">Vol -</button> 
</div>

Vous pouvez ensuite styliser les éléments comme vous le souhaitez en utilisant CSS.

Référence de l'API MDN HTMLAudioElement


Cela (le .play) ne fonctionnerait sûrement pas sur IOS car il est bloqué (voir stackoverflow.com/questions/31776548/… )
user1432181

30

L'apparence de la balise dépend du navigateur, mais vous pouvez la masquer, créer votre propre interface et contrôler la lecture à l'aide de Javascript.


14

quelques réglages de couleur

audio {
    filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
    width: 200px;
    height: 25px;
}

1
c'est un moyen rapide et sale de changer les couleurs de base du joueur, très pratique
wakandan

J'ai dépoussiéré mes identifiants de connexion pour me connecter, voter pour cela et dire "MERCI".
Marc Amos


8

Ken avait raison aussi.

une cssbalise:

audio {

}

vous obtiendrez des résultats. semble qu'il ne veut pas que le joueur soit à une hauteur supérieure ou inférieure à 25px, mais la largeur peut être raccourcie ou allongée dans une certaine mesure.

c'était assez bon pour moi; voir cet exemple (avertissement, l'audio est lu automatiquement): www.thenewyorkerdeliinc.com


Pour moi, un gros problème est Internet Explorer. Il a l'air terrible et une couleur différente et une taille beaucoup plus grande que les autres lecteurs de navigateur, même si la largeur est fixée à 150 px
Ringo

Si vous devez placer le lecteur IE9 + dans un petit espace, une hauteur de 25px et une largeur de 100px ont fonctionné pour moi. Je pense que la hauteur de 25 pixels était la clé, mais des nombres plus grands ne fonctionnaient pas pour une raison quelconque.
Ringo

Le lien est malheureusement en panne
Alex Sorokoletov

6

Pour changer uniquement la couleur du lecteur, il suffit d'adresser la balise audio dans votre fichier css, par exemple sur l'un de mes sites le lecteur est devenu invisible (blanc sur blanc) alors j'ai ajouté:

audio {
    background-color: #95B9C7;
}

Cela a changé le joueur en bleu clair.


12
Cela ne change pas la couleur de mon lecteur, cela ne fait que mettre une couleur de fond derrière. Une idée pourquoi?
Tom

1
@Tom car cette solution n'est pas pour changer le fond gris par défaut du player :-) Même résultat que vous pour moi.
Florian Doyen le

0

Oui, c'est possible, de @ Fábio Zangirolami answer

audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
                background-color: red;
}

Ne fonctionne pas sur Firefox 77
Henry

-4

Si vous souhaitez personnaliser le lecteur de musique standard du navigateur dans le CSS:

audio {
    enter code here;
}

1
la description pas complète est très simple et je peux utiliser cette méthode pour styliser tous les éléments audio
Davod Aslanifakor

Même une vérification superficielle de cette réponse aurait révélé que c'est faux.
Isaac Lubow
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.