Nueva piel para nuestros archivos multimedia

Guía de estilo y personalización del reproductor de audio de WordPress

Una de las mejoras más importantes que WordPress 3.6 trajo consigo fue la posibilidad de incrustar fácilmente (sin plugins) audio y vídeo en el contenido de un sitio web, gracias a la integración de la librería MediaElement.js, que se encarga de añadir una capa que simplifica el proceso y la compatibilidad de archivos entre navegadores, sin depender del plugin de Flash, para reproducir los archivos multimedia.

MediaElement nos permite utilizar las etiquetas <audio> y <video> de HTML5 en cualquier navegador (incluso en Internet Explorer 7 y 8) y, solo en caso de incompatibilidad, utiliza el plugin de Flash. Otra de las ventajas de este sistema es que nos permite utilizar CSS para dar estilo a los reproductores y añadirles una nueva “piel” personalizada.

Cómo insertar audio y vídeo en WordPress

La manera más sencilla de probar esta nueva funcionalidad es añadir la dirección a un archivo de audio directamente en el bloque de contenido del editor de páginas o entradas.

El resultado será el mismo que si pegamos una dirección de un vídeo alojado en Youtube o Vimeo. WordPress se encarga automáticamente (a través del protocolo oEmbed) de convertir direcciones a archivos de audio o vídeo en reproductores incrustados:

Si añadimos una dirección a un archivo de audio (un MP3, por ejemplo) nos aparecerá un reproductor como este, con un estilo oscuro: fondo negro e iconos de los botones claros:

También se puede invocar el reproductor a través de un shortcode:

[ audio mp3="ruta-del-archivo.mp3" ]

En cambio, para insertar vídeos normalmente se recurre a servicios externos como Youtube o Vimeo, porque facilita mucho el proceso. Si pretendemos alojar los vídeos en nuestro propio servidor tendremos que considerar tres aspectos:

  • Tamaño de los archivos: los vídeos suelen pesar bastante y, dependiendo de la capacidad de almacenamiento de nuestro servidor, podemos llegar al límite fácilmente.
  • Tráfico que genera (bandwidth): el tráfico o tasa de transferencia de datos es el resultado de multiplicar el peso de los archivos que servimos por las visitas que llegan a nuestro sitio web. Si un vídeo pesa 10 MB y lo ven 100 personas, habremos generado un tráfico de casi un 1 GB (con un solo archivo).
  • Compatibilidad de formatos: una de las principales ventajas de alojar los vídeos en servicios externos es que no tenemos que procuparnos de los mútiples formatos que existen ni de la compatibilidad entre navegadores, sistemas operativos y dispositivos móviles.

Aun así, podemos añadir vídeo de la misma manera que el audio: pegando la dirección al archivo directamente en la caja de contenido o utilizando un shortcode, al que podremos pasarle algunas opciones como la fuente, bucle, reproducción automática o precarga.

Más información sobre los shortcodes de audio y video de WordPress.

Cómo personalizar el estilo del reproductor

Si el reproductor negro con botones blancos nos gusta, no es necesario hacer nada más, pero puede que el estilo no encaje con el de la web que estamos diseñando. Vamos a ver cómo podemos personalizar un poco el diseño de este reproductor de audio.

De momento, tal como funciona por defecto, no hay posibilidad de ajustar fácilmente el aspecto visual del reproductor, por lo que será necesario crear algo de código.

Lo más fácil tal vez sería modificar directamente el archivo CSS que viene con la librería MediaElement.js, pero esta solución no nos interesa, porque perderíamos los cambios con cada actualización del sistema.

En vez de eso, tendremos que añadir las reglas CSS a nuestro propio archivo “style.css” del tema que tenemos activado, o a cualquier otro archivo CSS que no se actualice automáticamente.

Básicamente nos puede interesar personalizar estos elementos del reproductor:

  • El color del fondo
  • El color del texto
  • Los iconos de los botones
  • Las barras de carga y reproducción

Cómo cambiar el color de fondo

Modificar el fondo del reproductor no es complicado. Tenemos que añadir una regla como esta a la hoja de estilos CSS:

