Estoy construyendo un reproductor de música de la aplicación web que implementa el audio HTML5 etiqueta, sin embargo quisiera que se vea consistente a través de navegadores – es posible definir mi propia custom CSS? Y cómo?

saludos

Fela

  • Las opciones son actualmente muy limitada, pero se puede usar outline para ayudar a que se destaque un poco.
InformationsquelleAutor Fela Maslen | 2010-09-25

4 Comentarios

  1. 27

    No hay actualmente ninguna manera el estilo de HTML5 <audio> jugadores mediante el uso de CSS. En su lugar, usted puede dejar fuera de la control atributo, y llevar a cabo sus propios controles con Javascript. Si usted no quiere poner en práctica todos en su propio, me gustaría recomendar el uso de una ya existente aspecto configurable HTML5 reproductor de audio, tales como jPlayer.

  2. 18

    Descubrí por casualidad (yo estaba trabajando con imágenes a la vez) que el box-shadow, border-radius y las transiciones funcionan bastante bien con el pantano de audio estándar de la etiqueta de jugador. Me funciona en Chrome, FF y Opera.

    audio:hover, audio:focus, audio:active
    {
    -webkit-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
    -moz-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
    box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    transform: scale(1.05);
    }

    con:-

    audio
    {
    -webkit-transition:all 0.5s linear;
    -moz-transition:all 0.5s linear;
    -o-transition:all 0.5s linear;
    transition:all 0.5s linear;
    -moz-box-shadow: 2px 2px 4px 0px #006773;
    -webkit-box-shadow:  2px 2px 4px 0px #006773;
    box-shadow: 2px 2px 4px 0px #006773;
    -moz-border-radius:7px 7px 7px 7px ;
    -webkit-border-radius:7px 7px 7px 7px ;
    border-radius:7px 7px 7px 7px ;
    }

    Me conceda sólo «tartas es un poco», pero hace un espectáculo más emocionante de lo que ya existe, y sin hacer GRANDES fannying en JS.

    NO disponible en IE, por desgracia (aún no apoyo a la transición de bits), pero parece que se degradan muy bien.

    • Radio frontera no funciona para el elemento de audio.
  3. 1

    Además de la caja de sombra, de transformar y de opciones de borde comentado en otras respuestas, los navegadores WebKit actualmente también obedecer -webkit-text-fill-color para definir el color del «tiempo transcurrido» los números, pero ya que no hay forma de establecer sus antecedentes (que podría variar en función de la plataforma, por ejemplo, invertida modos de alto contraste en algunos sistemas operativos), se le recomienda set-webkit-text-fill-color para el valor «inicial» si usted ha utilizado en otros lugares y el elemento de audio es heredar este, de lo contrario, algunos usuarios pueden encontrar los números ilegibles.

  4. 0

    Hay CSS opciones para la etiqueta de audio.

    Como: html 5 etiqueta de audio de ancho de

    Pero si jugar con ella podrás ver los resultados pueden ser inesperados – como la de agosto de 2012.

Dejar respuesta

Please enter your comment!
Please enter your name here