Come aggiungere un sottofondo audio casuale in un blog.

Come riprodurre a player invisibile un sottofondo musicale o audio casuale in una pagina web o in blog di Blogger o Wordpress.

Quello che vado a mostrare è il procedimento per riprodurre in automatico un file audio tutte le volte che un utente entra nel nostro sito. La procedura è illustrata per utenti Blogger ma è funzionante anche per Wordpress e per qualsiasi altra piattaforma che supporti i javascript.

Si usano i tag HTML5 per la riproduzione audio con la larghezza e l'altezza del player configurati a zero pixel in modo da renderli invisibili. Il problema maggiore di tutte le personalizzazioni che riguardano i file audio è quello dell'hosting. Se si possiede un dominio personalizzato di Blogger o un sito self-hosted di Wordpress non si può usare Google Sites per caricare i file audio MP3 che invece è utilizzabile per i blog gratuiti del tipo nomeblog.blogspot.com.

COME CARICARE I FILE AUDIO SU GOOGLE SITES

Dopo aver effettuato l'accesso a Google Sites con le nostre credenziali Google si va su Crea per creare un sito statico. Nel caso lo aveste già fatto occorre cliccare sopra al nome per aprirlo per poi andare in alto a destra sulla icona di Crea Pagina. Nella finestra che si apre si sceglie Schedario come tipo di pagina, si dà un nome alla stessa quindi si va su Crea in alto a sinistra

La pagina del tipo Schedario serve appunto per caricare file di quasi tutti i formati. Si clicca su Aggiungi file quindi si selezionano i file da caricare, anche più di uno contemporaneamente

Dopo aver caricato i file audio in formato MP3 si clicca con il destro del mouse sotto ciascuno di essi su Scarica quindi si va su Copia indirizzo link

L'URL ottenuto dovrà essere depurato della parte finale eccedente all'estensione del file. Da

https://sites.google.com/site/musicafilemp3/musica-casuale/Brano1.mp3?attredirects=0&d=1

si ottiene il link diretto

https://sites.google.com/site/musicafilemp3/musica-casuale/Brano1.mp3

Si dovrà fare lo stesso per tutti i file audio che si vogliono caricare. Visto che il file audio continuerà a riprodursi fino ad esaurimento è opportuno caricare file che durano solo pochi secondi. Non c'è un solo tipo di utilizzo. Si può decidere di caricare clip di brani musicali oppure anche registrazioni audio che illustrano ai navigatori in modo casuale le caratteristiche del sito che stanno consultando.

COME OTTENERE L'HOTLINK DEI FILE AUDIO NEI SITI NON BLOGGER

Se si possiede in blog su Wordpress o un sito di Blogger con dominio personalizzato cioè del tipo www.esempio.com i file caricati su Google Sites non verranno riprodotti. Non è molto semplice risolvere. Se si ha l'accesso al File Manager del nostro dominio si può fare l'upload di questi file in una cartella del dominio e ottenerne l'hotlink. Ci sono anche dei servizi online che permettono di caricare MP3 quali Ge.tt, mBox Mp3 Uploader o Ozibox. Non ho però testato nessuno dei tre.

Se avete un account Dropbox precedente all'Ottobre 2012 potete caricare i file nella cartella Public e ottenerne facilmente il link diretto.

COME INSTALLARE LA RIPRODUZIONE CASUALE DEI FILE AUDIO

Dopo aver salvato il template si va su Modello -> Modifica HTML e si cerca la riga </body> che si trova alla fine dello stesso. Subito sopra a questa si incolla questo codice

<style>
audio{ width: 0px; height: 0px; }
</style>
<script type='text/javascript'>
//<![CDATA[
// Musica casuale
var music_clip = [
"https://sites.google.com/site/musicafilemp3/musica-casuale/Brano1.mp3",
"https://sites.google.com/site/musicafilemp3/musica-casuale/Brano2.mp3",
"https://sites.google.com/site/musicafilemp3/musica-casuale/Brano3.mp3",
"https://sites.google.com/site/musicafilemp3/musica-casuale/Brano4.mp3",
"https://sites.google.com/site/musicafilemp3/musica-casuale/Brano5.mp3",
"https://sites.google.com/site/musicafilemp3/musica-casuale/Brano6.mp3"];
var rotazione = Math.random()*music_clip.length;
var numero = Math.floor(rotazione);
document.write('<audio controls="true" autoplay="autoplay">');
document.write('<source src='+music_clip[numero]+' type="audio/mpeg">');
document.write('</audio>');
//]]>
</script>

quindi si salva il modello. Al posto degli URL diretti dei file MP3 colorati di rosso che ho utilizzato come test vanno aggiunti gli URL diretti dei vostri audio caricati su Google Sites o altrove. Si possono inserire anche più di sei riproduzioni casuali di audio mantenendo la stessa sintassi cioè separandoli con una virgola e all'interno delle virgolette.

Demo
Clicca qui

La riproduzione casuale di audio potrebbe essere anche un modo per suscitare l'interesse del lettore in modo da trattenerlo sul sito per un periodo di tempo più lungo. Nella Demo linkata i pezzi sono stati scaricati da un sito che offre musica senza copyright e hanno una durata di 20 secondi. Per una seconda riproduzione casuale basterà ricaricare la pagina dalla icona del browser o pigiare F3.

Aggiornamento: Si possono caricare i file anche su Dropbox per poi ottenerne il link diretto.

Aggiornato: | Nessun commento :