Come riprodurre file audio se si clicca o si passa con il mouse su link o su immagini.

Come installare in una pagina web (Blogger, Wordpress, ecc) un effetto per riprodurre un dato file audio quando si fa click su un link o quando si passa sopra un collegamento o una immagine con il cursore.

L'effetto di riprodurre audio quando un lettore clicca su un collegamento o passa con il mouse sopra a un link o una immagine è tutt'altro che raro nel web. Anche gli utenti di Blogger possono facilmente implementarlo nel loro sito. I suoni saranno riprodotti se la pagina viene aperta con un browser che supporta HTML5 cioè praticamente da tutti i browser più moderni e aggiornati.

Ovviamente come primo passo bisogna scegliere i file audio da riprodurre. Per non essere troppo invasivi è bene selezionare un audio che duri pochi secondi. Per avere la sicurezza che l'audio venga riprodotto anche da Opera oltre che da Firefox, Chrome, Microsoft Edge e Safari è bene avere due formati dello stesso file cioè quello MP3 e quello OGG.

Per avere anche una copia in OGG di un file MP3 si può usare un convertitore audio come Format Factory. I due file vanno quindi caricati su un hosting che ci permetta di ricavarne il link diretto. Chi ha un blog gratuito del tipo blogspot.com può usare Google Sites, chi invece possiede un dominio personalizzato dovrà caricare i file su Google Drive (attivo fino al 31/8/2016) o su Dropbox. Visto che come test ho usato un blog di prova gratuito ho caricato su Google Sites due file audio nei due differenti formati MP3 e OGG per un totale di 4 URL diretti che sono i seguenti

https://sites.google.com/site/musicafilemp3/file-musicali/whistle.ogg
https://sites.google.com/site/musicafilemp3/file-musicali/whistle.mp3
https://sites.google.com/site/musicafilemp3/file-musicali/click.ogg
https://sites.google.com/site/musicafilemp3/file-musicali/click.mp3

Per questi link diretti si clicca con il destro del mouse su Scarica quindi Copia indirizzo link

Nell'URL che se ne ricava dovrà essere eliminata la parte finale dopo l'estensione del file

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

come mostrato nell'esempio precedente. Fatta questa operazione dovremo operare nel modello di Blogger. Dopo aver salvato il template si va su Modello > Modifica HTML, si cerca la riga </head> e, subito sopra a questa, si incolla il codice seguente

<script type='text/javascript'>
//<![CDATA[
var html5_audiotypes={
    "mp3": "audio/mpeg",
    "mp4": "audio/mp4",
    "ogg": "audio/ogg",
    "wav": "audio/wav"
}
function createsoundbite(sound){
    var html5audio=document.createElement('audio')
    if (html5audio.canPlayType){
        for (var i=0; i<arguments.length; i++){
            var sourceel=document.createElement('source')
            sourceel.setAttribute('src', arguments[i])
            if (arguments[i].match(/.(w+)$/i))
                sourceel.setAttribute('type', 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("Il tuo browser purtroppo non supporta i tag HTML5")}}
    }
}
var mouseoversound=createsoundbite("https://sites.google.com/site/musicafilemp3/file-musicali/whistle.ogg", "https://sites.google.com/site/musicafilemp3/file-musicali/whistle.mp3")
var clicksound=createsoundbite("https://sites.google.com/site/musicafilemp3/file-musicali/click.ogg", "https://sites.google.com/site/musicafilemp3/file-musicali/click.mp3")
//]]>
</script>

Si salva il modello. L'unica cosa da personalizzare sono gli URL diretti ai suoni che sono stati colorati di rosso. La prima coppia di file MP3 e OGG serve per creare effetti al passaggio del cursore sopra un link (mouseoversound) mentre la seconda coppia di file è configurata per riprodurre suoni (clicksound) se si clicca sopra a un collegamento.

Demo
Clicca qui

LINK O IMMAGINI CHE RIPRODUCONO AUDIO AL PASSAGGIO DEL MOUSE

Per inserire link che riproducano un suono al passaggio del cursore si usa questo codice

<a href="#" onmouseover="mouseoversound.playclip()">Testo di ancoraggio del link</a>

dove al posto del cancelletto ( # ) si mette l'URL del link e al posto di Testo di ancoraggio del link si digita il testo visibile del collegamento. Se invece si vuole riprodurre audio al passaggio del mouse sopra 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 e il nome della immagine.

LINK O IMMAGINI CHE RIPRODUCONO IL SUONO CON UN CLICK

Poniamo che si voglia rendere più evidente il click di un utente su un collegamento che potrebbe essere il download di un nostro contenuto o l'acquisto di un nostro prodotto. Lo si può fare con l'emissione contestuale di un audio specifico con la personalizzazione appena illustrata. Il codice da usare per collegamenti e immagini in questo caso diventa

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

Se si decide di non far aprire al lettore la pagina del collegamento e di farlo rimanere nella pagina corrente si deve aggiungere il tag current in questo modo

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

È importante inserire anche il nome-immagine per ragioni SEO. Concludo ricordando che al posto del cancelletto (#) va opzionalmente incollato l'indirizzo del link.