back to top

Aggiungere effetti sonori alle pagine web

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.

Altri contenuti interessanti

Pubblicità
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).

Leggi anche...

Il file manifest.json: cos’è e a cosa serve

Il file manifest.json è un componente chiave nelle applicazioni web moderne,...

Infinite scroll, come programmarlo su AMP e su Web con Javascript

L'infinite scroll è una tecnica di design e navigazione...

Codice Fiscale: 5 javascript per la verifica e il calcolo

Il codice fiscale è un identificativo tributario univoco che...

Math.ceil() – Arrotondare per eccesso con Javascript

Il metodo ceil() dell'oggetto Math di Javascript è utilizzato...

Minificare Javascript: librerie e strumenti online per comprimere il sorgente JS

La minificazione è un processo abbastanza diffuso nell'implementazione delle...

Javascript: svuotare un campo input o una textarea con un click

Quando si fornisce agli utenti un modulo per l'inserimento...
Pubblicità