Come incorporare un file audio in una pagina web con Google Drive

Come implementare un file audio MP3 in una pagina web caricandolo su Google Drive e usando un codice di un iframe o del tag audio HTML5.

Sono moltissimi i siti che hanno l'esigenza di implementare in una o più pagine del loro sito un file audio che il navigatore potrà riprodurre attraverso la classica icona del player audio che può essere mostrata utilizzando i tag HTML5.

In  questo post vedremo come implementare un file audio in una pagina web di un sito di qualsiasi piattaforma usando come hosting Google Drive a cui si può accedere con un nostro account Google (o Blogger). Vedremo come fare questa operazione con due metodi. Con il primo si utilizza il tag <audio> che inserisce un player audio in una pagina web e con il secondo useremo invece una funzione di anteprima di Google Drive come illustrato da Digital Inspiration.

Con il primo sistema si ha il controllo totale del file e tra l'altro si può anche nascondere l'icona di download per impedire ai lettori di scaricarlo. Con la funzione anteprima di Google Drive si crea invece un iframe che riporta appunto al player che viene mostrato su Google Drive quando si apre la pagina di un file audio.

In entrambi i casi occorre avere un file audio da caricare su Google Drive. Considerate che lo si può fare solo con file audio di nostra proprietà o che siano privi di licenza per non incorrere in problemi di copyright. Ricordo inoltre che su Google Drive si possono caricare gratuitamente fino a 15GB di file e che lo spazio viene contabilizzato insieme a quello usato con lo stesso account da Google Foto e da Gmail.

COME CARICARE IL FILE AUDIO SU GOOGLE DRIVE

Dopo l'accesso a Google Drive si apre la cartella in cui aggiungere il file quindi si va su Nuovo -> Caricamento di file in alto a sinistra, si sceglie il file e si aspetta di ricevere la notifica di avvenuto caricamento in basso a destra.

Il file verrà visualizzato nella cartella prescelta oppure in quella Recenti con gli ultimi caricamenti. Si clicca con il destro del mouse sopra al file in oggetto e si sceglie Condividi. Verrà aperta una nuova finestra in cui andare su Ottieni link condivisibile.  Verrà generato un indirizzo. Si va su Copia link per copiare l'URL negli Appunti.

Si clicca su Fine per chiudere la finestra. Il link copiato avrà una struttura simile a questa

https://drive.google.com/file/d/FILE-ID/view?usp=sharing

dove al posto di FILE-ID c'è una stringa alfanumerica che individua univocamente il file. Si modifica tale URL inserendo preview al posto di view?usp=sharing in questo modo

https://drive.google.com/file/d/FILE-ID/preview

dove ovviamente va inserito il FILE-ID. Non resta che creare un player per MP3.

COME CREARE UN PLAYER CON GOOGLE DRIVE

Si crea quindi un codice come il seguente

<div align="center">
<iframe frameborder="0" width="450" height="80" src="https://drive.google.com/file/d/FILE-ID/preview"> </iframe> </div>

Nel codice si possono personalizzare le dimensioni orizzontali e verticali dell'iframe. Nella pagina web o nel post in cui viene incollato questo codice in modalità HTML verrà visualizzato un player come questo

in cui cliccare sulla icona del Play per riprodurre l'audio. Andando nella icona a forma di quadrato posta sulla destra verrà aperta la pagina di Google Drive con l'audio MP3 che è stato caricato. La pagina potrà essere aperta anche da chi non è connesso a Google e chiunque potrà scaricare il file andando sulla icona della freccia verticale. 

COME CREARE UN PLAYER CON HTML5

Utilizzando lo stesso URL del file condiviso cioè

https://drive.google.com/file/d/FILE-ID/view?usp=sharing

si può creare un link di download con questa struttura

https://drive.google.com/uc?export=download&id=FILE-ID

in cui occorre solo aggiungere il FILE-ID.  Per creare il player audio HTML5 si usa questo codice

<div align="center">
<audio controls> <source src="https://drive.google.com/uc?export=download&id=FILE-ID" /> </audio>
</div>

che se incollato in una pagina web mostrerà un player con questo aspetto.

Se vogliamo impedire al lettore di scaricare il file bisognerà sostituire il tag audio controls con audio controls=" " controlsList="nodownload"  per nascondere l'icona di download come mostrato nello screenshot.