Es una nueva comunidad sobre el reciente estándar de la web Html5, donde puedes encontrar tutoriales, tips, consejos, información, noticias y demás en un solo lugar.

Reproductor de audio personalizado con HTML5


En la actualidad los dispositivos móviles son de uso frecuente entre los usuarios y como desarrolladores es inevitable pensar en ¿cómo se verá la página/aplicación en los distintos dispositivos móviles?.

De igual forma, el contenido multimedia (audio/vídeo) es de alto consumo en dichos dispositivos y es por eso que en algunos proyectos quizá lleguemos a necesitar de un reproductor de audio o vídeo. Debido a esto me di a la tarea de desarrollar un reproductor de audio compatible con todos los navegadores en sus versiones más recientes (sí, inclusive Internet Explorer 9), cuyo desarrollo he querido compartir con toda la gente que está deseosa de aprender a utilizar la API para contenido multimedia que se incluye en HTML5.

El tutorial está dividido en cinco partes debido a su extensión y para una mejor comprensión del tema, sin más, los dejo con el tutorial.

PARTE 1: HTML

Aquí simplemente haremos la estructura que tendrá nuestro reproductor, sin la necesidad de emplear imágenes o cosas por el estilo. Se hará uso de las nuevas etiquetas de semántica como lo son “section” y “article”.

Imagen de previsualización de YouTube

PARTE 2: CSS

Escribiremos el código de CSS que nos permitirá personalizar nuestro reproductor utilizando nuevas características de CSS3 como son rgba() y border-radius, compatibles con todos los navegadores actuales.

Imagen de previsualización de YouTube

PARTE 3: JS [1]

Crearemos la estructura básica del código JavaScript que utilizaremos y comenzaremos a reproducir un solo archivo de audio.

Imagen de previsualización de YouTube

PARTE 3: JS [2]

Trabajaremos con el tiempo de reproducción y duración de nuestro archivo actual, esto con la finalidad de hacer funcionales las barras de estado y el tiempo.

Imagen de previsualización de YouTube

PARTE 3: JS[3]

En la última parte agregaremos eventos a nuestros elementos de HTML5 para poder manipular el audio. (Detener, cambiar, pausar, reproducir, etc.)

Imagen de previsualización de YouTube

El ejemplo lo puedes ver en rfdz.mx/tutoriales/demos/theduxer

Si te gustó compártelo en tus redes sociales y recuerda que puedes dejar tus dudas, sugerencias y comentarios aquí mismo.

comments powered by Disqus