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:
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:
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.