Etiqueta AUDIO (HTML 5).
Reproduciendo audio con HTML5
HTML5 provee un nuevo elemento para reproducir sonido en un documento HTML. se trata de la etiqueta <audio>.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Reproductor de Audio</title>
</head>
<body>
<section id="reproductor">
<audio src=”http://minkbooks.com/content/beach.mp3” controls>
</audio>
</section>
</body>
</html>
Atributos:
src
Este atributo especifica la URL del archivo a ser reproducido.
controls
Este atributo activa la interface que cada navegador provee por defecto para
controlar la reproducción del audio.
autoplay
Cuando este atributo está presente, el audio comenzará a reproducirse
automáticamente tan pronto como sea posible.
loop
Si este atributo es especificado, el navegador reproducirá el audio una y otra vez de
forma automática.
preload
Este atributo puede tomar tres valores diferentes: none, metadatao auto. El
primero indica que el audio no debería ser cacheado, normalmente con el propósito
de minimizar tráfico innecesario. El segundo valor, metadata, recomendará al
navegador obtener información sobre el medio (por ejemplo, la duración). El tercer
valor, auto, es el valor configurado por defecto y le aconseja al navegador descargar el
archivo tan pronto como sea posible.
Una vez más debemos hablar acerca de codificadores, y otra vez debemos decir que el
código en el Listado 5-11 debería ser más que suficiente para reproducir audio en nuestro
documento, pero no lo es. MP3 está bajo licencia comercial, por lo que no es soportado
por navegadores como Firefox u Opera. Vorbis (el codificador de audio del contenedor
OGG) es soportado por esos navegadores, pero no por Safari e Internet Explorer. Por esta
razón, nuevamente debemos aprovechar el elemento <source>para proveer al menos
dos formatos entre los cuales el navegador pueda elegir:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Reproductor de Audio</title>
</head>
<body>
<section id="reproductor">
<audio id="medio" controls>
<source src="http://minkbooks.com/content/beach.mp3">
<source src="http://minkbooks.com/content/beach.ogg">
</audio>
</section>
</body>
</html>
El código en el ejemplo detallado arriba reproducirá música en todos los navegadores utilizando los controles por defecto. Aquellos que no puedan reproducir MP3 reproducirán OGG y viceversa. Recuerde que MP3, al igual que MP4 para video, tienen uso restringido por
licencias comerciales, por lo que solo podemos usarlos en circunstancias especiales, de
acuerdo con lo determinado por cada licencia.
El soporte para los codificadores de audio libres y gratuitos (como Vorbis) se está
expandiendo, pero llevará tiempo transformar este formato desconocido en un estándar.
Programando un reproductor de audio
<!DOCTYPE html>
<html lang="es">
<head>
<title>Reproductor de Audio</title>
<link rel="stylesheet" href="reproductor.css">
<script src="reproductor.js"></script>
</head>
<body>
<section id="reproductor">
<audio id="medio">
<source src="http://minkbooks.com/content/beach.mp3">
<source src="http://minkbooks.com/content/beach.ogg">
</audio>
<nav>
<div id="botones">
<button type="button" id="reproducir">Reproducir</button>
</div>
<div id="barra">
<div id="progreso"></div>
</div>
<div style="clear: both"></div>
</nav>
</section>
</body>
</html>
Atributos: referencia rápida.
controls
Este atributo, si está presente, activa los controles por defecto. Cada navegador
provee sus propias funciones, como botones para reproducir y pausar el medio, así
como barra de progreso, entre otras.
autoplay
Este atributo, si está presente, le indicará al navegador que comience a
reproducir el medio lo más pronto posible.
loop
Este atributo hará que el navegador reproduzca el medio indefinidamente.
preload
Este atributo recomienda al navegador qué hacer con el medio. Puede recibir tres
valores diferentes: none, metadatay auto. El valor nonele dice al navegador que no
descargue el archivo hasta que el usuario lo ordene. El valor metadatale recomienda
al navegador descargar información básica sobre el medio. El valor autole dice al
navegador que comience a descargar el archivo tan pronto como sea posible.
Métodos
Los métodos más comunes para esta API son:
play() Este método comienza o continúa la reproducción del medio.
pause() Este método pausa la reproducción del medio.
load() Este método descarga el archivo del medio. Es útil en aplicaciones dinámicas.
canPlayType(formato) Este método indica si el formato del archivo que queremos utilizar es
soportado por el navegador o no. Retorna una cadena vacía si el navegador no puede
reproducir el medio y los textos “maybe” (quizás) o “probably” (probablemente) basado
en la confianza que tiene de que el medio pueda ser reproducido o no.
Propiedades
Las propiedades más comunes de esta API son:
paused
Esta propiedad retorna true(verdadero) si la reproducción del medio se encuentra pausada o no ha comenzado.
ended
Esta propiedad retorna true(verdadero) si la reproducción llegó al final del medio.
duration
Esta propiedad retorna la duración del medio en segundos.
currentTime
Esta es una propiedad que puede retornar o recibir un valor para informar la
posición en la cual el medio se encuentra reproduciendo o establecer una nueva
posición donde comenzar a reproducir.
error
Esta propiedad retorna el valor del error cuando un error ocurre.
buffered
Esta propiedad ofrece información sobre la cantidad del archivo que fue
descargado e introducido en el buffer. Retorna un array conteniendo datos sobre cada
porción del medio que ha sido descargada. Si el usuario salta a otra parte del medio
que no ha sido aún descargada, el navegador comenzará a descargar el medio desde
ese punto, generando una nueva porción en el buffer. Los elementos del array son
accesibles por medio de los atributos end()y start(). Por ejemplo, el código
buffered.end(0)retornará la duración en segundos de la primera porción del
medio encontrada en el buffer.
HTML5 provee un nuevo elemento para reproducir sonido en un documento HTML. se trata de la etiqueta <audio>.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Reproductor de Audio</title>
</head>
<body>
<section id="reproductor">
<audio src=”http://minkbooks.com/content/beach.mp3” controls>
</audio>
</section>
</body>
</html>
Atributos:
src
Este atributo especifica la URL del archivo a ser reproducido.
controls
Este atributo activa la interface que cada navegador provee por defecto para
controlar la reproducción del audio.
autoplay
Cuando este atributo está presente, el audio comenzará a reproducirse
automáticamente tan pronto como sea posible.
loop
Si este atributo es especificado, el navegador reproducirá el audio una y otra vez de
forma automática.
preload
Este atributo puede tomar tres valores diferentes: none, metadatao auto. El
primero indica que el audio no debería ser cacheado, normalmente con el propósito
de minimizar tráfico innecesario. El segundo valor, metadata, recomendará al
navegador obtener información sobre el medio (por ejemplo, la duración). El tercer
valor, auto, es el valor configurado por defecto y le aconseja al navegador descargar el
archivo tan pronto como sea posible.
Una vez más debemos hablar acerca de codificadores, y otra vez debemos decir que el
código en el Listado 5-11 debería ser más que suficiente para reproducir audio en nuestro
documento, pero no lo es. MP3 está bajo licencia comercial, por lo que no es soportado
por navegadores como Firefox u Opera. Vorbis (el codificador de audio del contenedor
OGG) es soportado por esos navegadores, pero no por Safari e Internet Explorer. Por esta
razón, nuevamente debemos aprovechar el elemento <source>para proveer al menos
dos formatos entre los cuales el navegador pueda elegir:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Reproductor de Audio</title>
</head>
<body>
<section id="reproductor">
<audio id="medio" controls>
<source src="http://minkbooks.com/content/beach.mp3">
<source src="http://minkbooks.com/content/beach.ogg">
</audio>
</section>
</body>
</html>
El código en el ejemplo detallado arriba reproducirá música en todos los navegadores utilizando los controles por defecto. Aquellos que no puedan reproducir MP3 reproducirán OGG y viceversa. Recuerde que MP3, al igual que MP4 para video, tienen uso restringido por
licencias comerciales, por lo que solo podemos usarlos en circunstancias especiales, de
acuerdo con lo determinado por cada licencia.
El soporte para los codificadores de audio libres y gratuitos (como Vorbis) se está
expandiendo, pero llevará tiempo transformar este formato desconocido en un estándar.
Programando un reproductor de audio
<!DOCTYPE html>
<html lang="es">
<head>
<title>Reproductor de Audio</title>
<link rel="stylesheet" href="reproductor.css">
<script src="reproductor.js"></script>
</head>
<body>
<section id="reproductor">
<audio id="medio">
<source src="http://minkbooks.com/content/beach.mp3">
<source src="http://minkbooks.com/content/beach.ogg">
</audio>
<nav>
<div id="botones">
<button type="button" id="reproducir">Reproducir</button>
</div>
<div id="barra">
<div id="progreso"></div>
</div>
<div style="clear: both"></div>
</nav>
</section>
</body>
</html>
Atributos: referencia rápida.
controls
Este atributo, si está presente, activa los controles por defecto. Cada navegador
provee sus propias funciones, como botones para reproducir y pausar el medio, así
como barra de progreso, entre otras.
autoplay
Este atributo, si está presente, le indicará al navegador que comience a
reproducir el medio lo más pronto posible.
loop
Este atributo hará que el navegador reproduzca el medio indefinidamente.
preload
Este atributo recomienda al navegador qué hacer con el medio. Puede recibir tres
valores diferentes: none, metadatay auto. El valor nonele dice al navegador que no
descargue el archivo hasta que el usuario lo ordene. El valor metadatale recomienda
al navegador descargar información básica sobre el medio. El valor autole dice al
navegador que comience a descargar el archivo tan pronto como sea posible.
Métodos
Los métodos más comunes para esta API son:
play() Este método comienza o continúa la reproducción del medio.
pause() Este método pausa la reproducción del medio.
load() Este método descarga el archivo del medio. Es útil en aplicaciones dinámicas.
canPlayType(formato) Este método indica si el formato del archivo que queremos utilizar es
soportado por el navegador o no. Retorna una cadena vacía si el navegador no puede
reproducir el medio y los textos “maybe” (quizás) o “probably” (probablemente) basado
en la confianza que tiene de que el medio pueda ser reproducido o no.
Propiedades
Las propiedades más comunes de esta API son:
paused
Esta propiedad retorna true(verdadero) si la reproducción del medio se encuentra pausada o no ha comenzado.
ended
Esta propiedad retorna true(verdadero) si la reproducción llegó al final del medio.
duration
Esta propiedad retorna la duración del medio en segundos.
currentTime
Esta es una propiedad que puede retornar o recibir un valor para informar la
posición en la cual el medio se encuentra reproduciendo o establecer una nueva
posición donde comenzar a reproducir.
error
Esta propiedad retorna el valor del error cuando un error ocurre.
buffered
Esta propiedad ofrece información sobre la cantidad del archivo que fue
descargado e introducido en el buffer. Retorna un array conteniendo datos sobre cada
porción del medio que ha sido descargada. Si el usuario salta a otra parte del medio
que no ha sido aún descargada, el navegador comenzará a descargar el medio desde
ese punto, generando una nueva porción en el buffer. Los elementos del array son
accesibles por medio de los atributos end()y start(). Por ejemplo, el código
buffered.end(0)retornará la duración en segundos de la primera porción del
medio encontrada en el buffer.
