Sottofondo di canzoni di Natale per il blog

Come riprodurre canzoni di Natale di sottofondo in un sito, un blog o una pagina web mediante player HTML5

Durante le Feste molti amministratori di siti web sono soliti aggiungere delle personalizzazioni al loro layout. In questo post vedremo come riprodurre automaticamente e in modo casuale alcuni motivetti natalizi.

Purtroppo la piattaforma Blogger non supporta più l'autoplay dei player HTML5 quindi dovremo aggiungere un pulsante per permettere al navigatore di ascoltare un jingle natalizio casuale cliccandoci sopra. Poi potrà interrompere la riproduzione e aggiustarne il volume.

Nelle altre piattaforme, o in pagine web generiche, sarà possibile riprodurre canzoni natalizie di sottofondo che cambieranno tutte le volte che il lettore aprirà una nuova pagina o ricaricherà quella corrente.

Per evitare problemi di copyright, ho scelto i jingle natalizi tra quelli che possono essere scaricati e utilizzati legalmente. Ho selezionato 14 risorse in cui trovare musica natalizia. Le canzoni poi dovranno essere caricate nel cloud per permetterci di ottenere il link di download utilizzabile per creare un player HTML5.

Infine bisogna creare un javascript che consenta la riproduzione casuale dei brani e un CSS che nasconda o che personalizzi il player. Quest'ultima opzione è necessaria per gli utenti di Blogger perché l'autoplay non funziona su questa piattaforma sia per i video sia per gli audio.

Chi volesse fare da solo, magari utilizzando i codici di questo post per riprodurre canzoni diverse da quelle natalizie, può seguire la semplice procedura che vado a illustrare brevemente. Occorre naturalmente avere i file dei brani audio nel nostro computer, meglio se in formato MP3. Bisogna anche avere un account Dropbox.

Seguendo la falsariga già illustrata nell'articolo su come pubblicare audio e video nel web, occorre caricare i file in una cartella di Dropbox. Dopo aver creato una tale cartella basterà trascinarli nell'area del browser.

Accanto a ogni file ci sarà il pulsante Condividi, su cui cliccare per poi andare su Crea link quindi su Copia link.Gli URL ottenuti da Dropbox saranno i collegamenti ai nostri file MP3. Tali URL termineranno tutti con nomefile.mp3?dl=0 . Per convertirli in link di download, basterà cambiare lo 0 finale con 1 in modo da farli terminare tutti in questo modo nomefile.mp3?dl=1.

Adesso che abbiamo gli URL di download dei file creiamo il codice. I link di download delle canzoni natalizie che caricate su Dropbox sono individuabili perché terminano con dl=1. Sono tra virgolette e separati da virgole.

<style>
audio{ width: 0px; height: 0px; }
</style>
<script type="text/javascript">
//<![CDATA[  
// Jingle di Natale
var jinglenatale = [
"https://www.dropbox.com/s/7q2fo78qet4gw7s/1Deckthe.mp3?dl=1",
"https://www.dropbox.com/s/uwoq1oc2fc32trd/1HejWDzien.mp3?dl=1",
"https://www.dropbox.com/s/v5i9iox3jqkwhh4/1XmasTre.mp3?dl=1",
"https://www.dropbox.com/s/ndmwvyfv1keduoc/2SilentN.mp3?dl=1",
"https://www.dropbox.com/s/15kluxw3gg09kv1/3Ave.mp3?dl=1",
"https://www.dropbox.com/s/ermp06zz3j7kmv4/3FirstNoel.mp3?dl=1",
"https://www.dropbox.com/s/7c5nqeve9kwegkg/3Hark.mp3?dl=1",
"https://www.dropbox.com/s/0i9fumfw783uiuy/4Greensl.mp3?dl=1",
"https://www.dropbox.com/s/egq9raon7hd7i7v/DeckTheHallsInD.mp3?dl=1",
"https://www.dropbox.com/s/5zm7iakpa2ugv2n/Jingle.mp3?dl=1",
"https://www.dropbox.com/s/6lu6fe4xus15z43/pFirstNo.mp3?dl=1",
"https://www.dropbox.com/s/xakybqf6719wpeb/pJingle.mp3?dl=1",
"https://www.dropbox.com/s/cgfbp1bmw8xdbcg/pUnFlambeauJeannette.mp3?dl=1",
"https://www.dropbox.com/s/9hyoyzeqq4101km/pWeWishY.mp3?dl=1",
"https://www.dropbox.com/s/28q9bnkallq0emr/SilentNightInA.mp3?dl=1",
"https://www.dropbox.com/s/po3malzcp399nvq/tu-scendi-dalle-stelle.mp3?dl=1",
"https://www.dropbox.com/s/tmgrotz2vs8az5i/WeWishYouAMerry.mp3?dl=1"];
var rotazione = Math.random()*jinglenatale.length;
var numero = Math.floor(rotazione);
document.write('<audio loop autoplay controls>');
document.write('<source src='+jinglenatale[numero]+' type="audio/mpeg">');
document.write('</audio>');
//]]>
</script>

