Cuando terminamos de ver la potente gestión de formularios que tenemos en HTML5, podríamos pensar que ya conocemos todo lo que hay de nuevo, pero no es así; todavía nos queda por conocer algunas etiquetas mas orientadas a simplificar la gestión del contenido multimedia.

Audio

La etiqueta «< audio >» permite controlar la reproducción de audio sin necesitar una librería javascript.

Dentro de la etiqueta, podemos especificar:

  • fuentes de sonido alternativas2014-09-16_20h38_35
  • Texto alternativo2014-09-16_20h39_16
  • Enlace alternativo2014-09-16_20h40_29

Para su utilización, dispone de los siguientes atributos:

src

Indicamos la dirección del fichero fuente

controls

Booleano, y si lo indicamos, nos muestra la barra de control del audio. El aspecto dependerá del navegador que estemos utilizando.

autoplay

Booleano, si lo indicamos, la reproducción arrancará automáticamente

loop

Booleano, si lo indicamos, la reproducción se reiniciará al finalizar

preload

Por defecto, asume auto; los valores posibles son

  • "none" no almacena temporalmente el archivo
  • "auto" almacena temporalmente el archivo multimedia
  • "metadata" almacena temporalmente sólo los metadatos del archivo

type

Si el atributo type no está especificado, el tipo de contenido multimedia se obtiene del servidor y se comprueba para ver si el navegador lo puede manejar; si no puede ser mostrado, se comprueba el siguiente source , si ninguno de los elementos source especificados pueden ser usados, un evento de error es enviado al elemento audio. Si el atributo type está especificado, se compara con los tipos que el navegador puede reproducir, y si no es reconocido, no se hace la consulta al servidor; en su lugar,  se comprueba el siguiente source

Debemos tener en cuenta que cuando disponemos de varios archivos de audio de distinto tipo, lo podemos hacer constar por medio de la etiqueta source

source

Se trata de una etiqueta que aparece dentro de la etiqueta audio, y nos permite especificar fuentes alternativas para el sonido:

2014-09-16_20h33_15

Desde Javascript

Aunque la etiqueta nos ofrece las principales funcionalidades, podemos acceder desde javascript, si así lo deseamos, de una forma muy sencilla: Si solo queremos funciones basica, podríamos utilizar esto:

Si queremos un poco mas de complejidad,

y por ultimo, aquí podemos ver como se ve el controlador que nos proporcionaHTML5 sin mas problema, y sin una sola linea de javascript.

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.