1. Sonido en las páginas web

1.2. Avances y posibilidades con HTML

Con la utilización creciente de HTML5, el contenido multimedia, incluido el audio, se ha vuelto más accesible y común en todos los navegadores modernos. A diferencia de las prácticas anteriores, que a menudo requerían el uso de plugins o tecnologías propietarias, HTML5 introduce la etiqueta <audio> como un estándar nativo para la reproducción de audio en línea. Esto permite incrustar fácilmente elementos de audio en las páginas web sin depender de soluciones externas.

El elemento <audio> se utiliza para incrustar sonido en páginas web. Puede contener una o más fuentes de audio y el navegador escogerá la primera que esté soportada. El texto que se escriba entre <audio> y </audio> solo aparecerá en los navegadores que no soporten este elemento. El atributo controls mostrará los controles predeterminados del navegador para controlar la reproducción, el volumen, la posición de reproducción así como pausarla y reanudarla.

La etiqueta <source> nos permite especificar los ficheros de audio en este caso y sus formatos que pueden ser OGG, MP3 o WAV.

<audio controls>
  <source src="sound.ogg" type="audio/ogg">
  <source src="sound.mp3" type="audio/mpeg">
  <source src="sound.wav" type="audio/wav">
  Your browser does not support the audio tag.:
</audio>

Dependiendo del navegador se mostrará algo como:

Figura 1.1. Reproductor en el navegador.
Fuente: elaboración propia.

Si solo se dispone de una fuente de audio y no se quiere mostrar el mensaje para navegadores no soportados se puede simplificar como sigue con el atributo src:

<audio src="sound.mp3" controls></audio>

Otros atributos disponibles son:

  • autoplay. Si se utiliza, el navegador comenzará a reproducir automáticamente el audio tan pronto como le sea posible sin necesidad de descargarlo totalmente. Habitualmente la reproducción automática es una experiencia desagradable para muchos usuarios por lo que debe evitarse siempre que sea posible.
  • controlslist Se utiliza para aplicar algunas restricciones a los controles por defecto del navegador. Los valores permitidos son nodownload, nofullscreen y noremoteplayback.

Un ejemplo sería:

<audio src="sound.mp3" controls  Controlslist="nodownload">
</audio>
  • crossorigin. Indica si se debe utilizar CORS para recuperar el archivo de audio relacionado. Los valores permitidos son anonymous y use-credentials.
  • disableremoteplayback. Deshabilita la capacidad de reproducción remota en dispositivos conectados mediante cable como HDMI, DVI, etc., o inalámbricas como Miracast, Chromecast DLNA, AirPlay, etc.
  • loop. Reiniciará la reproducción desde el principio al llegar al final del audio.
  • muted. Indica si el audio se silenciará inicialmente.
  • preload, indica al navegador qué es lo que debe precargar. Los valores pueden ser:
    • none: para no precargar el audio.
    • metadata: para precargar solo los metadatos del audio.
    • auto: con esta opción se descargará el archivo de audio completo. Se asume esta opción sino se especifica ningún valor.