In alcune circostanze, puรฒ essere utile integrare effetti sonori nelle pagine di un sito web per migliorare l’interazione con l’utente. No, non stiamo parlando delle fastidiose “musichette” di sottofondo che andavano di moda negli anni ’90, ma di effetti sonori mirati (come il classico “bing”) per segnalare specifici eventi agli utenti.
Ad esempio, su una piattaforma di messaggistica istantanea o in una webmail, potrebbe essere utile notificare l’arrivo di un nuovo messaggio o di una nuova email con un suono appropriato. In modo tale che l’utente, anche se distratto, possa rendersi conto della novitร .
Ma come si possono aggiungere effetti sonori alle pagine web? Esistono diversi metodi, ma attualmente, il modo piรน efficace รจ sfruttare le API di HTML5 tramite JavaScript.
Di seguito, ecco il codice JavaScript di base per la riproduzione di un file audio (in questo caso, utilizziamo il formato MP3):
<script>
var snd = new Audio("effetto.mp3");
snd.play();
</script>Per garantire che il codice funzioni correttamente, รจ fondamentale verificare preventivamente che il browser supporti questa funzionalitร di HTML5. Possiamo farlo utilizzando una semplice funzione:
<script>
function audio_test_mp3() {
var snd = document.createElement('audio');
return !!(snd.canPlayType && snd.canPlayType('audio/mpeg;').replace(/no/, ''));
}
</script>Lo scopo di questa funzione รจ verificare che il browser dell’utente supporti le Audio API di HTML5 e sia in grado di riprodurre file audio nel formato MPEG.
Vediamo ora come combinare i due esempi precedenti in un’unica funzione:
<script>
function audio_test_mp3() {
var snd = document.createElement('audio');
return !!(snd.canPlayType && snd.canPlayType('audio/mpeg;').replace(/no/, ''));
}
function audio_play_mp3(filename) {
if (audio_test_mp3()) {
var snd = new Audio("/mp3/" + filename + ".mp3");
snd.play();
}
}
</script>Ora non resta che riprodurre il nostro effetto sonoro quando si verifica l’evento che desideriamo “sottolineare” in modo acustico. Ad esempio, supponiamo di voler enfatizzare l’apertura di una chat con un effetto sonoro laser.
Prima di tutto, carichiamo il file MP3 corrispondente nella cartella mp3, posizionata nella root del nostro sito (ricordiamoci di assegnare al file il nome “laser.mp3”).
Ora, utilizzando jQuery, possiamo far sรฌ che l’effetto sonoro venga riprodotto al clic su un elemento con ID “apri-chat”, in questo modo:
<script>
$(function(){
$('#apri-chat').click(function(){
// Riproduco l'effetto sonoro
audio_play_mp3('laser');
// Apro la chat
// ...
// ...
// ...
});
});
</script>Un ultimo consiglio: non abusare degli effetti sonori. Se usati con parsimonia, possono risultare utili e migliorare l’esperienza utente. Al contrario, un uso eccessivo potrebbe rendere il tuo sito estremamente fastidioso.
