HTML5 ha simplificado muchas cosas en el desarrollo web, una de las cuales es el uso de audio incorporado. Hoy, vamos a trabajar en el proceso de personalizar completamente el elemento del reproductor de audio HTML5, que puede adaptarse a navegadores más antiguos con fallas. Es un método simple que es fácil de construir y modificar.
El proyecto de código abierto MediaElement.js es muy popular, e incluso se ha incorporado en el núcleo de WordPress desde la versión 3.6. Le permite incrustar cualquier audio o video HTML5 utilizando una interfaz de reproductor nativa que puede adaptarse dinámicamente en un reproductor Flash / Silverlight cuando sea necesario. Me impresionó mucho ver todas las características y parece ser una de las soluciones más avanzadas para el manejo de navegadores heredados. ¡Lo usaremos como punto de partida!
Demo en vivo - Descargar código fuente
Empezando
De inmediato, noté que MediaElement fue construido sobre jQuery. La última biblioteca al momento de escribir este código es 1.10.2 y el soporte para varios elementos de la interfaz de usuario podría cambiar en futuras actualizaciones. Aparte de este guión también necesitamos una copia de mediaelement-and-player.min.js que puede obtener desde el sitio web oficial o desde el repositorio de GitHub. Los otros dos archivos que debe copiar en el mismo directorio son flashmediaelement.swf y silverlightmediaelement.xap.
Ahora el script funciona reemplazando tu promedio etiqueta con algún HTML interno construido usando nombres de clase. Sobrescribir estas clases debería proporcionar mucho espacio para una personalización detallada. Estoy utilizando una pista bastante larga llamada Evidence Song, que se publica bajo la atribución de CC + compartir por igual.
La idea de diseño original provino de este tutorial en DesignModo que también utiliza ilustraciones de álbumes y simplifica las pistas de volumen / tiempo. Mi objetivo es ajustar esto en gran medida en una versión simplificada donde el enfoque está en la facilidad de uso limpio. He actualizado muchos gráficos usando cosas de PixelsDaily como estos deslizadores metálicos. También los botones reproducir / pausar y silenciar / anular silencio provienen de este reproductor de audio PSD.
Tener algunos gráficos o PSD gratuitos organizados con anticipación te ahorrará muchos problemas al intentar construir el reproductor en CSS. Pero antes de saltar al código CSS, quiero explicar cómo inicializamos el script.
Implementando MediaElement.js
El método de inicialización se llama mediaelementplayer () que puede tomar una serie de diferentes opciones. Consulte la documentación de la página web para obtener más información sobre cómo funciona esto.
La lista de características se crea de manera muy similar a una matriz de valores. reproducir pausar es un solo botón de reproducción y pausa, mientras que Progreso y volumen Representa las pistas del scrubber para cada propiedad. También puedo definir el ancho / alto del elemento de audio, ya que debe renderizarse utilizando jQuery.
Los últimos tres parámetros forzarán una visualización nativa en plataformas móviles usando iOS o Android. A veces, puede obtener una IU de audio simple para trabajar en el móvil, pero en este caso es mucho más fácil admitir al jugador nativo. El mayor problema es el manejo de un diseño móvil que también se adapta a una interfaz de audio utilizable.
Estilos de reproductor de audio
Ahora podemos saltar a CSS y ver cómo se crea el diseño. La configuración básica del código se basa en el posicionamiento relativo o absoluto de cada elemento principal. Podemos establecer valores de ancho / altura fijos para garantizar que todo se vea igual en todos los navegadores. .reproductor de música Será la clase contenedora que siempre podemos usar como base.
El gran contenedor del reproductor de audio puede diseñarse de cualquier manera utilizando texturas repetitivas, gradientes de fondo, incluso sombras de casillas CSS3. También creé un elemento h2 de muestra que contiene el nombre de la banda y el título de la canción. Usando jQuery, incluso podríamos actualizar este valor de texto en base a una lista de reproducción de música previamente generada.
Notará con bastante rapidez que cada entrada tiene una clase de definición que es muy fácil de manipular. El botón de reproducción / pausa se crea utilizando un solo archivo PNG y las actualizaciones de la imagen de fondo según el botón que se debe mostrar. Estos pueden ser dirigidos usando .mejs-play button y .mejs-pause button, respectivamente.
El icono de audio mute / unmute también es muy similar al que usa otro sprite PNG.El sumidero de tiempo más grande vendrá cuando necesites estudiar cada una de estas clases individuales y aprender cómo escribir selectores de CSS específicos para ellas. MediaElement es excelente para actualizar la interfaz e incluir muchas clases relacionadas para casi todas las interacciones de los usuarios.
Barras de fregado
Hay dos depuradores únicos relacionados con el volumen de audio y la búsqueda de tiempo en la pista. He mantenido gradientes o colores de fondo planos, pero en su lugar, puede intentar usar una imagen de fondo que se repite para ver cómo se ve.
Para cada barra de fregado, encontrará que hay diferentes partes que deben diseñarse por separado. Cada barra tendrá una clase de vista completa que representa el valor al 100%. Para el volumen esto está etiquetado. .mejs-horizontal-volume-total y está destinado a mezclarse bien en el diseño. similar .mejs-horizontal-volume-current representa la barra que muestra el nivel de volumen actual. Entonces, si se establece en 50%, solo la mitad de la barra total se llenará con estas propiedades CSS. Me gusta cómo se ve el radio de borde redondeado en cada pista del depurador y es mucho más fácil con la ayuda de las propiedades de CSS3.
El riel de carga tiene una característica adicional con la clase. .mejs-tiempo cargado. Esto representa la cantidad de archivos de audio que se ha cargado previamente a través de descargas de transmisión. Este efecto es más común en reproductores de video como con YouTube. Pero las pistas de audio pueden tener el mismo efecto: estos archivos son más pequeños y no tardan tanto en finalizar la descarga.
Debo tener en cuenta que el uso de cualquier versión de jQuery 1.8+ no siempre representa el ancho total de la barra de desplazamiento. Por alguna razón, nunca aumenta a menos que incluyamos clases para padres más específicas o usemos el !importante palabra clave. Errores similares podrían aparecer en futuras versiones, así que asegúrese de volver a comprobar todo.
Características adicionales de la interfaz de usuario
Las dos últimas secciones de CSS se centran en los controles deslizantes de metal y la información sobre herramientas basada en el tiempo. Encontré este efecto muy inspirador en el reproductor DesignModo y quería mantenerlo como una muestra de lo que es posible dentro de la interfaz de usuario.
No vale la pena explicar aquí, aparte de las imágenes de fondo perfectamente ajustadas con posicionamiento absoluto. Es una buena idea mantener todo en la alineación, a menos que su objetivo sea construir un reproductor de audio de ancho fluido con capacidad de respuesta. Las cosas definitivamente se vuelven un poco más difíciles, pero debería ser obvio que todo es posible con suficiente trabajo.
Siguiendo el ejemplo anterior, mantuve este efecto de desplazamiento de información sobre herramientas usando una única imagen de fondo. CSS3 puede generar información sobre herramientas y flechas redondeadas únicas, pero esto a menudo requiere más HTML del que podemos editar manualmente en el reproductor de audio. Este texto se mantiene dentro de una clase. .mejs-time-float que utiliza pantalla: ninguna por defecto. Solo deseamos mostrar el valor del tiempo cuando se sitúa sobre la barra de desplazamiento, para que los usuarios puedan decidir qué tan lejos deben saltar.
En general, este complemento requiere una gran cantidad de código para que todo se vea bien. Es muy posible que le lleve más de un día lograr un producto terminado. Sin embargo, también diría que MediaElement.js es la solución más precisa para los modernos reproductores de audio / video HTML5. Si tiene un hermoso diseño de maqueta, es casi seguro que se puede crear con suficiente tiempo y paciencia.
Demo en vivo - Descargar código fuente
Clausura
Espero que este tutorial pueda arrojar algo de luz sobre el proceso de personalización de un reproductor de audio HTML5. El uso de estilos CSS3 comunes sin ningún JS es una posibilidad, pero tiene un soporte muy pobre entre las versiones más antiguas de IE y los navegadores similares desactualizados. Aunque JavaScript no siempre es compatible con todos los navegadores, MediaElement.js proporciona una alternativa simple a la interfaz clásica del reproductor HTML5.
Siéntase libre de descargar una copia del código fuente de mi proyecto y ver qué tipo de diseños de interfaz de usuario puede crear.