<style>
/* Cambiar color de fondo del reproductor */
.mejs-container .mejs-controls { background: #932 !important; }
</style>

Si preferimos no utilizar “!important“, tenemos que crear una regla más específica que la anterior, para que tenga preferencia sobre el estilo que se aplica por defecto. Así, por ejemplo:

<style>
/* Cambiar color de fondo del reproductor */
.entry-content .mejs-container .mejs-controls {
	background: #932;
}
</style>

Ejemplos en diferentes colores:

Además de colores planos, si somos más creativos y preferimos darle una piel con textura o algún tipo de patrón, podemos añadir cualquier imagen de fondo. Por ejemplo:

Cómo cambiar el color del texto

Los únicos elementos de texto dentro del reproductor son los contadores de posición y de duración. Por defecto son de color blanco, pero podemos modificarlo con esta regla:

<style>
.mejs-container .mejs-controls .mejs-time span {
    color: #333333 !important;
}
</style>

Dando estilo a los iconos

Cambiar el estilo de los iconos de los botones es un poco más complicado, por dos razones: porque están incluídos en un sprite (una sola imagen grande que incluye todos los gráficos que se utilizan en un determinado proyecto), y porque es necesario cambiar dos grupos de imágenes (una en versión PNG y otra SVG).

La imagen PNG con los iconos está en esta ruta:
http://www.ejemplo.com/wp-includes/js/mediaelement/controls.png

Botones del reproductor de audio de WordPress

Por tanto, si queremos modificarlos, tendremos que crear una nueva imagen y servir una lista de iconos diferente a través de esta regla CSS (de la misma manera que más arriba: con !important o bien con una regla más concreta que la inicial):

<style>
.no-svg .mejs-controls .mejs-button button {
	background-image: url('new-controls.png') !important;
}
</style>

Pero para ordenadores o tabletas con pantalla de alta resolución (“retina display”, en el caso de Apple), la imagen que se mostrará no será la versión en PNG sinó un archivo SVG ubicado en:

http://www.ejemplo.com/wp-includes/js/mediaelement/controls.svg

Los archivos SVG son gráficos vectoriales que se pueden editar directamente con un editor de código (Photoshop no sirve para abrir este tipo de gráficos).

Por si te sirve de ayuda, para ahorrar tiempo aquí puedes descargar los SVG en dos colores: gris oscuro (#333333) y azul oscuro (#336699), para utilizar en diseños planos, sin degradados (el “flat design” que está tan de moda). Pulsa sobre las imágenes para descargar los archivos SVG:

Iconos negro plano para el reproductor

Iconos azules plano para el reproductor

Cómo cambiar el color de las barras de reproducción

El reproductor de WordPress incluye tres barras, cada una de un color diferente:

  • Barra de duración, que indica el tiempo total del archivo
  • Barra de carga, que nos dice qué parte del archivo se ha cargado
  • Barra de posición, que nos muestra en qué punto del archivo nos encontramos

Estas son las reglas con las que podemos alterar el color de fondo de estas barras:

<style>

/* Cambiamos el color de la barra de duración */
.mejs-controls .mejs-time-rail .mejs-time-total {
    background: #369 !important;
}

/* Cambiamos el color de la barra de carga */
.mejs-controls .mejs-time-rail .mejs-time-loaded {
    background: #666 !important;
}

/* Cambiamos el color de la barra de posición */
.mejs-controls .mejs-time-rail .mejs-time-current {
    background: #eee !important;
}

</style>

Eliminar elementos del reproductor

Si en vez de cambiar el aspecto visual lo que queremos es eliminar (o más bien ocultar) elementos del reproductor, podemos utilizar alguna de estas reglas CSS:

<style>

/* Eliminar el botón de reproducción y pausa */
.mejs-controls .mejs-play button { display: none; }

/* Eliminar el contador de tiempo y duración */
.mejs-container .mejs-controls .mejs-time span { display: none; }

/* Eliminar la barra de reproducción */
.mejs-controls div.mejs-time-rail { display: none; }

/* Eliminar el botón para silenciar el audio */
.mejs-controls .mejs-mute button { display: none; }

/* Eliminar el botón de volumen */
.mejs-controls div.mejs-horizontal-volume-slider { display: none; }

</style>

Añadir un enlace con jQuery para descargar el archivo de audio

Además, como mejora de funcionalidad, puede ser útil en algunos proyectos incluir un botón con un enlace para permitir que se descargue el archivo. Es decir, con esto damos la posibilidad a nuestras visitas de descargar el archivo de audio a su ordenador, además de escucharlo directamente en el navegador.

Para esto podemos utilizar jQuery:

<script>
$(window).load(function() {
	var audioContainer = $('.mejs-audio');
	if ( audioContainer.length > 0 ) {
		audioContainer.each(function(){
			var audioLink = $(this).find('.mejs-mediaelement a');
			var audioUrl = audioLink.attr('href');
			$(this).append('<div class="download-file"><a href="' + audioUrl + '">Descargar este archivo</a></div>');
		});
	}
});
</script>

En este caso es importante que el código se ejecute una vez que MediaElement.js haya terminado de formar los audios, es decir, no cuando el documento está listo – $(document).ready() – sinó cuando todo el contenido se ha cargado – $(window).load() –.

Después, si existe algún bloque de audio, recuperamos el enlace directo al archivo y creamos un nuevo bloque con el link y el texto de descarga, que podemos diseñar como queramos con CSS, con ayuda de la clase “.download-file” (o con el nombre que le hayamos dado a este nuevo bloque).

Cómo evitar que se cargue el código multimedia

Esto solo será necesario si pretendemos deshacernos por completo de la funcionalidad del reproductor, o sea, si no queremos que WordPress incluya automáticamente los archivos encargados de dar estilo y acción a los elementos multimedia.

Si al final lo que queremos es evitar que WordPress incluya el código de MediaElement.js podemos utilizar las funciones wp_deregister_script y wp_deregister_style añadiendo estas lineas en el archivo functions.php del tema activo:

wp_deregister_script( 'mediaelement' );
wp_deregister_style( 'mediaelement' );

El reproductor no es “responsive”

De momento, el reproductor utiliza un diseño fijo que ocupa el 100% del ancho del bloque contenedor, es decir, no se adapta a tamaños flexibles alternativos (responsive web design), aunque probablemente pronto se mejore este aspecto en nuevas versiones de WordPress.

Problema: No aparecen los iconos en ordenadores “retina display”

Como hemos comentado más arriba, los ordenadores o tabletas con pantallas de alta resolución (“retina display”) verán la versión SVG de los iconos, pero los servidores de páginas web no siempre están configurados para mostrar estos gráficos por defecto, y por tanto no los reconocen. El resultado es un reproductor que funciona pero que no muestra ningún icono.

Este problema dependerá por tanto de cada caso y de dónde tengamos alojada nuestra web. Para solucionarlo podemos hacer tres cosas:

  1. Cambiar las reglas CSS para que en vez de utilizar la imagen SVG use la versión PNG, que todos los navegadores y servidores entienden.
  2. Añadir el MIME type para SVG en .htaccess (o en el archivo de configuración de Apache)
  3. Pedir ayuda al proveedor de hosting para que configure el servidor

Si queremos olvidarnos de los gráficos vectoriales, podemos añadir esta regla CSS a nuestra hoja de estilos para que cargue los iconos PNG en ambos casos:

<style>
.mejs-controls .mejs-button button {
	background: transparent url('controls.png') !important;
}
</style>

Aunque una solución mucho mejor, especialmente para quienes pueden disfrutar de la calidad de los gráficos vectoriales en su pantalla, será configurar Apache para que reconozca estos archivos SVG.

Para ello podemos añadir el tipo MIME correspondiente al principio del archivo .htaccess con la directiva AddType:

# --------------------
# Add MIME type: SVG
# --------------------

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

Recuerda que .htaccess es un archivo oculto, por lo que puede ser necesario seleccionar antes la opción de “ver archivos invisibles” o “mostrar archivos ocultos” en el programa FTP que estés utilizando.

Conclusión

Es complicado personalizar el reproductor de WordPress, y eso que aquí prácticamente sólo hemos hablado de retocar los estilos, no la funcionalidad.

Pero aun así, todos estos cambios harán que tengamos un reproductor de audio o vídeo un poco más a medida. Con un poco de tiempo, gusto y creatividad podremos hacer cosas realmente interesantes.

Si estos cambios cosméticos no son suficientes —porque en realidad solo hemos aplicando un poco de maquillaje al reproductor—, siempre podemos ampliar su funcionalidad instalando y configurando directamente MediaElement.js, que incluye muchas más opciones, como controlar qué botones aparecen en el reproductor, añadir plugins propios, modificar el tamaño, el volumen inicial, añadir control desde el teclado, etc.

Comentarios

  1. Sanrrone

    Muy bueno el tutorial amigo, felicidades.

  2. Jordi

    Hola, Daniel. Sé que esto no es un foro, ni un manual de ayuda en wordpress… Pero a ver si tú sabes por qué no me aparece el símbolo del play del pause en el reproductor de la web en la que estamos trabajando. La verdad es que me estoy volviendo loco con este tema. Muchas gracias.

  3. Jordi

    Vale. Perdón. Acabo de ver que también hablas de eso… Vaya, eso me pasa por estar en un estado de histeria constante. Muchas gracias.

  4. Daniel

    Hola Jordi. Cuando no se ven los iconos de play, pause, volumen, etc. suele ser porque el servidor no reconoce los archivos SVG.
    Una solución es añadir en el .htaccess el código que se comenta al final de este artículo, y otra, utilizar la versión PNG de los iconos.

  5. Enrique Jaimes

    Hola Amigo Daniel, excelente la pagina , das tus conocimientos de lo que sabes en materia de programación, además de ofrecer tus servicios, excelente página , la recomendé a mis compañeros de la Universidad Tecnológica , ya que estudiamos sistemas y les agrado, saludos.

  6. Patricia

    Hola!

    Excelente tutorial. Una preguntita, sería posible poder añadir algún botón?: reproducción aleatoria, anterior, siguiente…

    Gracias!

    P.

  7. Daniel

    Hola Patricia.
    Muchas gracias. El reproductor de WordPress no incluye otros botones, pero sí que puedes hacer listas de reproducción (es decir, agrupar varios arhivos de audio o vídeo). Así es más fácil pasar de uno a otro.

  8. Flamenco

    Ahora además, por lo que he podido ver en las últimas actualizaciones, le han incorporado al reproductor de audio los siguientes mensajes:

    Use Left/Right Arrow keys to advance one second, Up/Down arrows to advance ten seconds.
    Use Up/Down Arrow keys to increase or decrease volume.

    Los cuales, al aparecer, en mi caso concreto se me ponen justo encima del reproductor, afectando al funcionamiento y a la estética.
    ¿Habría alguna forma de desahabilitarlos?
    Un saludo y muchas gracias de antemano.

  9. Daniel

    Sí, puedes ocultarlos con CSS. Los dos mensajes tiene la clase “mejs-offscreen”, o sea que bastaría añadir una regla:

    .mejs-offscreen { display: none; }

  10. Luis Castillo

    Buenas noches joven Daniel, buscando barras de audio o sonido fijas pues he encontrado esta web tuya, y ke de entrada me parece genial… Kiero preguntarte lo siguiente: como lo hago para poner una barra de audio que reproduzca streaming de audio shoutcast… Me urge bastante y te agradeceria tu ayuda… Saludos.

  11. Lina

    No hay alguna manera de subir un rar o zip, para ver como esta organizado? Estoy intentandolo hacer para un trabajo de universidad pero no he podido

  12. EZEQUIEL

    Hola Daniel, tengo una duda grandisima!! Soy muy nuevo en esto de los codigos y pasa lo siguiente:
    descarge el plugin “WPaudio MP3 Player” la cual introduce un simple icono play y reproduce la musica que subo… pero solamente me sale el nombre de la cancion pero el icono de play no aparece! El plugin no se actualiza hace 5 años! y quiza este en png. Quizas si edito directamente el codigo del plugin funcionaria? Me podrias guiar? Muchas gracias y me salvarias la vida si me ayudas en esto porque estoy encaprichado con este plugin, jeje.

Y tú qué opinas?

Las URLs se convertirán en enlaces automáticamente. Tu dirección de email no se publicará ni se utilizará para enviar ningún tipo de información. Los mensajes que no aporten nada al tema que se trata en esta entrada se borrarán. Las imágenes que aparecen al lado de cada autor utilizan el servicio de Gravatar. Recuerda que puedes usar etiquetas HTML como <a href>, <code>, <em> o <strong> en los comentarios.

(necesario)

(opcional)