Unidad 10. Multimedia (II)

10.2. Sonido

No es muy habitual incluir sonido en una página web, ya que algunos usuarios suelen estar escuchando su propia música cuando navegan en Internet, por lo que el escuchar también sonido en cada página que se visita puede resultar algo molesto.

A pesar de ello, el incluir un sonido agradable, apropiado al contenido de la página, puede hacerla más atractiva. Las páginas que contienen sonido suelen ofrecer la posibilidad de activarlo o desactivarlo, para que aquellos usuarios que no deseen escuchar el sonido de la página puedan desactivarlo. Siempre es mejor que que el usuario abandone la página.

Los formatos de sonido más habituales en Internet son, fundamentalmente, el MP3 y el WAV, aunque existen otros formatos diferentes que también pueden utilizarse (MIDI). Lo ideal es incluir algún archivo de audio que no ocupe mucho espacio, y que no por ello sea de mala calidad.

Se puede insertar un archivo de audio en un documento de dos formas, con la nueva etiqueta <audio > o mediante un plug-in.

1. Nueva etiqueta <audio>

Hasta hace poco la única forma de insertar audio en una página web era mediante plug-in pero desde que apareció HTML5 los navegadores compatibles son capaces de interpretar la etiqueta <audio> que reproduce sonido de una forma estándar sin necesidad de plug-in.

La etiqueta <audio> sólo funcionará en los navegadores compatibles con HTML 5, IE a partir de la versión 9 y las versiones de  Firefox 3.5, Chrome 3.0 y Safari 3.0, además de algunos otros.

Si tienes acceso Creative Cloud podrás insertar el tag <audio> desde Insertar, Común, Media, opción HTML 5 Audio, en otro caso debes hacerlo en la vista de código. En la unidad 12 explicaremos con más detalle cómo escribir código HTML desde la vista código.

La forma de la etiqueta es la siguiente:

<audio>      <source src="archivo sonido" type="MIME-type"/>      </audio>

No todos los navegadores reconocen los formatos de archivos de sonido más utilizados, en la siguiente tabla podemos ver la compatibilidad entre formatos y navegadores, así como sus correspondientes mime-types (en marzo 2013):

Navegador	MP3	WAV	OGG
Internet Explorer 9+	si	no	no
Chrome 6+	si	si	si
Firefox 3.6+	no	si	si
Safari 5+	si	si	no
Tipo MIME	audio/mpeg	audio/wav	audio/ogg

Por ejemplo, el siguiente código se reproducirá en todos los navegadores citados menos Firefox:

<audio controls>
  <source src="media/audio.mp3" type="audio/mpeg"/>
  Este navegador no puede reproducir este archivo de sonido. Actualice el navegador
</audio>
        

Si tu navegador no es Firefox deberías ver el reproductor de sonido a continuación.

Se suele añadir el atributo controls para que se muestren los controles del reproductor que permiten parar/reanudar y modificar el volumen.

También es bueno añadir un texto para que avise al usuario que su navegador no reconoce la etiqueta.

Podemos repetir la instrucción source varias veces para incluir varios tipos de archivos de sonido, de esta forma el sonido se reproducirá en más navegadores.

Por ejemplo

 <audio controls>
   <source src="media/audio.mp3" type="audio/mpeg"/>
   <source src="media/audio.ogg" type="audio/ogg"/>
   Este navegador no puede reproducir este archivo de sonido. Actualice el navegador.
</audio>

De esta forma el navegador Firefox intentará reproducir el primer archivo y como no es capaz de ello, lo intentará con el segundo archivo. Ahora desde Firefox si se reproducirá el sonido.