Pubblicato il 02/01/18 - aggiornato il  | 10 commenti :

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.

condividere file

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

player google drive

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.

player html5

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. 


10 commenti :

  1. Grazie infinite sono riuscito a mettere finalmente il player audio su Google Sites senza il collegamento a Drive, neanche sui siti americani avevo trovato questa soluzione. Grazie ancora

    RispondiElimina
  2. E' possibile incorporare il player audio (collegato a un mp3 caricato su drive) su Fogli Google?

    RispondiElimina
    Risposte
    1. Sì, si può fare anche se non è semplicissimo. Seguimi i prossimi giorni. Salvo il tuo commento per farci un post
      @#

      Elimina
  3. Grazie per i tuoi consigli, non sarei mai riuscito se non avessi trovato il tuo sito. Mi chiedevo, nel mio caso ho più di un files nella pagina, ed ho notato che se non metto pausa ad uno, suonano contemporaneamente. Cè una soluzione a questo problema? Esiste una funzione che premendo un altro audio stacca l'altro? Grazie anticipatamente.

    RispondiElimina
    Risposte
    1. Si potrebbe tentare con un javascript ma non è scontato che ci si riesca, poi ci vorrebbe uno più esperto di me di quel linguaggio di programmazione 😊
      @#

      Elimina
  4. Ciao, grazie! Si puù ottenere un link HTM,L5 anche a partire da file audio conservati in Mega?

    RispondiElimina
    Risposte
    1. È possibile solo se il link è diretto. Non credo che Mega permetta di ottenere dei link diretti dei propri contenuti però non ne sono sicuro perché non l'ho mai usato
      @#

      Elimina
  5. Ciao Ernesto. Ho provato ambedue i player e funzionano tutti e due sulla versione desktop, mentre quello creato con HTML5 sul mobile non funziona, perché lo legge come semplice immagine e non c'è modo di clikkare sulla freccia. Fa nulla posso tranquillamente utilizzare l'altro, anche se meno bello esteticamente. Mi chiedevo: c'è modo di personalizzare colore e forma di quello creato con Google Drive e renderlo più simile all'altro? Grazie mille!

    RispondiElimina
    Risposte
    1. Non conosco così a fondo HTML5 però ho provato in passato a personalizzare il player e non ci sono riuscito. Può darsi però che adesso sia possibile. Ho provato a fare una breve ricerca su internet ma non ho trovato nulla di utile. Prova anche tu 🤔.
      @#

      Elimina
    2. Ho provato a curiosare, ma al momento non ho trovato niente. Farò qualche esperimento. Grazie

      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