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”.
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.
PARTE 3: JS [1]
Crearemos la estructura básica del código JavaScript que utilizaremos y comenzaremos a reproducir un solo archivo de audio.
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.
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.)
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.