Est-il possible de styliser la balise audio html5?

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 :)

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.

<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

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

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.

quelques réglages de couleur

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

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/

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 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.

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

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

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

audio {
    enter code here;
}