L'API Web Audio che cos'è?

Non preoccuparti, è qui! Un'API che non solo sbiancherà i tuoi denti e migliorerà la tua postura, ma aggiungerà il suono al tuo sito web in modo meraviglioso *. È l'API Web Audio! Non ne ho mai sentito parlare? Non ti preoccupare Questo tutorial ti consentirà di iniziare e funzionare in pochissimo tempo.

L'API Web Audio è un modo di alto livello per creare e manipolare il suono direttamente nel browser tramite JavaScript. Ti permette di generare audio da zero o caricare e manipolare qualsiasi file audio esistente che potresti avere. È estremamente potente, pur avendo il proprio sistema di cronometraggio per fornire una riproduzione di frazione di secondo.

"Non posso usare solo il elemento? "Beh, sì, ma dipende davvero da cosa è il tuo caso d'uso. Il l'elemento è perfetto per incorporare e riprodurre clip audio come musica o podcast, ma se hai bisogno di un po 'più di controllo, come il controllo del volume o l'aggiunta di effetti a livello di programmazione, allora l'API Web Audio sarà proprio all'altezza del tuo Tin Pan Alley.

Fare un suono

Immergiti subito. Per iniziare a giocare con l'API Web Audio, dobbiamo assicurarci di utilizzare un browser che lo supporta. Controlliamo caniuse.com. Sembra che il supporto per i browser sia abbastanza buono - solo Internet Explorer non supporta l'API al momento, ma questo cambierà presto, poiché è attualmente in fase di implementazione per l'inclusione nella prossima major release.

Mantieni le cose semplici creando una pagina HTML di base con a

L'AudioContext è un piccolo contenitore in cui vivrà tutto il nostro suono. Fornisce l'accesso all'API Web Audio, che a sua volta ci dà accesso ad alcune funzioni molto potenti. Prima di continuare, tuttavia, è essenziale comprendere un concetto importante dell'API Web Audio: i nodi.

nodi

Prendiamo come esempio l'astrofisico dai capelli ricci e il chitarrista dei Queen Brian May. Quando Brian vuole suonare la sua chitarra, prende un guinzaglio dalla sua chitarra e lo collega a un pedale effetto come un pedale di distorsione. Quindi collega un altro cavo dal suo pedale di distorsione a un altro effetto o al suo amplificatore. Ciò consente al suono di viaggiare dalla sua chitarra, essere manipolato e quindi essere emesso in uscita da un altoparlante in modo che le persone possano ascoltare i suoi riff rock. Questo è esattamente come funziona l'API Web Audio. Il suono viene trasmesso da un nodo a quello successivo, manipolato mentre viene eseguito, prima di essere infine emesso dai diffusori.


Ecco un esempio di base. Aggiungi il seguente al tuo > etichetta.

var context = new AudioContext (), oscillator = context.createOscillator (); // Collega l'oscillatore ai nostri altoparlanti oscillator.connect (context.destination);

Qui abbiamo creato un oscillatore. Un oscillatore è un tipo di generatore di suoni che fornirà un tono semplice. Abbiamo preso un vantaggio dall'oscillatore e lo abbiamo collegato ai nostri diffusori, altrimenti noti come "web audio land" context.destination.

Ora che tutto è connesso, dobbiamo solo avviare l'oscillatore in modo che possiamo ascoltarlo. Assicurati che i diffusori non siano alzati troppo forte!

// Avvia l'oscillatore ora oscillator.start (context.currentTime);

Ora dovresti sentire qualcosa quando la pagina viene caricata. Per interrompere la riproduzione dell'oscillatore dopo alcuni secondi, aggiungi semplicemente quanto segue.

// Interrompe l'oscillatore da 3 secondi da ora oscillator.stop (context.currentTime + 3);

Senti qualcosa? Ben fatto, hai appena fatto il suono nel browser!

File audio

Ora, potresti pensare "Oscillatori ?! Non ho tempo per questo, sono un'importante persona d'affari con un sacco di incontri d'affari e pranzi d'affari per andare! ", Che è perfettamente ok. Fare suoni in questo modo non è per tutti. Fortunatamente, c'è un altro modo.

Diciamo invece che si desidera riprodurre un normale file mp3. L'API Web Audio può fare anche questo. Per prima cosa dobbiamo caricare il file audio tramite il nostro vecchio amico XMLHttpRequest. Ricorda che quando carichi file usando questo metodo, la tua pagina dovrà essere servita tramite un server e non solo caricata dal tuo filesystem locale. Per evitare qualsiasi complicazione, assicurarsi che il file mp3 sia servito nello stesso modo e dalla stessa posizione.

var request = new XMLHttpRequest (); request.open ('GET', 'my.mp3', true); request.responseType = 'arraybuffer'; request.onload = function () var undecodedAudio = request.response; ; Richiesta inviata();

Quando il file audio è completamente caricato dal browser, il file onload l'evento si attiva e restituisce i dati audio nell'attributo di risposta. A questo punto è archiviato come ArrayBuffer, ma per ottenere i dati audio da esso dobbiamo convertirlo in un AudioBuffer. Pensa ad un AudioBuffer come a un piccolo contenitore che tiene in memoria i nostri dati audio per noi. Per fare questo usiamo il decodeAudioData funzione.

request.onload = function () var undecodedAudio = request.response; context.decodeAudioData (undecodedAudio, function (buffer) // Il contenuto del nostro mp3 è ora un AudioBuffer console.log (buffer);); ;

Quando avremo un AudioBuffer contenente i nostri dati audio, dobbiamo trovare un modo per riprodurlo. Non è possibile riprodurre direttamente un AudioBuffer: è necessario caricarlo in uno speciale AudioBufferSourceNode. Questo nodo è come un giradischi, mentre il buffer è il disco in vinile con la musica su di esso. O per aggiornare la mia analogia, il nodo è come un registratore e il buffer è una cassetta ...

request.onload = function () var undecodedAudio = request.response; context.decodeAudioData (undecodedAudio, function (buffer) // Crea AudioBufferSourceNode var sourceBuffer = context.createBufferSource (); // Indica a AudioBufferSourceNode di utilizzare questo AudioBuffer. sourceBuffer.buffer = buffer;); ;

Il disco è ora sul giradischi pronto per essere giocato. Ma ricorda, stiamo usando l'API Web Audio e l'API Web Audio richiede che colleghiamo i nodi insieme per inviare il suono ai nostri altoparlanti. Quindi, facciamo solo ciò che abbiamo fatto precedentemente con il nostro oscillatore e connettiamo il nostro nodo sorgente ai nostri altoparlanti (context.destination).

request.onload = function () var undecodedAudio = request.response; context.decodeAudioData (undecodedAudio, function (buffer) var sourceBuffer = context.createBufferSource (); sourceBuffer.buffer = buffer; sourceBuffer.connect (context.destination);); ;

Ancora una volta, ora che tutto è connesso, possiamo facilmente iniziare a riprodurre il contenuto degli mp3 dicendo a AudioBufferSourceNode di suonare in questo preciso momento. 

sourceBuffer.start (context.currentTime);

Bellissimo!

Sommario

In questo tutorial abbiamo imparato come utilizzare l'API Web Audio per creare un suono in modo nativo all'interno del browser, nonché come caricare e riprodurre un file mp3. L'API è in grado di fare molto di più, e non vedo l'ora di mostrarti il ​​suo potenziale in future esercitazioni.

Tutto il codice di questo tutorial è disponibile su GitHub.

* L'API Web Audio purtroppo non supporta attualmente lo sbiancamento dei denti o il miglioramento della postura.