Reconozco que desde hace mucho tiempo que no escribía nada, entre trabajo, proyectos y novia no queda mucho tiempo para escribir nada en este blog. Hoy escribo sobre un tema que hace tiempo quería seguir tratando, HTML5. Acabo de leer un libro sobre este tema llamado "HTML5 for web designers" de Jeremy Keith. En el cuál explican varios temas y entre estos uno bien interesante es el tag AUDIO.
Un "problema" que sucedía antes de HTML5 era que al momento de querer reproducir algún archivo de música en una web había que utilizar algún reproductor flash y por ende tener que instalar un plugin en el browser. Ahora luego de mucho tiempo HTML nos provee de un tag que permite reproducir un archivo de audio.
Pero vamos por un ejemplo inmediatamente:
-
<!DOCTYPE html>
-
<meta charset = "UTF-8">
-
</head>
-
<audio id = "player" src = "ejemplo.ogg" controls preload="true"></audio>
-
<button onClick = "document.getElementById('player').play();">Play</button>
-
<button onClick = "document.getElementById('player').pause();">Stop</button>
-
<button onClick = "document.getElementById('player').volume += 0.1;">Volume Up</button>
-
<button onClick = "document.getElementById('player').volume -= 0.1;">Volume Down</button>
-
</body>
-
</html>
Analizemos lo que nos dice este código, en el primer tag tenemos la declaración de AUDIO, en src colocamos la dirección donde se encuentra nuestro archivo, al escribir controls le decimos a la página que muestre un reproductor, el cuál tiene play, pause y volume. Por otro lado si queremos manejar nuestro archivo mediante javascript en los siguientes tag button está como se pueden utilizar.
Ahora ¿Qué archivos podemos reproducir?
Bueno para variar esto depende en muchos casos del browser que estemos utilizando. Pero una buena opción que nos da HTML5 es poder colocar más de una fuente (src) en nuestros archivos por ejemplo si no estamos seguros que el browser de nuestros usuarios reproduce podemos colocar también una versión en ogg de nuestro archivo, incluso podemos decirle el tipo de archivo que es, de la siguiente manera
-
<audio controls>
-
<source src = "ejemplo.ogg" type = "audio/ogg">
-
<source src = "ejemplo.mp3" type = "audio/mpeg">
-
</audio>
Incluso dentro de el tag audio podemos poner un objeto flash , el orden en que trata de reproducir el browser es de arriba hacia abajo.
Si quieres ver un ejemplo funcionando y tienes un browser que soporta HTML5 puedes verlo funcionando en este link
saludos tuto