Si possono aggiungere o togliere alcuni brani mantenendo la stessa sintassi. Gli URL di download dei brani ottenuti da Dropbox sono inseriti tra parentesi quadre, separati da virgole e ciascuno di essi tra virgolette. Dopo la parentesi quadra di chiusura c'è un punto e virgola. Prestiamo attenzione alle righe evidenziate e a quella colorata di rosso.

Nel codice precedente, nella riga evidenziata di giallo, sono impostate la larghezza (width) e l'altezza (height) del player come Zero. Il player sarà quindi invisibile. Nella riga colorata di rosso sono stati inseriti gli attributi autoplay, loop e controls. L'attributo controls serve per visualizzare i controlli, che comunque in questo caso saranno invisibili perché il player ha dimensione zero. L'aggiunta di autoplay significa che lo script riprodurrà automaticamente un brano senza l'intervento del lettore. Infine l'attributo loop comporta che la canzone casuale continuerà a riprodursi all'infinito. Se si giudica questa opzione troppo invasiva si può togliere loop dal codice.

Gli utenti di piattaforma non Blogger potranno aggiungere questo codice in un widget. Per esempio chi ha Wordpress può incollarlo su Widget -> Testo per creare un sottofondo natalizio automatico.

JINGLE NATALIZI PER GLI UTENTI DI BLOGGER

Come detto Blogger non supporta l'autoplay dei player HTML5. Dobbiamo quindi mostrare il player al lettore e informarlo che cliccando sulla icona del Play potrà riprodurre un jingle natalizio casuale.

Si devono quindi sostituire le righe evidenziate di giallo con un codice come il seguente

<p style="font-size:14px; color:#036; font-weight:bold; font-family:Georgia;">Vai sul play per ascoltare un jingle di Natale casuale</p>
<style>
audio{ width: 250px; height: 50px; }
</style>

dove la prima riga può essere personalizzata a piacere, così come le dimensioni del player. Su Blogger non ha senso mantenere l'attributo autoplay mentre si può lasciare quello loop, per una riproduzione del brano all'infinito.

Si può testare il funzionamento del codice incollandolo in un Editor HTML Online con cui è stato preso lo screenshot precedente. Il Player HTML5 sarà visibile e il lettore potrà cliccare sulla icona del play per riprodurre il brano, di cui potrà regolare il volume e addirittura scaricarlo, andando sul menù dei tre puntini.

L'utente di Blogger potrà andare su Layout -> Aggiungi un gadget -> HTML / Javascript per poi incollare il codice su Sezioni del sito e andare su Salva. Il widget potrà poi essere posizionato con il drag&drop. Chi entrerà nel blog, visualizzerà il player e opzionalmente potrà riprodurre le canzoni natalizie in modo casuale.