Prima dell'elemento <audio>
HTML5, era necessario Flash o un altro plug-in per rompere il silenzio del web. Sebbene l'audio sul web non richieda più un plug-in, il tag audio presenta limitazioni significative per l'implementazione di giochi e applicazioni interattive sofisticati.
L'API Web Audio è un'API JavaScript di alto livello per l'elaborazione e la sintesi dell'audio nelle applicazioni web. Lo scopo di questa API è includere le funzionalità presenti nei moderni motori audio di gioco e alcune delle attività di mixing, elaborazione e filtraggio disponibili nelle moderne applicazioni di produzione audio per computer. Di seguito è riportata un'introduzione graduale all'utilizzo di questa potente API.
Iniziare a utilizzare AudioContext
Un AudioContext serve per gestire e riprodurre tutti i suoni. Per produrre un suono utilizzando l'API Web Audio, crea una o più sorgenti sonore e connettile alla destinazione audio fornita dall'istanza AudioContext
. Questa connessione non deve essere diretta e può passare attraverso un numero qualsiasi di AudioNodes intermedi che fungono da moduli di elaborazione per il segnale audio. Questo instradamento è descritto in maggiore dettaglio nella specifica Web Audio.
Una singola istanza di AudioContext
può supportare più input audio
e grafici audio complessi, quindi ne avremo bisogno solo di una per ogni
applicazione audio che creiamo.
Il seguente snippet crea un AudioContext
:
var context;
window.addEventListener('load', init, false);
function init() {
try {
context = new AudioContext();
}
catch(e) {
alert('Web Audio API is not supported in this browser');
}
}
Per i browser basati su WebKit meno recenti, utilizza il prefisso webkit
, come per
webkitAudioContext
.
Molte delle funzionalità interessanti dell'API Web Audio, come la creazione di AudioNode e la decodifica dei dati dei file audio, sono metodi di AudioContext
.
Caricamento dei suoni
L'API Web Audio utilizza un AudioBuffer per gli audio di breve e media durata. L'approccio di base consiste nell'utilizzare XMLHttpRequest per recuperare i file audio.
L'API supporta il caricamento dei dati dei file audio in più formati, ad esempio WAV, MP3, AAC, OGG e altri. Il supporto dei browser per i diversi formati audio varia.
Lo snippet seguente mostra il caricamento di un sample audio:
var dogBarkingBuffer = null;
var context = new AudioContext();
function loadDogSound(url) {
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.responseType = 'arraybuffer';
// Decode asynchronously
request.onload = function() {
context.decodeAudioData(request.response, function(buffer) {
dogBarkingBuffer = buffer;
}, onError);
}
request.send();
}
I dati del file audio sono binari (non di testo), quindi impostiamo responseType
della richiesta su 'arraybuffer'
. Per ulteriori informazioni su
ArrayBuffers
, consulta questo articolo su XHR2.
Una volta ricevuti i dati del file audio (non decodificati), possono essere conservati per la decodifica successiva o decodificati immediatamente utilizzando il metodo decodeAudioData()
AudioContext. Questo metodo prende il ArrayBuffer
dei dati del file audio memorizzati in request.response
e lo decodifica in modo asincrono (senza bloccare il thread di esecuzione principale di JavaScript).
Al termine di decodeAudioData()
, viene chiamata una funzione di callback che fornisce i dati audio PCM decodificati come AudioBuffer
.
Riproduzione di suoni
Una volta caricati uno o più AudioBuffers
, possiamo riprodurre i suoni. Supponiamo di aver appena caricato un AudioBuffer
con l'audio di un cane che abbaia e che il caricamento sia terminato. Poi possiamo riprodurre questo buffer con il seguente codice.
var context = new AudioContext();
function playSound(buffer) {
var source = context.createBufferSource(); // creates a sound source
source.buffer = buffer; // tell the source which sound to play
source.connect(context.destination); // connect the source to the context's destination (the speakers)
source.noteOn(0); // play the source now
}
Questa funzione playSound()
potrebbe essere chiamata ogni volta che un utente preme un tasto o fa clic su qualcosa con il mouse.
La funzione noteOn(time)
consente di programmare facilmente la riproduzione di audio preciso per giochi e altre applicazioni con tempistiche critiche. Tuttavia, per far funzionare correttamente questa pianificazione, assicurati che i buffer audio siano pre caricati.
Astrazione dell'API Web Audio
Ovviamente, sarebbe meglio creare un sistema di caricamento più generale che non sia hardcoded per il caricamento di questo suono specifico. Esistono molti approcci per gestire i numerosi suoni di breve e media durata che un'applicazione audio o un gioco utilizzerebbe. Ecco un modo per utilizzare BufferLoader (non incluso nello standard web).
Di seguito è riportato un esempio di come utilizzare la classe BufferLoader
.
Creiamo due AudioBuffers
e, non appena vengono caricati, riproduciamoli contemporaneamente.
window.onload = init;
var context;
var bufferLoader;
function init() {
context = new AudioContext();
bufferLoader = new BufferLoader(
context,
[
'../sounds/hyper-reality/br-jam-loop.wav',
'../sounds/hyper-reality/laughter.wav',
],
finishedLoading
);
bufferLoader.load();
}
function finishedLoading(bufferList) {
// Create two sources and play them both together.
var source1 = context.createBufferSource();
var source2 = context.createBufferSource();
source1.buffer = bufferList[0];
source2.buffer = bufferList[1];
source1.connect(context.destination);
source2.connect(context.destination);
source1.noteOn(0);
source2.noteOn(0);
}
Gestire il tempo: riprodurre suoni con ritmo
L'API Web Audio consente agli sviluppatori di pianificare con precisione la riproduzione. Per dimostrare questo concetto, creiamo una traccia ritmica semplice. Probabilmente il pattern di batteria più noto è il seguente:
in cui un hi-hat viene suonato ogni ottavo e la cassa e la cassa risonante vengono suonate in alternanza ogni quarto, in tempo 4/4.
Supponendo di aver caricato i buffer kick
, snare
e hihat
, il codice per farlo è semplice:
for (var bar = 0; bar < 2; bar++) {
var time = startTime + bar * 8 * eighthNoteTime;
// Play the bass (kick) drum on beats 1, 5
playSound(kick, time);
playSound(kick, time + 4 * eighthNoteTime);
// Play the snare drum on beats 3, 7
playSound(snare, time + 2 * eighthNoteTime);
playSound(snare, time + 6 * eighthNoteTime);
// Play the hi-hat every eighth note.
for (var i = 0; i < 8; ++i) {
playSound(hihat, time + i * eighthNoteTime);
}
}
Qui facciamo una sola ripetizione anziché il loop illimitato che vediamo nel foglio di musica. La funzione playSound
è un metodo che riproduce un buffer in un momento specificato, come segue:
function playSound(buffer, time) {
var source = context.createBufferSource();
source.buffer = buffer;
source.connect(context.destination);
source.noteOn(time);
}
Regolare il volume di un suono
Una delle operazioni di base che potresti voler eseguire su un audio è modificarne il volume. Utilizzando l'API Web Audio, possiamo instradare la sorgente alla destinazione tramite un AudioGainNode per manipolare il volume:
Questa configurazione della connessione può essere eseguita nel seguente modo:
// Create a gain node.
var gainNode = context.createGainNode();
// Connect the source to the gain node.
source.connect(gainNode);
// Connect the gain node to the destination.
gainNode.connect(context.destination);
Dopo aver configurato il grafico, puoi modificare il volume in modo programmatico manipolando gainNode.gain.value
come segue:
// Reduce the volume.
gainNode.gain.value = 0.5;
Transizione tra due suoni
Ora supponiamo di avere uno scenario leggermente più complesso, in cui riproduciamo più suoni, ma vogliamo eseguire la transizione tra di essi. Si tratta di un caso comune in un'applicazione come quella di un DJ, in cui abbiamo due giradischi e vogliamo poter passare da un'origine audio all'altra.
Questo può essere fatto con il seguente grafico audio:
Per configurare questa opzione, basta creare due AudioGainNodes e collegare ogni sorgente tramite i nodi, utilizzando una funzione simile a questa:
function createSource(buffer) {
var source = context.createBufferSource();
// Create a gain node.
var gainNode = context.createGainNode();
source.buffer = buffer;
// Turn on looping.
source.loop = true;
// Connect source to gain.
source.connect(gainNode);
// Connect gain to destination.
gainNode.connect(context.destination);
return {
source: source,
gainNode: gainNode
};
}
Transizione con potenza uguale
Un approccio di transizione lineare ingenuo presenta un calo del volume durante il passaggio tra i sample.
Per risolvere il problema, utilizziamo una curva di potenza uguale, in cui le curve di guadagno corrispondenti sono non lineari e si intersecano a un'ampiezza superiore. In questo modo, i cali di volume tra le regioni audio vengono ridotti al minimo, con un risultato migliore per il crossfade tra regioni che potrebbero avere un livello leggermente diverso.
Transizione tra una playlist e l'altra
Un'altra applicazione comune del crossfader è per un'applicazione di lettori musicali.
Quando cambia un brano, vogliamo attenuare quello corrente e aumentare gradualmente il volume del nuovo brano per evitare una transizione brusca. Per farlo, pianifica un crossfade in futuro. Sebbene potremmo utilizzare setTimeout
per eseguire questa programmazione, non è precisa. Con l'API Web Audio, possiamo utilizzare l'interfaccia AudioParam per pianificare valori futuri per parametri come il valore di guadagno di un AudioGainNode
.
Pertanto, data una playlist, possiamo passare da un brano all'altro pianificando una diminuzione dell'aumento del brano attualmente in riproduzione e un aumento dell'aumento del brano successivo, entrambi poco prima del termine della riproduzione del brano corrente:
function playHelper(bufferNow, bufferLater) {
var playNow = createSource(bufferNow);
var source = playNow.source;
var gainNode = playNow.gainNode;
var duration = bufferNow.duration;
var currTime = context.currentTime;
// Fade the playNow track in.
gainNode.gain.linearRampToValueAtTime(0, currTime);
gainNode.gain.linearRampToValueAtTime(1, currTime + ctx.FADE_TIME);
// Play the playNow track.
source.noteOn(0);
// At the end of the track, fade it out.
gainNode.gain.linearRampToValueAtTime(1, currTime + duration-ctx.FADE_TIME);
gainNode.gain.linearRampToValueAtTime(0, currTime + duration);
// Schedule a recursive track change with the tracks swapped.
var recurse = arguments.callee;
ctx.timer = setTimeout(function() {
recurse(bufferLater, bufferNow);
}, (duration - ctx.FADE_TIME) - 1000);
}
L'API Web Audio fornisce un pratico insieme di metodi RampToValue
per
modificare gradualmente il valore di un parametro, ad esempio
linearRampToValueAtTime
e exponentialRampToValueAtTime
.
Sebbene la funzione di temporizzazione della transizione possa essere scelta tra quelle lineari
e esponenziali predefinite (come sopra), puoi anche specificare la tua curva di valore
tramite un array di valori utilizzando la funzione setValueCurveAtTime
.
Applicazione di un semplice effetto filtro a un audio
L'API Web Audio ti consente di incanalare l'audio da un nodo audio a un altro, creando una catena potenzialmente complessa di processori per aggiungere effetti complessi ai tuoi soundform.
Un modo per farlo è posizionare BiquadFilterNode tra la sorgente e la destinazione audio. Questo tipo di nodo audio può applicare una serie di filtri di basso ordine che possono essere utilizzati per creare equalizzatori grafici e persino effettivi più complessi, in gran parte in relazione alla selezione delle parti dello spettro di frequenza di un suono da enfatizzare e da attenuare.
I tipi di filtri supportati includono:
- Filtro passa basso
- Filtro passa alto
- Filtro passa banda
- Filtro per scaffali bassi
- Filtro scaffale alto
- Filtro di picco
- Filtro Notch
- Filtro Tutti i pass
Inoltre, tutti i filtri includono parametri per specificare un determinato grado di guadagno, la frequenza con cui applicare il filtro e un fattore di qualità. Il filtro passa basso mantiene l'intervallo di frequenza più basso, ma elimina le frequenze elevate. Il punto di interruzione è determinato dal valore di frequenza, mentre il fattore Q è senza unità di misura e determina la forma del grafico. Il guadagno influisce solo su alcuni filtri, come i filtri shelving e di picco, e non su questo filtro passa basso.
Impostiamo un semplice filtro passa basso per estrarre solo le basi da un sample audio:
// Create the filter
var filter = context.createBiquadFilter();
// Create the audio graph.
source.connect(filter);
filter.connect(context.destination);
// Create and specify parameters for the low-pass filter.
filter.type = 0; // Low-pass filter. See BiquadFilterNode docs
filter.frequency.value = 440; // Set cutoff to 440 HZ
// Playback the sound.
source.noteOn(0);
In generale, i controlli di frequenza devono essere modificati per funzionare su una scala logaritmica, poiché l'udito umano funziona sullo stesso principio (ovvero A4 è 440 Hz e A5 è 880 Hz). Per maggiori dettagli, consulta la funzione FilterSample.changeFrequency
nel link al codice sorgente riportato sopra.
Infine, tieni presente che il codice di esempio ti consente di collegare e scollegare il
filtro, modificando dinamicamente il grafico AudioContext. Possiamo scollegare
AudioNodes dal grafico chiamando node.disconnect(outputNumber)
.
Ad esempio, per reindirizzare il grafico da un filtro a un collegamento diretto, possiamo procedere nel seguente modo:
// Disconnect the source and filter.
source.disconnect(0);
filter.disconnect(0);
// Connect the source directly.
source.connect(context.destination);
Per ascoltare altro
Abbiamo esaminato le nozioni di base dell'API, tra cui il caricamento e la riproduzione di sample audio. Abbiamo creato grafici audio con nodi e filtri di guadagno, nonché suoni programmati e modifiche ai parametri audio per attivare alcuni effetti sonori comuni. A questo punto, puoi iniziare a creare delle fantastiche applicazioni web per l'audio.
Se cerchi ispirazione, molti sviluppatori hanno già creato risultati straordinari utilizzando l'API Web Audio. Ecco alcuni dei miei preferiti:
- AudioJedit, uno strumento di splicing audio in-browser che utilizza i permalink di SoundCloud.
- ToneCraft, un sequenziatore audio in cui i suoni vengono creati impilando blocchi 3D.
- Plink, un gioco di creazione musicale collaborativo che utilizza Web Audio e WebSocket.