Est-il possible de style de la balise audio html5?

Je n'ai pas trouvé de ressources sur la façon de le faire. Quelque chose d'aussi simple que de changer la couleur du joueur serait sympa de les avoir 🙂

  • Me fait penser au rythme des boutons sur le vieux Wurlitzers - "samba", "jazz", "la valse", ...
  • Les différents navigateurs réagissent différemment au style de l'élément audio - stackoverflow.com/a/27765938/325251
  • oui, et sur ie, il semble la pire. comment peuvent-ils donner l'air si mauvais?
  • vidéo de style du navigateur croix de répondre à advprog.blogspot.co.royaume-uni/2013/07/...
  • c'est qu'une question sérieuse? c'est Microsoft!!
  • Malheureusement, ce n'est pas de la croix-navigateur. C'est seulement Webkit et peut-être à l'Opéra.

InformationsquelleAutor rabidmachine9 | 2010-11-08
  1. 46

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

    Heureusement, d'autres personnes l'ont déjà fait. Mon joueur préféré est maintenant de jPlayer, il est très à styliser et fonctionne très bien. Check it out.

    • Vous n'êtes toujours pas nous dire comment le personnaliser. J'ai trouvé quelque chose ici : theparticlelab.com/...
    • Donc la réponse est "non, il n'est pas possible, vous devez utiliser un lecteur externe"?
    • il est en effet possible. Ceci répond à la question "est-il possible?"
    • Merci @dsschnau. J'ai posté mon commentaire parce que la question est à propos de style html5 vidéo de la balise, et toutes les réponses sont plus ou moins comme oui, il est possible, en utilisant d'autres balises.
    • jplayer n'est pas facilement personnalisable, si vous ne voulez pas utiliser l'un de ses peaux hors de la boîte. Je voudrais un joueur qui est os à nu le-petit et facilement skinnable.
    • Donc, est-ce vraiment un "non"? Roulement de votre propre INTERFACE utilisateur n'est pas la même chose d'un stying balisage existant.
    • Cette réponse est vraiment juste un lien vers une ressource. Que faire si jPlayer s'en va?

    InformationsquelleAutor Benny
  2. 55
    <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
    • Présentation pauvre mais utile sélecteur CSS !
    • pouvez-vous s'il vous plaît montrer un exemple comment utiliser ces ? juste un exemple de code ?
    • C'est uniquement pris en charge par webkit des navigateurs (e.g pas Firefox, IE, etc.)
    • Très utile merci!
    • Très sympa le piratage , c'est la bonne réponse et merci beaucoup ! j'ai changer de style de la balise audio sans douleur et supplémentaires code JS , ViVa Fabio
    • Et pour Safari?

    InformationsquelleAutor Fábio Zangirolami
  3. 47

    Oui: vous pouvez masquer le navigateur intégré à l'INTERFACE utilisateur (par retrait de la controls attribut de audio) et au lieu de construire votre propre interface et de 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 pour les éléments (dans ce cas, le div + buttons) et le style comme vous le souhaitez.

    MDN HTMLAudioElement de référence de l'API

    InformationsquelleAutor gilad mayani
  4. 27

    L'aspect de l'étiquette est un navigateur, mais vous pouvez la masquer, de construire votre propre interface et de contrôler la lecture à l'aide de Javascript.

    InformationsquelleAutor Mihai
  5. 8

    Ken avait droit en tant que bien.

    un css tag:

    audio {

}

    vous obtiendrez des résultats. semble qu'il ne veut pas le joueur de n'importe quelle hauteur au-dessus ou au-dessous de 25px mais la largeur peut être raccourci ou allongé dans une certaine mesure.

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

    • Pour moi, un gros problème, c'est Internet Explorer. Il a l'air terrible et de couleur différente et beaucoup plus grand que la taille de navigateur et d'autres joueurs, même si la largeur est définie à 150px
    • Si vous avez besoin pour obtenir IE9+ lecteur dans un petit espace, une hauteur de 25px et la largeur de 100px a fonctionné pour moi. Je pense que la hauteur de 25px a clé, mais en plus grand nombre n'a pas de travail pour quelque raison que ce soit.
    InformationsquelleAutor Nick
  6. 8

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

    InformationsquelleAutor katzkode
  7. 7

    De changer la couleur du joueur, tout simplement l'adresse de la balise audio dans votre fichier css, par exemple sur un de mes sites, le joueur est devenu invisible (blanc sur blanc) j'ai donc ajouté:

    audio {
    background-color: #95B9C7;
}

    Cela a changé le joueur à la lumière bleue.

    • Cela ne change pas la couleur de mon joueur, il met une couleur de fond derrière elle. Aucune idée pourquoi?
    InformationsquelleAutor Karin
  8. 3

    un peu de couleur accordages

    audio {
    filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
    width: 200px;
    height: 25px;
}
    • c'est une façon rapide et sale pour changer les couleurs de base du joueur, très pratique
    InformationsquelleAutor Arthur Veselov
  9. -3

    Si vous voulez style les navigateurs standard lecteur de musique dans le CSS: 

    audio {
    enter code here;
}
    • pas de compléter la description est très simple et je peux l'utiliser de cette façon pour le style de tous les éléments audio
    • Même une vérification sommaire de cette réponse aurait révélé que c'est faux.
    InformationsquelleAutor Kenneth Klippert