Come riprodurre suoni al passaggio del cursore su foto o link.

Come riprodurre suoni al passaggio del cursore sopra dei link o delle immagini o quando ci si clicca sopra.

Ho già presentato un tutorial su come si possa installare sul blog un meccanismo per riprodurre effetti audio al passaggio del mouse. Il sistema presentato aveva la controindicazione di funzionare solo su Internet Explorer. Vado adesso a illustrare un nuovo metodo che in teoria dovrebbe funzionare con tutti i browser ma che nel mio post di test da risultanze negative proprio con Internet Explorer. Non ci sono invece problemi di funzionamento con Chrome, Firefox e Opera. Visto che nel sito da cui ho preso ispirazione di cui il link a fondo articolo il metodo va anche con IE potrebbe anche essere un problema limitato al solo template che ho usato o più in generale a tutta la piattaforma Blogger. Il metodo non funziona invece con Safari per OS Windows, non so dire nulla per Safari installato su Mac.

In teoria i file audio MP3 dovrebbero essere supportati da IE9+, Chrome 6+, Safari 5+ mentre i file audio OGG da Opera 10.5+. Inserendo dei file audio nei due formati si dovrebbero quindi coprire tutti i browser più importanti. La prima cosa da fare è quindi quella di procurarci i file e eventualmente convertirli in entrambi questi formati. Si può usare il programma gratuito Format Factory o un qualsiasi altro convertitore di file audio. Se avete un blog gratuito del tipo Blogspot.com potete usare Google Sites come hosting dei file audio.

Per ottenere il link diretto al file si va con il destro del mouse su Scarica quindi su Copia indirizzo link

L'indirizzo così ottenuto dovrà essere depurato della parte finale in modo che l'URL termini con la estensione del file. Questo si deve fare con il file in formato MP3 e con quello in formato OGG

https://sites.google.com/site/musicafilemp3/file-musicali/click.mp3?attredirects=0&d=1
https://sites.google.com/site/musicafilemp3/file-musicali/click.ogg?attredirects=0&d=1

In sostanza dobbiamo eliminare dal link la parte colorata di rosso e usare solo quella color viola. Se possedete un dominio personalizzato questi file vanno caricati nella cartella Public di Dropbox. Se ancora non avete un account ricordatevi di creare la cartella Public perché si potranno avere i link diretti solo dei file presenti in questa cartella andando su Copy Public Link.

Se passate con il mouse sopra ai primi link e se cliccate sopra alle immagini in fondo sentirete degli effetti sonori. Per l'installazione di questa personalizzazione dopo aver salvato il template si va su Modello > Modifica HTML > Procedi e si cerca la riga </head>. Subito sopra si incolla questo codice

<!-- Effetti Sonori per il mouse Inizio -->
<script>
var html5_audiotypes={
    &quot;mp3&quot;: &quot;audio/mpeg&quot;,
    &quot;mp4&quot;: &quot;audio/mp4&quot;,
    &quot;ogg&quot;: &quot;audio/ogg&quot;,
    &quot;wav&quot;: &quot;audio/wav&quot;
}
function createsoundbite(sound){
    var html5audio=document.createElement(&#39;audio&#39;)
    if (html5audio.canPlayType){
        for (var i=0; i&lt;arguments.length; i++){
            var sourceel=document.createElement(&#39;source&#39;)
            sourceel.setAttribute(&#39;src&#39;, arguments[i])
            if (arguments[i].match(/.(w+)$/i))
                sourceel.setAttribute(&#39;type&#39;, html5_audiotypes[RegExp.$1])
            html5audio.appendChild(sourceel)
        }
        html5audio.load()
        html5audio.playclip=function(){
            html5audio.pause()
            html5audio.currentTime=0
            html5audio.play()
        }
        return html5audio
    }
    else{
        return {playclip:function(){throw new Error(&quot;Your browser doesn&#39;t support HTML5 audio unfortunately&quot;)}}
    }
}
var mouseoversound=createsoundbite(&quot;https://sites.google.com/site/musicafilemp3/file-musicali/whistle.ogg&quot;, &quot;https://sites.google.com/site/musicafilemp3/file-musicali/whistle.mp3&quot;)
var clicksound=createsoundbite(&quot;https://sites.google.com/site/musicafilemp3/file-musicali/click.ogg&quot;, &quot;https://sites.google.com/site/musicafilemp3/file-musicali/click.mp3&quot;)
</script>
<!-- Effetti Sonori per il mouse Fine -->

Al posto dei quattro URL colorati si incollano gli indirizzi dei file in formato MP3 e OGG che vogliamo utilizzare. Il primo suono sarà quello che si sentirà quando si passerà sopra a un link con il mouse mentre il secondo sarà quello che si riprodurrà quando ci si cliccherà sopra. Si salva il modello.

COME INSERIRE LINK O IMMAGINI CHE RIPRODUCONO AUDIO AL PASSAGGIO DEL CURSORE

Per inserire link che emettano un suono al passaggio del mouse si utilizza questo codice

<a href="#" onmouseover="mouseoversound.playclip()">Collegamento con audio</a>

dove al posto del cancelletto ( # ) si mette l'URL del link e al posto di Collegamento con audio il testo di ancoraggio che si preferisce. Se invece si vuole mettere l'effetto in una immagine il codice diventa

<a href="#" onmouseover="mouseoversound.playclip()"><img src="URL IMMAGINE" alt="nome-immagine" /></a>

dove oltre che all'URL del collegamento si deve inserire l'indirizzo della immagine, che dovrà essere caricata su Picasa in un album Pubblico, e il suo nome per ragioni SEO.

COME INSERIRE LINK O IMMAGINI CHE RIPRODUCONO SUONI CON UN CLICK

Se si clicca su un link o su una immagine con un collegamento saremo reindirizzati alla pagina collegata. Non ha quindi molto senso inserire un suono in una situazione simile. Si può però usare questo metodo per lasciare il navigatore nella stessa pagina, anzi nella stessa posizione. I due codici in questo caso sono

<a href="#current" onclick="clicksound.playclip()">Link con audio</a>

<a href="#current" onclick="clicksound.playclip()"><img src="URL IMMAGINE" alt="nome-immagine" /></a>

dove il link #current si inserisce per lasciare inalterata la posizione del visitatore quando clicca sul  collegamento mentre Link con audio, URL IMMAGINE e nome-immagine hanno lo stesso significato.
Fonte | Javascriptkit -