Cómo personalizar tu propio reproductor de audio HTML5
- Introducción
Los desarrolladores web han querido usar audio y video en la web durante bastante tiempo. Con la estandarización de HTML5 y la mayoría de los navegadores modernos comenzando a implementar HML5, ha sido una gran sorpresa para nosotros.
En el pasado, la implementación de audio y video en una aplicación web sería muy tediosa, ya que tendríamos que importar complementos pesados de terceros, como Flash.
Ahora el audio / video HTML5 nos brinda otra opción, aunque aún no es tan poderoso como Flash debido a las limitaciones del navegador. Es adecuado en la mayoría de los casos.
Este artículo te dirá cómo construir tu propio reproductor de audio HTML5.
Empecemos con un simple reproductor HTML5
Como se ve en el código anterior, creará un jugador con el estilo predeterminado que proporciona cada navegador. Esto significa que el reproductor se verá diferente en diferentes navegadores.
Podría estar pensando: "¿Qué pasa si quisiera diseñar mi propio reproductor de audio con sus propios botones y barra de progreso?"
En realidad, HTML5 proporciona bastantes API útiles para permitir la manipulación de elementos de audio con JavaScript. Esto significa que podemos fácilmente diseñar nuestro propio jugador.
Entonces, primero nos familiaricemos con los atributos de etiquetas de audio HTML5 y algunas API que necesitamos usar en nuestra demostración.
En chrome:
En Firefox:
Podría estar pensando: "¿Qué pasa si quisiera diseñar mi propio reproductor de audio con sus propios botones y barra de progreso?"
En realidad, HTML5 proporciona bastantes API útiles para permitir la manipulación de elementos de audio con JavaScript. Esto significa que podemos fácilmente diseñar nuestro propio jugador.
Entonces, primero nos familiaricemos con los atributos de etiquetas de audio HTML5 y algunas API que necesitamos usar en nuestra demostración.
- Atributos de etiqueta importantes y API de JavaScript
Atributos de la etiqueta:
- en búfer: devuelve un objeto TimeRanges que representa las partes en búfer del audio / video.
- controles: establece o devuelve si el audio / video debe mostrar controles (como reproducir / pausar, etc.)
- currentTime: establece o devuelve la posición de reproducción actual en el audio / video (en segundos)
- duration: devuelve la duración del audio / video actual (en segundos)
- src: establece o devuelve la fuente actual del elemento de audio / video
Eventos API:
- canplay: se activa cuando el navegador puede comenzar a reproducir el audio / video
- canplaythrough: se activa cuando el navegador puede reproducir audio / video sin detenerse para el almacenamiento en búfer
- pausa: se dispara cuando el audio / video ha sido pausado
- reproducir: se dispara cuando el audio / video se ha iniciado o ya no está en pausa
- timeupdate: se dispara cuando la posición de reproducción actual ha cambiado
- Comienza a construir tu jugador
Ahora comencemos a personalizar nuestro propio reproductor de audio como se muestra en la imagen de arriba. Pero antes de empezar, analicemoslo. Básicamente, este pequeño jugador puede dividirse en las 5 historias siguientes.
- Tiene un botón de reproducción / pausa, que es para iniciar / pausar el audio.
- Si el usuario hace clic en el botón de reproducción, el audio se iniciará y se convertirá en un botón de pausa.
- Si el usuario hace clic en el botón de pausa, el audio se pausará y se convertirá en un botón de reproducción.
- Tiene un botón siguiente que es para cambiar al siguiente audio.
- Tiene una barra de progreso para rastrear cuánto se ha reproducido este audio.
Ahora implementemos nuestras funciones basadas en las historias de usuario anteriores.
En primer lugar, crear las marcas HTML5.
¡Luego escribe los códigos JS para que el jugador corra!
- Para las primeras 3 historias, podemos vincular el siguiente evento a este botón de reproducción / pausa.
Utiliza las API de "pausa", "play ()" y "pause ()", si el audio está en pausa. A continuación, activa play () y actualiza el estilo del botón, de lo contrario, a la inversa.
- Para la cuarta historia de usuario, solo necesitamos actualizar la fuente del elemento de audio.
Con respecto al último, necesitamos capturar la longitud del audio actual y la cantidad de su reproducción, para calcular el porcentaje y establecer el ancho correcto de la barra de progreso. Como ya aprendimos, "duración" significa la duración del audio y "currentTime" representa la cantidad de audio que se ha reproducido.
¡Agregue los siguientes códigos y verá que la barra de progreso se está ejecutando!
- Actualizar tu reproductor
Finalmente, puedes agregar los estilos que te gusten para que tu juego sea más bonito.
A continuación se muestra el enlace de codepen que contiene todos los códigos fuente en este blog. Siéntase libre de echar un vistazo si está interesado.
- Conclusión
Espero que hayas disfrutado aprendiendo sobre el audio HTML5 y cómo puedes crear tus propios reproductores. Solo hay controles básicos en mi reproductor, pero no hay nada que le impida agregar más funciones como el control de volumen, el modo de reproducción e incluso agregar sus propias animaciones. Estoy deseando verte crear excelentes reproductores de audio HTML5!
0 Comentarios