Pubblicato il 24/06/16 - aggiornato il  | 6 commenti :

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

controllo-audio-html5
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


autoplay-audio-html5


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

caricare-file-mp3-ogg

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 >.


6 commenti :

  1. ciao scusa ho provato a seguir ei tuoi step, ma non riesce comunque a riprodurmi l'mp3, forse è un problema di url, le ho provate tutte ma niente

    RispondiElimina
    Risposte
    1. Segui queste istruzioni che sono più recenti e più semplici
      https://www.ideepercomputeredinternet.com/2019/04/html5-audio-video-tag-player-dropbox.html
      @#

      Elimina
  2. Risposte
    1. Leggi il post più recente con un codice aggiornato a questo indirizzo
      https://www.ideepercomputeredinternet.com/2019/04/html5-audio-video-tag-player-dropbox.html
      che avevo già indicato nel commento precedente
      @#

      Elimina
  3. Salve buonasera. Volevo sapere se è possibile inserire una stringa nel codice per far in modo che il player (quindi la musica...) sia ascoltabile solo ed esclusivamente nella homepage del Blog, e non funzionante sulle altre pagine annesse. Grazie.

    RispondiElimina
    Risposte
    1. Certo. Si può fare in diversi modi. Puoi creare un widget e incollarci il codice della musica di sottofondo per poi inserire i tag condizionali per attivarlo solo in Home.
      Segui le istruzioni di questo post
      https://www.ideepercomputeredinternet.com/2016/08/blogger-conditional-tags.html
      nella sezione
      COME USARE I TAG CONDIZIONALI CON I WIDGET
      ricordandoti che adesso le due righe indicate sono più in basso rispetto alle istruzioni.
      La seconda opzione è quella di inserirla direttamente in un punto del modello usando sempre i tag condizionali per riprodurre il player solo nella Home.
      I tag condizionali per farlo sono presenti nella tabella nella prima riga
      Elemento solo in Home
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy