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 :)
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 :)
Réponses:
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
Oui: vous pouvez masquer l'interface utilisateur intégrée du navigateur (en supprimant l' controls
attribut 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.
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 css
balise:
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;
}