Come inserire audio di sottofondo in autoplay.

Come riprodurre un file audio in autoplay in una pagina web anche in loop usando i tag HTML5 quali audio, controls, autoplay e loop.

La tecnologia HTML5 ha introdotto nuovi tag che permettono di fare cose che prima erano molto difficili da configurare. Mi ricordo di quando dovevamo utilizzare il player di Yahoo per riprodurre un file audio o un file video in una pagina web.

Adesso non è più necessario avere un player perché in HTML5 sono stati introdotti i tag <audio> e <video> che servono proprio a questo scopo. La sintassi con cui utilizzare questi tag viene definita dal W3C e l'ho riportata in post precedente.

I formati supportati dal tag <audio> sono OGG e MP3 mentre il tag <video> supporta il formato H.264 che è un sottotipo del MP4. Per convertire file audio e video in questi formati possono essere usati i programmi gratuiti iWisoft Free Video Converter e Format Factory.

COME INSERIRE AUDIO DI SOTTOFONDO IN AUTOPLAY

In un commento mi è stato chiesto come riprodurre audio in automatico tutte le volte che viene aperta una determinata pagina del blog. Il codice classico per un player audio è il seguente:

<audio controls> <source src="URL DIRETTO DEL FILE AUDIO" /></audio>

In questo modo si visualizzerà il player di riproduzione che avrà questo aspetto

Per non mostrare il player basterà togliere il tag controls dal codice precedente. In questo modo però il lettore non potrà cliccare sulla icona del Play per la riproduzione dell'audio. Si può però introdurre l'autoplay per far iniziare la riproduzione audio immediatamente. Il codice diventa così

<audio autoplay> <source src="URL DIRETTO FILE AUDIO"/></audio>

L'audio si riprodurrà in automatico fino al termine del file.

 

ULTERIORI PERSONALIZZAZIONI DEL PLAYER AUDIO

Alcuni browser supportano il formato MP3 (praticamente tutti) mentre altri supportano il formato OGG quindi per essere sicuri dovremmo convertire il file MP3 in OGG e caricare entrambi i file in un hosting esterno quale la cartella Public di Dropbox o Google Sites (solo per i blog gratuiti del tipo Blogspot). Il codice da usare per l'audio in autoplay più sicuro è quindi questo

<audio autoplay> 
   <source src="audio.ogg" /> 
   <source src="audio.mp3" /> 
</audio>

dove al posto di audio.ogg e audio.mp3 dovremo inserire i link diretti a questi due formati di file.

Si può inserire l'autoplay e i controlli insieme per riprodurre in automatico l'audio ma anche per mostrare il player in modo che il lettore possa disattivare la riproduzione. Il codice diventa:

<audio autoplay="autoplay" controls="controls"> 
   <source src="audio.ogg" /> 
   <source src="audio.mp3" /> 
</audio>

Il player sarà visibile e l'audio si riprodurrà in autoplay. Il lettore però potrà silenziarlo

COME CARICARE I FILE AUDIO NEL WEB

Purtroppo Google Drive cesserà il supporto hosting a partire dal 31 Agosto 2016. I blog gratuiti del tipo Blogspot possono utilizzare Google Sites per caricare i file e ottenerne il link diretto. Dopo l'accesso con il nostro account si clicca su Crea Sito e si sceglie Modello Vuoto. Si dà il nome al sito e clicca in alto a destra su Nuova Pagina. Dopo aver dato il nome alla pagina si seleziona Schedario tra i modelli di pagina da usare. L'opzione Schedario ci permetterà di archiviare file.

Si potranno caricare quasi tutti i formati di file, anche file audio e video. Si va su Aggiungi file e si selezionano i file da caricare. Per ottenerne l'URL diretto si clicca con il destro del mouse

su Scarica quindi si va su Copia indirizzo link. Si copieranno negli appunti indirizzi come questi

https://sites.google.com/site/musicafilemp3/file-musicali/audio-prova.ogg?attredirects=0&d=1
https://sites.google.com/site/musicafilemp3/file-musicali/audio-prova.mp3?attredirects=0&d=1

L'URL diretto è quello che termina con l'estensione del file quindi vanno eliminate le parti colorate di rosso. Tali URL vanno sostituiti a audio.ogg e audio.mp3 nel codice precedente.

COME ATTIVARE LA RIPRODUZIONE IN AUTOPLAY E IN LOOP

L'attivazione dell'autoplay significa che il file audio si riprodurrà fino al termine e qui cesserà la riproduzione. Se volessimo che la riproduzione audio continuasse all'infinito dovremo utilizzare il tag loop. Il codice con autoplay, controls e loop in questo caso diventerebbe

<audio loop="loop" autoplay="autoplay" controls="controls" >
<source src="https://sites.google.com/site/musicafilemp3/file-musicali/audio-prova.ogg" /> 
<source src="https://sites.google.com/site/musicafilemp3/file-musicali/audio-prova.mp3" /> 
</audio>

dove ho inserito anche i link diretti ai file audio creato come test. Per verificare come funziona questo codice o come funzionano quelli mostrati in precedenza incollate i codici nel sito HTML Real Time. Concludo osservando che la riga evidenziata di giallo con il file in formato OGG può anche essere eliminata visto che i maggiori browser supportano MP3. I tag evidenziati di verde possono essere inseriti tutti e tre oppure se ne possono scegliere solo due o anche solo uno (non nessuno). La prima riga del codice può essere semplificata con questa sintassi <audio autoplay loop controls >.