Etiquetas para Audios

Audios: <audio>

   <!-- Ejemplo de uso si únicamente disponemos del recurso de audio en un formato compatible -->
   <audio src="https://archive.org/download/MLKDream/MLKDream_64kb.mp3" controls loop muted preload="none">Discurso de Martin Luther King</audio>

   <!-- Ejemplo de uso si disponemos del mismo recurso de audio en varios formatos compatibles -->
   <audio controls loop muted preload="none">
     Discurso de Martin Luther King
     <source src="https://archive.org/download/MLKDream/MLKDream.wav" type="audio/wav">
     <source src="https://archive.org/download/MLKDream/MLKDream_64kb.mp3" type="audio/mpeg">
   </audio>

Ejemplo de uso de etiqueta "<audio>"cdpn.io

Mediante este elemento podremos incrustar un fichero de audio en nuestra página web para que pueda ser reproducido a través del propio navegador. Cualquier texto situado entre las etiquetas <audio>...</audio> se mostrará por parte del navegador en caso de que no se pueda reproducir el elemento multimedia. Resulta por tanto recomendable añadirlo en aras a mejorar la experiencia de usuario sea cual sea su mecanismo de acceso a la web. El elemento <audio> dispone de varios atributos que permiten configurar la reproducción del mismo:

Atributo	Descripción	Ejemplo
src	URL del fichero de audio: Ruta Absoluta: Origen externo a la propia web Ruta Relativa: Origen interno	<audio src="https://archive.org/download/MLKDream/MLKDream.wav"></audio>
controls	Si se añade provee de un interfaz de control de reproducción del audio: play, pause, mute,...	<audio src="https://archive.org/download/MLKDream/MLKDream.wav" controls></audio>
loop	Si se añade, la reproducción se realizará en bucle sin final	<audio src="https://archive.org/download/MLKDream/MLKDream.wav" controls loop></audio>
muted	Si se añade, la reproducción se iniciará en silencio	<audio src="https://archive.org/download/MLKDream/MLKDream.wav" controls loop muted></audio>
preload	Indica al navegador si debe descargar el recurso de audio durante la carga de la página web: none: no descargar nada metadata: descargar los metadatos del recurso auto: se puede descargar el fichero de audio durante el proceso de carga de la página.	<audio src="https://archive.org/download/MLKDream/MLKDream.wav" controls loop muted preload="none"></audio>
autoplay	Si se añade, la reproducción se inicia automáticamente.	<audio src="https://archive.org/download/MLKDream/MLKDream.wav" controls loop muted preload="none" autoplay></audio>

Como se deduce del ejemplo expuesto al principio del apartado, existe también la posibilidad de incorporar nuestro recurso de audio proporcionando múltiples fuentes en diferentes formatos. La ventaja de dicha implementación es la de que si por cualquier motivo el navegador no puede reproducir el primer formato, lo intentará con el segundo y así sucesivamente. Adicionalmente el navegador podrá seleccionar entre la lista de fuentes de audio aquel recurso cuyo codec soporte (por ejemplo, algunos navegadores no soportan los ficheros wav por lo que directamente se optaría por reproducir el mp3). Para añadir múltiples fuentes de audio deberemos utilizar la etiqueta <source> contenida dentro del elemento <audio>...</audio>. Dicha etiqueta sirve al mismo propósito que el atributo src ya referido. El elemento <source> dispone de un par de atributos para indicar la fuente del recurso:

Atributo	Descripción	Ejemplo
src	URL del fichero de audio	<source src="https://archive.org/download/MLKDream/MLKDream.wav">
type	Especifica el tipo de recurso multimedia (MIME). Los principales tipos MIME son: audio/mpeg: Ficheros MP3 audio/ogg: Ficheros OGG audio/wav: Ficheros WAV	<source src="https://archive.org/download/MLKDream/MLKDream.wav" type="audio/wav">

Puedes consultar todos los tipos MIME de audio disponibles en: http://www.iana.org/assignments/media-types/media-types.xhtml#audio También puedes consultar los formatos compatibles para los diferentes navegadores en: https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility