Pillole di codice #12 Masterclass sulla rappresentazione grafica dei suoni

Ecco la masterclass sulla rappresentazione grafica dei suoni in Javascript.

I suoni sono un oggetto particolare da un punto di vista software, in quanto non sono dipendenti solamente dal browser e dal suo render del canvas, ma si interfacciano con un componente del PC che agisce in maniera autonoma: la scheda audio.

I puristi potranno obbiettare che anche le immagini dipendono dalla scheda video, ma nel caso dei suoni questa dipendenza sarà univoca, ovvero quando andremo a misurare i suoni nelle sue loro rappresentazioni (frequenze di riproduzione e volume) non interrogheremo direttamente l’oggetto “suono”, ma andremo ad interfacciarci con la scheda audio.

Ma esattamente come abbiamo fatto per le immagini partiamo dall’analisi “informatica” dei suoni.

Esattamente come per le immagini i suoni possono essere rappresentati in memoria come caselle (definirli pixel sarebbe errato) in cui per ogni casella sono salvate le frequenze da riprodurre ed i relativi volumi. Ogni casella rappresenterà quindi il nostro intervallo temporale. Ovviamente in base alla qualità di riproduzione saranno presenti più o meno “caselle” ed ovviamente maggiore sarà il numero migliore sarà la qualità.

Il suono però a differenza del video (in realtà non è vero, anche la luce è un segnale ad onde di tipo analogico, ma è più facile effettuare delle approssimazioni di colore che di suono da un punto di vista digitale) è un segnale puramente analogico. Per trasformare i segnali da analogico a digitale e viceversa ci viene incontro la trasformata di Fourier. Questa procedura matematica ci permette di trasformare un segnale ad onda quadra in una progressione (sommatoria) di segnali analogici e viceversa, permettendo di far dialogare le casse del computer (periferica squisitamente analogica) con la memoria dell’elaboratore (che è puramente digitale).

Fatte queste premesse tecniche-matematiche è arrivato il momento di vedere come caricare e manipolare i suoni per estrapolare informazioni che poi potremo utilizzare per creare le nostre immagini procedurali.

Caricare i suoni

Il caricamento dei suoni è molto simile al caricamento delle immagini, infatti la funzione per il caricamento dei suoni è definito come:

ci permetterà di ricavare ogni singolo pixel è:

 oggettoSuono=loadSound(PATH);

Ovviamente (e a maggior ragione nel caso dei suoni) è buona pratica inserire il caricamento nella funzione di preload(). Nel caso di oggetti sonori, l’uso del preload è fondamentale in quanto rispetto alle immagini (che pesano pochi kB) un MP3 di discreta qualità e media lunghezza arriva a pesare anche alcuni MB, il che rende impegnativo il caricamento, soprattutto attraverso linee internet non performanti.

Una volta caricato l’oggettoSuono può essere riprodotto, messo in pausa o stoppato con le seguenti funzioni:

oggettoSuono.play(); //avvia la riproduzione audio
oggettoSuono.pause(); //mette in pausa la riproduzione
oggettoSuono.stop(); //ferma la riproduzione

Arrivati alla fine del file la riproduzione si fermerà automaticamente.

Impostare ed analizzare il volume di riproduzione

Per ogni oggetto suono può essere impostato il volume massimo di riproduzione tramite la seguente funzione:

 oggettoSuono.setVolume(VAL);

In cui VAL è un numero compreso tra 0 (MUTO) e 1 (volume massimo). In questo caso è da specificare che anche se il volume di riproduzione è 1 non è detto che il valore di output della canzone o suono in riproduzione raggiunga questo valore, in quanto molte canzoni ad esempio sono limitate in volume già in registrazione.

Invece per analizzare il volume di output l’insieme delle funzioni da usare è questo:

ampiezza = new p5.Amplitude();
volume = ampiezza.getLevel();

Il volume sarà esplicitato come un valore compreso tra 0 e 1 e non è relativo al singolo oggetto sonoro in riproduzione, ma al valore di output della scheda audio. Quindi in caso di più elementi in riproduzione volume rappresenterà il valore più alto attualmente in riproduzione.

Ricavare il volume di riproduzione per ogni banda di frequenza

Come accennato precedentemente nella sezione riguardante alla trasformata di Fourier, ogni suono è la somma di più componenti di frequenza diversa che vanno a definire tonalità e timbro. Anche questi possono essere analizzati per ricavarne dei dati.

Il tutto può essere effettuato con le seguenti righe di codice:

fft = new p5.FFT(S,K);
spettro = fft.analyze();
spettro[N];

Tramite la prima riga si imposta l’analisi della trasformata di fourier per i suoni in riproduzione (tutti i suoni sulla scheda audio, come per il volume). S rappresenta lo smoothing (ammorbidimento) e va definito come un valore compreso tra 0 e 1. K invece rappresenta il numero di bande che vogliamo analizzare in uscita.

La seconda riga ci restituirà un array formato da K elementi in cui ogni elemento rappresenta una banda di frequenza con il suo relativo valore di output (compreso tra 0 e 255).

Compila il form qui sotto per ricevere subito nella tua casella email i files della lezione.