Jingle di Natale che si riproducono automaticamente nel blog.

Come riprodurre in autoplay delle canzoni natalizie casuali nel nostro sito Blogger o Wordpress in occasione delle festività

Mancano meno di quaranta giorni a Natale e come tutti gli anni in questo sito inizio a pubblicare dei widget da usare in occasioni di tali feste. Una personalizzazione sempre molto richiesta è quella delle canzoni natalizie che si riproducono in automatico.

I player audio utilizzati in passato per la riproduzione dei file erano basati su servizi di Google che sono stati ritirati come Google Reader, che aveva un player per i feed, e Google Code. Per fortuna adesso tutti i principali browser compreso Internet Explorer supportano i tag HTML5 <audio> e <video> che implementano un player nel browser senza bisogno di appoggiarsi ad altri servizi.

Si tratta in sostanza di caricare su uno spazio alcuni brani in formato MP3 di canzoni o meglio di estratti di jingle natalizi visto che, per non appesantire troppo il sito e irritare gli utenti, è opportuno che i brani non superino i 10-15 secondi. I siti gratuiti del tipo nomeblog.blogspot.com possono caricare i brani su Google Sites ma in realtà non importa neppure farlo perché l'ho già fatto io. Chi ha un dominio personalizzato deve invece caricare i file su Google Drive, che comunque smetterà di funzionare come hosting il 31 Agosto 2015, oppure Dropbox. Ho caricato su Dropbox un file ZIP di tutte le canzoni MP3 utilizzate in questo widget. Il file può essere scompattato con 7Zip

Download
Clicca qui

Se avete un dominio personalizzato dovrete caricare questi file MP3 su Google Drive, su DropBox, su altro hosting che utilizzate per gli upload o addirittura nello spazio del vostro sito se siete in grado di accedere al File Manager del vostro provider. Per riprodurre i jingle in automatico si utilizza un semplice javascript che ne sceglierà uno in modo casuale. Quando si rinfrescherà la pagina o se ne aprirà un'altra verrà riprodotto sempre in autoplay un altro jingle casuale. La prima parte del javascript serve per nascondere il player audio con i tag width:0px; height:0px;.

Per installare questa personalizzazione in tutto il blog si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e, in Sezioni del Sito, si incolla il seguente codice

<script type="text/javascript">
//<![CDATA[
   var styleNode = document.createElement('style');
   styleNode.type = "text/css";
   if(!!(window.attachEvent && !window.opera)) {
     styleNode.styleSheet.cssText = 'audio {width:0px; height:0px;}';
   } else {
     var styleText = document.createTextNode('audio {width:0px; height:0px;}');
     styleNode.appendChild(styleText);
   }
   document.getElementsByTagName('head')[0].appendChild(styleNode);
// Jingle di Natale
var jinglenatale = [
"https://sites.google.com/site/musicafilemp3/natale/1Deckthe.mp3",
"https://sites.google.com/site/musicafilemp3/natale/1HejWDzien.mp3",
"https://sites.google.com/site/musicafilemp3/natale/1XmasTre.mp3",
"https://sites.google.com/site/musicafilemp3/natale/2SilentN.mp3",
"https://sites.google.com/site/musicafilemp3/natale/3Ave.mp3",
"https://sites.google.com/site/musicafilemp3/natale/3FirstNoel.mp3",
"https://sites.google.com/site/musicafilemp3/natale/3Hark.mp3",
"https://sites.google.com/site/musicafilemp3/natale/4Greensl.mp3",
"https://sites.google.com/site/musicafilemp3/natale/DeckTheHallsInD.mp3",
"https://sites.google.com/site/musicafilemp3/natale/Jingle.mp3",
"https://sites.google.com/site/musicafilemp3/natale/pFirstNo.mp3",
"https://sites.google.com/site/musicafilemp3/natale/pJingle.mp3",
"https://sites.google.com/site/musicafilemp3/natale/pUnFlambeauJeannette.mp3",
"https://sites.google.com/site/musicafilemp3/natale/pWeWishY.mp3",
"https://sites.google.com/site/musicafilemp3/natale/SilentNightInA.mp3",
"https://sites.google.com/site/musicafilemp3/natale/tu-scendi-dalle-stelle.mp3",
"https://sites.google.com/site/musicafilemp3/natale/WeWishYouAMerry.mp3"];
var rotazione = Math.random()*jinglenatale.length;
var numero = Math.floor(rotazione);
document.write('<audio controls="true" autoplay="autoplay">');
document.write('<source src='+jinglenatale[numero]+' type="audio/mpeg">');
document.write('</audio>');
//]]>
</script>

Si salva senza bisogno di inserire il titolo. Il titolo del widget invece serve qualora si voglia riprodurre queste canzoni in automatico solo in una pagina del nostro blog. Tramite il titolo andando su Modello > Modifica HTML e usando Ctrl+F si troverà il widget in oggetto. Dovremo inserire i tag condizionali come illustrato nel post linkato per inserire i vincoli di visualizzazione. 

Demo
Clicca qui

Chi carica i brani su un altro hosting deve ottenerne il link diretto per poi sostituirli agli URL colorati di rosso. Mantenendo la stessa sintassi si possono cancellare jingle che non ci piacciono e al contempo aggiungerne altri di nostro gradimento. Tale javascript con contiene tag di Blogger quindi può essere incollato anche nel widget Testo di Wordpress.