1. So a les pàgines web

1.2. Avanços i possibilitats amb HTML

Amb la utilització creixent d’HTML5, el contingut multimèdia, incloent-hi l’àudio, s’ha tornat més accessible i comú en tots els navegadors moderns. A diferència de les pràctiques anteriors, que sovint requerien l’ús de plugins o tecnologies propietàries, HTML5 introdueix l’etiqueta <audio> com un estàndard nadiu per a la reproducció d’àudio en línia. Això permet incrustar fàcilment elements d’àudio a les pàgines web sense dependre de solucions externes.

L’element <audio> s’utilitza per incrustar so en pàgines web. Pot contenir una o més fonts d’àudio i el navegador escollirà la primera que disposi en suport. El text que s’escrigui entre <audio> i </audio> només apareixerà als navegadors que no suportin aquest element. L’atribut controls mostrarà els controls predeterminats del navegador per controlar la reproducció, el volum, la posició de reproducció, així com posar-la en pausa i reprendre-la.

L’etiqueta <source> ens permet especificar els fitxers d’àudio en aquest cas i els seus formats, que poden 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>

Depenent del navegador es mostrarà alguna cosa com la següent:

Figura 1.1. Reproductor al navegador
Font: elaboració pròpia.

Si només es disposa d’una font d’àudio i no es vol mostrar el missatge per a navegadors no suportats es pot simplificar, tal com s’indica posteriorment, amb l’atribut src:

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

Altres atributs disponibles són:

  • autoplay. Si es fa servir, el navegador començarà a reproduir automàticament l’àudio tan aviat com li sigui possible sense necessitat de descarregar-lo totalment. Habitualment, la reproducció automàtica és una experiència desagradable per a molts usuaris de manera que s’ha d’evitar sempre que sigui possible.
  • controlslist. S’utilitza per aplicar algunes restriccions als controls per defecte del navegador. Els valors permesos són nodownload, nofullscreen i noremoteplayback.

Un exemple seria:

<audio src="sound.mp3" controls  Controlslist="nodownload">
</audio>
  • crossorigin. Indica si s’ha d’utilitzar CORS per recuperar l’arxiu d’àudio relacionat. Els valors permesos són anonymous i use-credentials.
  • disableremoteplayback. Deshabilita la capacitat de reproducció remota en dispositius connectats mitjançant cable com ara HDMI, DVI, etc., o sense fil com Miracast, Chromecast DLNA, AirPlay, etc.
  • loop. Reiniciarà la reproducció des del principi quan arribi al final de l’àudio.
  • muted. Indica si l’àudio se silenciarà inicialment.
  • preload. Indica al navegador què és el que ha de precarregar. Els valors poden ser:
    • none: per no precarregar l’àudio.
    • metadata: per precarregar només les metadades de l’àudio.
    • auto: amb aquesta opció es descarregarà l’arxiu d’àudio complet. S’assumeix aquesta opció si no s’especifica cap valor.