Los audios son un recurso multimedia muy expandido en la actualidad. Se han popularizado sobretodo a través de sitios web y plataformas en las que se puede obtener y publicar música, pero también a través de los podcasts informativos. HTML provee un elemento para incrustar audios: el elemento <audio>.
Los autores tienen dos métodos para especificar a los navegadores web la ruta del audio que se debe cargar. El primer método es el más directo: mediante el atributo src, en el que indicaremos una URL válida. El segundo es mediante el elemento <source>, cuya particularidad es la de permitir proveer alternativas del recurso de audio; así, será el propio navegador el que decidirá qué recurso cargar.
El elemento <audio> consta de dos etiquetas para indicar el inicio (<audio>) y el final (</audio>) de su contenido. Dentro de estas dos etiquetas se define el contenido que se usará cuando no se haya definido una URL válida de un recurso de audio o cuando el navegador web no tenga soporte para el elemento <audio>. Si lo soporta, se ignorará el contenido alternativo.
Ejemplo de código HTML con un audio insertado:
<audio controls
src="/resources/html/piano.mp3">
Tu navegador no soporta audios incrustados.
</audio>
Resultado del código anterior:
Atributos de audio
El elemento <audio> puede hacer uso de todos los atributos globales; además, tiene algunos atributos específicos que permiten configurar sus variadas opciones. Los atributo más relevante es src, ya que gracias a él podremos indicar la ruta de un archivo del audio. Vamos a verlos todos.
El atributo ‘src’
Como ya se ha dicho, el atributo src permite indicar la ruta en la que se encuentra el archivo de audio. El valor de src deberá ser una URL válida, sin importar si se trata de una URL absoluta o una URL relativa.
Es importante señalar que sólo se permite enlazar un recurso. Para usar múltiples recursos es conveniente usar el elemento <source>.
El atributo ‘crossorigin’
Gracias al atributo crossorigin es posible indicar si la petición que se ha realizado a un servidor externo debe presentar credenciales de origen cruzado (CORS). Este atributo tiene dos valores posibles:
anonymous: se establece la etiqueta “omit credentials”.use-credentials: no se establece la etiqueta “omit credentials”.
El atributo ‘preload’
Si lo que se quiere es especificar el momento de carga del recurso multimedia, el atributo preload permite proporcionar una sugerencia de este tipo al navegador web. Este atributo puede tener tres valores:
none: no se requiere la precarga de ninguna información.metadata: sólo se precargan los metadatos y los primeros segundos.auto: el recurso de audio se precarga a discreción del navegador web.
El atributo ‘autoplay’
Es posible activar la reproducción de audio de forma automática con ayuda del atributo autoplay. Tan pronto como al navegador le sea posible comenzará la reproducción. Este atributo es binario, así que su inclusión lo activa.
El atributo ‘loop’
El atributo loop permite que cuando la reproducción de un audio termine vuelva a empezar, indefinidamente. Este atributo también es binario, por lo que su inclusión repetirá el audio en un bucle infinito.
El atributo ‘muted’
El atributo muted puede ser de utilidad cuando queramos que, por defecto, un archivo de audio esté silenciado. Si los controles están presentes será posible quitar el silencio, es decir, subir el volumen para escuchar el audio. Este atributo también es binario, por lo que su inclusión silenciará el audio.
El atributo ‘controls’
Mediante el atributo binario controls podremos mostrar una interfaz gráfica que permite interactuar con la reproducción del audio. Así será posible pausar la reproducción, subir o bajar el volumen y descargar el archivo de audio.
Recursos alternativos: elemento <source>
Los elementos de audio pueden contener recursos alternativos, y estos se insertan con la ayuda del elemento <source>. El elemento <source> debe figurar como elemento hijo del elemento <audio>, y se pueden añadir tantos recursos como sea necesario. Cada recurso proveerá una versión diferente del archivo de audio, que estará lógicamente codificada usando un códec distinto. Finalmente, será el navegador el que decida qué recurso cargar.
Este elemento no debe usarse si previamente ya se ha especificado una URL válida como valor del atributo src del elemento <audio>.
El elemento <source> es un elemento vacío, es decir, sin etiqueta de cierre. Es gracias a los atributos que se define su configuración. Por ejemplo, con el atributo src se especifica una URL válida de la ruta del archivo de audio, y con el atributo type se define un tipo de audio válido.
Estos son los tipos de medio más habituales para los archivos de audio:
- Para MP3:
audio/mpeg - Para OGG:
audio/ogg - Para WAV:
audio/wav
Aprende a configurar recursos con el elemento <source>.
Añadir pista de texto: elemento <track>
Con la ayuda del elemento <track> podremos proveer pistas de texto para el audio en cuestión. Este elemento es de gran utilidad para aportar títulos, subtítulos, descripciones y metadatos que serán de ayuda para el usuario. Los archivos de las pistas de texto deben estar en formato VTT.
Aprende a insertar pistas de texto con el elemento <track>.
