Inserimento audio: <audio>

3.1 Fondamenti del tag <audio>

Il tag <audio> in HTML5 è usato per inserire file audio in una pagina web. Questo elemento supporta vari formati audio e fornisce all'utente controlli integrati per la riproduzione, la pausa e la regolazione del volume.

Esempio semplice

Il tag <audio> viene utilizzato con l'attributo src, che specifica il percorso del file audio. Puoi anche aggiungere l'attributo controls per mostrare i controlli standard come i pulsanti di riproduzione, pausa e regolazione del volume.

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

Esempio con più sorgenti

Per garantire il supporto in diversi browser, puoi specificare più sorgenti audio usando il tag <source>. Questo permette al browser di scegliere il formato audio supportato.

    
      <audio controls>
        <source src="audiofile.mp3" type="audio/mpeg">
        <source src="audiofile.ogg" type="audio/ogg">
        Your browser does not support the audio element.
      </audio>
    
  

Attributi del tag <audio>

• src: specifica il percorso del file audio.
• controls: mostra i controlli di riproduzione
• autoplay: avvia automaticamente l'audio al caricamento della pagina
• loop: ripete la riproduzione dell'audio alla fine
• muted: silenzia l'audio al caricamento
• preload: indica come il browser deve caricare l'audio. Valori possibili: none, metadata, auto

3.2 Esempi di utilizzo degli attributi

Attributo controls

L'attributo controls aggiunge i controlli standard di riproduzione audio, come i pulsanti "Play", "Pause" e il regolatore del volume. Questo attributo rende l'elemento audio più interattivo e facile da usare per gli utenti.

Esempio:

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

Attributo autoplay

L'attributo autoplay fa sì che il file audio inizi a essere riprodotto automaticamente subito dopo il caricamento della pagina. Usare con cautela, poiché la riproduzione inaspettata di audio può risultare fastidiosa per gli utenti.

Esempio:

    
      <audio src="audiofile.mp3" autoplay></audio>
    
  

Attributo loop

L'attributo loop indica che il file audio deve essere riprodotto in ciclo continuo. Utile per musica di sottofondo o effetti sonori che devono ripetersi.

Esempio:

    
      <audio src="audiofile.mp3" autoplay loop></audio>
    
  

Attributo muted

L'attributo muted silenzia il file audio al caricamento. Utile se vuoi che l'audio venga riprodotto senza suono per impostazione predefinita, e che l'utente possa attivare il suono se necessario.

    
      <audio src="audiofile.mp3" muted></audio>
    
  

Attributo preload

L'attributo preload indica al browser come dovrebbe caricare il file audio durante il caricamento della pagina. Può accettare uno dei tre valori:

• none: il browser non dovrebbe caricare in anticipo l'audio
• metadata: il browser dovrebbe caricare solo i metadati (durata, dimensioni ecc.)
• auto: il browser dovrebbe caricare completamente l'audio quando la pagina viene caricata

    
      <audio src="audiofile.mp3" preload="auto"></audio>
    
  

3.3 Formati audio supportati

Per garantire la compatibilità cross-browser, è consigliabile utilizzare più formati audio. I formati più comuni includono MP3, OGG e WAV. Vediamoli più nel dettaglio.

Formato MP3

MP3 (MPEG-1 Audio Layer III) è uno dei formati audio più popolari. Supportato dalla maggior parte dei browser e dispositivi, MP3 utilizza la compressione con perdita, permettendo di ridurre la dimensione del file mantenendo una qualità audio abbastanza alta.

Esempio:

    
      <audio src="audiofile.mp3" type="audio/mpeg"></audio>
    
  

Formato OGG

OGG (Ogg Vorbis) è un formato di compressione audio aperto con perdita, supportato dalla maggior parte dei browser moderni. Offre buona qualità audio ed è spesso usato come alternativa a MP3.

Esempio:

    
      <audio src="audiofile.ogg" type="audio/ogg"></audio>
    
  

Formato WAV

WAV (Waveform Audio File Format) è un formato audio senza compressione, che offre alta qualità del suono. Tuttavia, i file WAV sono più grandi rispetto a MP3 e OGG, perciò sono meno comuni per l'uso sul web.

Esempio:

    
      <audio src="audiofile.wav" type="audio/wav"></audio>
    
  

3.4 Compatibilità dei formati

Non tutti i browser supportano gli stessi formati audio. Per garantire la compatibilità cross-browser, è consigliabile usare più formati audio, come MP3, OGG e WAV.

Esempio con supporto per più formati:

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

Accessibilità

Per garantire l'accessibilità, è consigliabile fornire un'alternativa testuale nel caso in cui il browser non supporti l'elemento <audio> o i file audio. Questo può essere fatto con una descrizione testuale tra i tag di apertura e chiusura <audio>.

Esempio di accessibilità:

    
      <audio controls>
        <source src="audiofile.mp3" type="audio/mpeg">
        <source src="audiofile.ogg" type="audio/ogg">
        <source src="audiofile.wav" type="audio/wav">
        Your browser does not support the audio element.
        You can download the audio file <a href="audiofile.mp3">here</a>.
      </audio>
    
  

Capire le capacità del tag <audio> e del suo API aiuta a creare pagine web più interattive e accessibili.