Pubblicato il 01/02/16 - aggiornato il  | 7 commenti :

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

link-diretto-google-sites

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.

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.


7 commenti :

  1. E se si volesse anzicchè mettere come nell'esempio qui sopra un solo audio standard per tutte le immagini, ma mettere innumerevoli immagini con innumerevoli audio diversi?

    RispondiElimina
    Risposte
    1. Non è semplicissimo nel senso che si dovrebbero aggiungere blocchi di codici per ogni link e ogni audio inserito cambiando sempre il nome delle funzione javascript.
      @#

      Elimina
  2. Ciao! non so se mi puoi aiutare. io lavoro con wordpress. ho provato a fare la prima procedura che hai descritto ma non trovo la voce "head".. hai idea di come si faccia? perchè è esattamente quello di cui avrei bisogno

    RispondiElimina
    Risposte
    1. La riga < /head > (senza spazi) si trova su Aspetto -> Editor -> Testata.php o header.php o qualcosa di simile, dipende dal tema. Apri l'editor, aggiungi il codice quindi vai su Aggiorna File. Fai attenzione perché su Wordpress non ci sono i sistemi di protezione di Blogger contro gli sbagli del codice
      @#

      Elimina
    2. ah ok, quindi non si può fare direttamente da dentro l'articolo che si sta scrivendo..? non c'è proprio modo? (intanto grazie)

      Elimina
  3. Si. Puoi provare ia incollare il primo codice del JavaScript all'inizio del post in modalità Html per poi inserire il link. Non so però se funsionerf perché WordPress non supporta nativamente il JavaScript.
    @#

    RispondiElimina
    Risposte
    1. già provato, non funge...ci rinuncio! grazie mille :)

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy