Suoni paurosi casuali che si riproducono automaticamente nel blog per Halloween.

Come installare uno script in un blog o in una pagina web che riproduce automaticamente dei rumori paurosi in occasione della Festa di Halloween.

La festa di Halloween è entrata da anni a far parte anche dalla nostra cultura e viene festeggiata regolarmente anche in Italia nella notte del 31 Ottobre. La simbologia prevalente prevede zucche intagliate a forma di facce horror, fantasmi, zombie con uno sguardo tra l'impaurito e lo scherzoso verso il mondo dei morti che tra l'altro si festeggeranno di lì a poco.

Nel mondo anglosassone è uso tra i più piccoli bussare alle porte delle case per poi rivolgere il classico dilemma trick or treat? che è stato italianizzato in dolcetto o scherzetto? Non faccio parte della schiera di blogger che sono soliti adattare il layout al periodo dell'anno con esplosioni floreali in Primavera e Estate o cadute di foglie o di neve in Autunno e Inverno però la richiesta di effetti speciali e particolari abbellimenti è sempre presente in ogni festività particolarmente sentita.

Tra gli effetti speciali per Halloween che sono piaciuti di più vi è quello della riproduzione casuale di suoni paurosi tutte le volte che un navigatore apre la pagina del sito. Tali suoni devono essere necessariamente brevi per non irritare il lettore.

L'obiettivo è quindi quello di 1) Caricare nel web dei file MP3 da riprodurre, 2) Utilizzare il tag <audio> del linguaggio HTML5 per la riproduzione dei brani, 3) Applicare un javascript per rendere la riproduzione casuale, 4) Applicare un CSS per nascondere il player di riproduzione.

I file li ho caricati su Google Sites e ne ho ottenuto il link diretto. Chi avesse un blog con dominio personalizzato può caricarli su Dropbox per averne l'hotlink oppure ottenerne il link di download su Google Drive. Basterà sostituire gli URL di Google Sites con quelli di Dropbox o altro hosting che si sia utilizzato.

Lo script funzionerà in qualsiasi sito che supporta gli inserimenti di javascript. Gli utenti di Blogger, o quelli di un'altra piattaforma, dovranno cercare la riga </body> che è presente in tutte le pagine web. Su Blogger si va su Modello -> Modifica HTML mentre p.e. su Wordpress si va su Aspetto -> Editor -> Piè di pagina (footer.php). Subito sopra a </body> si incolla questo 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);
// Suoni di Halloween
var halloween = [
"https://sites.google.com/site/musicafilemp3/halloween/bach1.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/bambina1.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/campane1.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/fantasma1.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/fantasma2.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/grido1.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/grido2.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/mostro.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/risate1.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/risate2.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/risa-ululato.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/ululato1.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/ululato2.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/battitocuore.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/bestia.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/cobra.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/dolore.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/risatasatanica1.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/risatasatanica2.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/spari.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/tuono.mp3",];
var rotazione = Math.random()*halloween.length;
var numero = Math.floor(rotazione);
document.write('<audio controls="true" autoplay="autoplay">');
document.write('<source src='+halloween[numero]+' type="audio/mpeg">');
document.write('</audio>');
//]]>
</script>

quindi si salva il modello (Blogger) o si aggiorna il file (Wordpress). Incollando i singoli URL nella barra degli indirizzi del browser e pigiando su Invio si potranno scaricare tutti i file per ascoltarli. Se qualche suono non ci soddisfa si può toglierne l'URL così come se ne possono aggiungere altri. L'importante è che venga mantenuta la stessa sintassi. 

Demo Clicca qui

Se si ricarica la pagina di Demo con l'icona del browser o se si pigia su F5 nella tastiera si ascolterà un altro suono pauroso in ordine casuale. Prova anche altri spettacolari effetti per Halloween.