web-dev-qa-db-fra.com

Est-il possible de styler une balise audio html5?

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

html5audio
95
rabidmachine9

Oui! La balise audio HTML5 avec l'attribut "controls" 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 dialoguant avec l'API audio via javascript.

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

46
Benny
<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
53
Fábio Zangirolami

Oui: vous pouvez masquer l'interface utilisateur intégrée du navigateur (en supprimant l'attribut controls de audio) et créer votre propre interface et contrôler la lecture à l'aide de 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 ajouter des classes CSS aux éléments (dans ce cas, le div + buttons) et les styler comme vous le souhaitez.

Des propriétés et méthodes supplémentaires de l'interface JavaScript HTMLAudioElement sont disponibles ici .

43
gilad mayani

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.

26
Mihai

Vous devez créer votre propre lecteur qui s'interface avec l'élément audio HTML5. Ce tutoriel aidera http://alexkatz.me/html5-audio/building-a-custom-html5-audio-player-with-javascript/

8
katzkode

Ken avait aussi raison.

une balise css:

audio {

}

vous obtiendrez des résultats. semble que cela ne veut pas du joueur une hauteur au dessus ou en dessous de 25px mais la largeur peut être raccourcie ou allongée dans une certaine mesure.

c'était assez bien pour moi; voir cet exemple (avertissement, la lecture audio est automatique): www.thenewyorkerdeliinc.com

8
Nick

Pour changer uniquement la couleur du lecteur, il vous 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). J'ai donc ajouté:

audio {
    background-color: #95B9C7;
}

Cela a changé le lecteur en bleu clair.

7
Karin

quelques réglages de couleurs

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