Manipular audio con HTML5 y Javascript

Ya vimos en un post anterior como implementar audio en HTML5 gracias a la etiqueta <audio> que nos permite reproducir música y determinar también un mensaje para los browsers que nos soportases esa característica.

En este tutorial vamos a ir un poco más allá y vamos a ver cómo manipular audio con HTML5 y Javascript, puro Javascript que servirá para manejar algunos de los atributos de la etiqueta audio, y así poder crear un pequeño reproductor de música sin tener que usar el que ya nos incluyen los navegadores, así que no se lo pierdan porque va a estar bueno.

Dificultad del tutorial: intermedia

Demo del tutorial

HTML

Para nuestro tutorial necesitamos dos capas, una que lleve el tiempo actual y el tiempo total del audio; necesitamos un botón o link para reproducir y un elemento audio para no tener que cargarlo dinámicamente, ya que por defecto no se puede cargar un mp3 desde javascript.

CSS

Para el CSS no hay tampoco gran hazaña, quizá lo que más resalta es la elaboración del botón que tiene un efecto 3D, que básicamente son sombras sobrepuestas para dar el efecto.

Javascript

Entonces, para el código necesitamos obtener la duración total que es obteniendo la propiedad .duration de nuestro audio, y convertimos eso a minutos y segundos. Después damos formato comprobando que si los minutos o segundos son menores que 10 se les agregue un ‘0’ para completar el formato “00:00”.

Lo que sigue es configurar nuestro botón haciendo que se reproduzca de acuerdo al texto que tiene. Si es pausa lo reproducimos con .play() y si está reproduciéndose le damos .pause(). Nota: no hay una función .stop() en la implementación, no existe y no entiendo porque no lo metieron los de la W3C.

Por último tenemos una función que se actualiza cada segundo para marcar el tiempo actual de la canción. Hacemos exactamente lo mismos que con el tiempo total, nada mas que esta función se repite y la anterior es estática.

Y si todo hemos hecho bien deberíamos tener un bonito reproductor de música de una canción. Se puede ampliar a que toque N canciones, pero para cuestiones de este tutorial vemos solo como implementar una sola.