API-ul Web Audio Ce este?

Nu vă faceți griji, este aici! Un API care nu numai că va albi dinții și va îmbunătăți postura dvs., ci va adăuga un sunet site-ului dvs. într-un mod minunat *. Este API-ul Web Audio! Nu am auzit niciodata de asta? Nu-ți face griji. Acest tutorial te va ajuta să te joci în cel mai scurt timp.

API-ul Web Audio este o metodă de nivel înalt de creare și manipulare a sunetului direct în browser prin intermediul JavaScript. Acesta vă permite fie să generați audio de la zero, fie să încărcați și să manipulați orice fișier audio existent pe care îl aveți. Este extrem de puternic, chiar având propriul sistem de sincronizare pentru a oferi redare secundară.

"Nu pot folosi doar element? "Ei bine, da, dar depinde într-adevăr de cazul dvs. de utilizare. elementul este perfect pentru încorporarea și redarea clipurilor audio, cum ar fi muzică sau podcast-uri, dar dacă aveți nevoie de un control mai mic, cum ar fi controlul volumului programat sau adăugarea de efecte, atunci Web Audio API.

Faceți un sunet

Să începem să ne scufundăm. Pentru a începe să jucați cu API-ul Web Audio, trebuie să ne asigurăm că folosim un browser care îl acceptă. Să verificăm caniuse.com. Se pare că suportul pentru browser este destul de bun - numai Internet Explorer nu acceptă API în acest moment, dar acest lucru se va schimba în curând, deoarece este în prezent pus în aplicare pentru includerea în următoarea versiune majoră.

Să păstrăm lucrurile simple prin crearea unei pagini HTML de bază cu un

AudioContext este un mic container unde tot sunetul nostru va trăi. Acesta oferă acces la API-ul Web Audio, care, la rândul său, ne oferă acces la unele funcții foarte puternice. Înainte de a continua, cu toate acestea, este esențial să înțelegeți un concept important al API-ului Web Audio: noduri.

Nodurile

Să luăm ca exemplu un exemplu de astrofizician și cu chitaristul reginei Brian May. Când Brian dorește să-și cânte chitara, el ia o plimbare de la chitara și o conectează la o pedală de efect ca o pedală de distorsiune. Apoi, el conectează un alt conductor de la pedala de distorsiune fie la un alt efect, fie la amplificatorul său. Acest lucru permite ca sunetul să călătorească de la chitară, să se manipuleze și apoi să fie trimis la un difuzor, astfel încât oamenii să poată auzi riffurile sale rock. Acesta este exact modul în care funcționează Web Audio API. Sunetul este trecut de la un nod la altul, fiind manipulat în timp ce merge, înainte de a fi trimis în final la difuzoare.


Iată un exemplu de bază. Adăugați următoarele la dvs. > etichetă.

var context = nou AudioContext (), oscillator = context.createOscillator (); // Conectați oscilatorul la difuzoarele noastre oscillator.connect (context.destination);

Aici am creat un oscilator. Un oscilator este un tip de generator de sunet care ne va oferi un ton simplu. Am preluat conducerea de la oscilator și l-am conectat la difuzoarele noastre, altfel cunoscute în terenul audio de web ca context.destination.

Acum că totul este conectat, trebuie doar să pornim oscilatorul pentru a putea auzi. Asigurați-vă că difuzoarele dvs. nu sunt rotite prea tare!

// Începe oscilatorul acum oscillator.start (context.currentTime);

Ar trebui să auziți ceva când încărcați pagina. Pentru a opri redarea oscilatorului după câteva secunde, trebuie doar să adăugați următoarele.

// Opriți oscilatorul la 3 secunde de acum oscillator.stop (context.currentTime + 3);

Ai auzit ceva? Bine, tocmai ați făcut sunet în browser!

Fișiere audio

Acum, s-ar putea sa te gandesti "Oscilatoare ?! Nu am timp pentru asta, sunt o persoană de afaceri importantă, cu o mulțime de întâlniri de afaceri și prânzuri de afaceri pentru a merge la! ", Care este perfect ok. A face sunet în acest fel nu este pentru toată lumea. Din fericire, există o altă cale.

Să presupunem că doriți să jucați în mod obișnuit un fișier mp3. API-ul Web Audio poate face și acest lucru. Mai intai trebuie sa incarcam fisierul audio prin vechiul nostru prieten XMLHttpRequest. Rețineți că atunci când încărcați fișiere utilizând această metodă, pagina dvs. va trebui să fie difuzată printr-un server și nu doar încărcată de sistemul dvs. de fișiere local. Pentru a evita orice complicații, asigurați-vă că fișierul dvs. MP3 este servit în același mod și din aceeași locație.

var request = nou XMLHttpRequest (); request.open ('GET', 'my.mp3', true); request.responseType = 'arraybuffer'; request.onload = funcția () var undecodedAudio = request.response; ; cerere trimisă();

Când fișierul audio este încărcat în întregime de către browser, fișierul onload evenimentul incorecte și returnează datele audio în atributul de răspuns. În acest moment este stocat ca un ArrayBuffer, dar pentru a obține datele audio din el trebuie să îl convertim într-un AudioBuffer. Gândiți-vă la un AudioBuffer ca un mic container care stochează datele noastre audio în memorie pentru noi. Pentru a face acest lucru vom folosi decodeAudioData funcţie.

request.onload = funcția () var undecodedAudio = request.response; context.decodeAudioData (undecodedAudio, funcție (tampon) // Conținutul mp3-ului nostru este acum un consola.log (buffer);)); ;

Odată ce avem un AudioBuffer care ține datele noastre audio, trebuie să găsim o modalitate de ao juca. Nu puteți reda direct un AudioBuffer - trebuie să fie încărcat într-un mod special AudioBufferSourceNode. Acest nod este ca un jucător de înregistrare, în timp ce tamponul este recordul de vinil cu muzica pe el. Sau pentru a aduce analogia mea la zi, nodul este ca un pachet de casete și tamponul este o casetă ...

request.onload = funcția () var undecodedAudio = request.response; context.decodeAudioData (undecodedAudio, funcție (tampon) // Creați AudioBufferSourceNode var sourceBuffer = context.createBufferSource (); // Spuneți AudioBufferSourceNode pentru a utiliza acest AudioBuffer sourceBuffer.buffer = buffer;); ;

Recordul este acum pe player-ul de înregistrare gata de a juca. Dar rețineți că folosim Web Audio API și că API-ul Web Audio necesită conectarea nodurilor împreună pentru a trimite sunetul către difuzoarele noastre. Deci, să facem ceea ce am făcut anterior cu oscilatorul nostru și să conectăm nodul sursă la difuzoarele noastre (context.destination).

request.onload = funcția () var undecodedAudio = request.response; context.decodeAudioData (undecodedAudio, funcție (tampon) var sourceBuffer = context.createBufferSource (); sourceBuffer.buffer = buffer; sourceBuffer.connect (context.destination);); ;

Din nou, acum că totul este conectat, putem începe să jucăm cu ușurință conținutul mp3-ului spunând că AudioBufferSourceNode va juca chiar în acest moment. 

sourceBuffer.start (context.currentTime);

Frumos!

rezumat

În acest tutorial am învățat cum să folosim Web Audio API pentru a crea un sunet nativ în browser, precum și cum să încărcați și să redați un fișier mp3. API-ul este capabil de mult mai mult și aștept cu nerăbdare să vă arăt potențialul său în viitoarele tutoriale.

Tot codul din acest tutorial este disponibil pe GitHub.

* Aplicația Web Audio API din păcate nu suportă în prezent dinții de albire sau îmbunătățirea posturii.