HTML5: Audio

Insertar archivos de audio en una web

La inserción de audio en una web va a depender de la tecnología que esté empleando ésta. Si estamos usando HTML4, tendremos que incorporar un reproductor flash para poder reproducir audio directamente.

El uso de flash no está especialmente recomendado por muchas razones, aunque las principales y de mayor peso son los riesgos de seguridad (ya que flash es una fuente contínua de fallos y vunlerabilidades) y la falta de compatibilidad (ya que hay navegadores y plataformas, sobre todo móviles, donde flash no está soportado).

Por suerte, el estándar HTML5 tiene la ventaja de permitir la reproducción directa de archivos multimedia de vídeo y audio. Con unas simples líneas podemos añadir audios a nuestras páginas, y éstos podrán reproducirse directamente desde el navegador.

Cómo instartar audio en nuestra web

Sólo tenemos que usar el siguiente código:



			<audio controls>
  					<source src="audio.ogg" type="audio/ogg">
 					<source src="audio.mp3" type="audio/mpeg">
					Contenido alternativo
			</audio>

Donde:

<audio> → Es la etiqueta HTML que indica que ahí va un contenido de tipo audio.
controls → Es uno de los parámetros que podemos indicarle a "audio" para que muestre, en este caso, los controles del reproductor (play, pausa, etc.)
<source> → Es la etiqueta HTML usamos para indicarle, gracias al parámetro "src" dónde está el archivo de sonido a incorporar.
Contenido alternativo → Es cualquier tipo de contenido HTML que queremos que se muestre en el caso de que el navegador no soporte la etiqueta "audio"..

Otros parámetros de la etiqueta audio:

controls → Se muestran los controles del reproductor.
preload="auto" → Precarga el archivo antes de que se le dé al play, de forma que no haya que esperar para reproducirlo. Por contra, se consume ancho de banda aunque no se reproduzca el audio, por eso podemos indicar preload="none" para evitar este comportamiento.
autoplay → El audio se reproduce automáticamente.
loop → El audio se reproduce en bucle indefinidamente; al terminar, comienza solo de nuevo.
muted → El volumen del audio se pone a 0 por defecto y es el usuario el que tiene tiene que activar el sonido del reproductor para escucharlo.

Nota: fijaos que hemos añadido dos archivos a la etiqueta audio: un OGG y un MP3. Esto es debido a que por distintos temas legales y, sobre todo, a una estúpida guerra comercial entre los diferentes navegadores, no todos los navegadores soportan todos los códecs de audio.

En concreto, aquí hay algunos de los códecs soportados:

Formato	Media Type
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav
Opus	audio/ogg; codecs="opus"
WEB Audio	weba.weba
FLAC	flac.flac
AAC	audio/mp4

Y, más concretamente, estos son los códecs que soportan los distintos navegadores:

Navegador	MP3	Wav	Ogg
Internet Explorer	SÍ	NO	NO
Chrome	SÍ	SÍ	SÍ
Firefox	SÍ	SÍ	SÍ
Safari	SÍ	SÍ	NO
Opera	SÍ	SÍ	SÍ

Como véis, el MP3 está soportado por todos los navegadores, pero al ser un códec patentado, si lo usamos, tendríamos que estudiar previamente las condiciones legales de su uso, para evitar incurrir en alguna vulneración de derechos de propiedad o abonar el pago de las licencias correspondientes.

Por otro lado, el OGG y, sobre todo el formato OPUS, ofrecem mayor calidad a mismo peso, o lo que es lo mismo, menos peso a igual calidad de sonido. Además, siendo un códecs libres, se pueden usar sin ningún problema. Por contra, los navegadores de Internet Explorer y Safari no lo soportan.

Es por eso que en el ejemplo del código anterior se idican 2 formatos al mismo tiempo: MP3 y OGG. De esta forma garantizamos que TODOS los usuarios podrán oír el audio, con independencia de qué navegador y sistema usen.

Volver al índice