Përmbajtje
- Audio HTML
- Web Audio API
- Si të përdorni Web Audio API
- 01. Filloni kontekstin e audios
- 02. Lidhni Grafikun Audio
- 03. Tingujt e ngarkimit
- 04. Luajtja e tingujve
- 05. Vendosja e të gjitha së bashku
- Nyja e Web Audio API Analyser
- Gjeni më shumë në Web Audio API
Gjithnjë e më shumë, dizenjuesit e internetit po eksplorojnë tingullin e energjisë si një mjet për krijimin e faqes në internet (mësoni më shumë se si dizajni i tingullit po transformon UX këtu). Midis audios HTML dhe Web Audio API, është e lehtë të fillosh të shtosh tinguj në projektet e tua. audio>> elementi ju lejon të përfshini audio pa shtojca në faqen tuaj, por përsëri është e kufizuar.
Për kontroll maksimal të tingullit, Web Audio API ju lejon të gjeneroni tinguj, të luani ato ekzistues (mbani skedarët tuaj të zërit të sigurt në ruajtjen e reve), të krijoni efekte dhe shumë më tepër. Në këtë artikull ne do të hedhim një vështrim më të afërt se si funksionojnë secila prej këtyre dhe do të shpjegojmë se si t'i përdorim ato për të shtuar tinguj në projektet tuaja.
Për të zbuluar më shumë API të mahnitshme, hidhni një vështrim në udhëzuesit tanë për API-të më të mira JavaScript, API-të HTML dhe Google API-të. Ose, nëse doni një proces më të thjeshtë, përdorni një mjet për krijimin e faqeve të internetit dhe ofruesin e përsosur të mbajtjes së faqes në internet.
Audio HTML
HTML-ja audio>> tag ju lejon të vendosni muzikë në faqet e internetit dhe aplikacionet. Ngjashëm me atë video> tag, ju mund të specifikoni një skedar burim, kontrollet dhe disa opsione të tjera. Kjo ju lejon të shtoni me lehtësi audio në faqen tuaj me kod minimal. Ju më pas mund të synoni elementin përmes JavaScript për të dhënë kontroll të mëtejshëm. Ai mbështet MP3, WAV, OGG dhe formate të tjera, me MP3 të mbështetur botërisht në shfletuesit dhe pajisjet moderne.
Le të hedhim një vështrim në një shembull të thjeshtë të përdorimit të audio>> etiketë
luajtje automatike audio = "luajtje automatike" kontrollet = "kontrollet"> burimi src = "music.ogg" /> burimi src = "muzikë.mp3" /> / audio>
Disa atribute të dobishme specifike për këtë element përfshijnë:
- Luaj automatikisht - Për të lejuar që audio të luajë pasi të jetë gati
- Kontrollet - Kontrollet për skedarin audio do të përfshihen në faqe
- Lak - Nëse kjo është e përfshirë, audio do të lakojë dhe do të luajë përsëri pasi të ketë mbaruar
- Preload - Para-ngarkoni audion kur është e mundur në mënyrë që të jetë gati për të luajtur
Megjithatë, ajo gjithashtu ka disa kufizime. Ekziston një kufi i ulët për numrin e tingujve që mund të luhen njëkohësisht, nuk ka kontroll të saktë të kohës, nuk është e mundur të zbatohen efekte në kohë reale dhe nuk ka asnjë mënyrë për të analizuar tingujt. Kjo është ajo ku Web Audio API mund të hyjë në lojë.
Web Audio API
Web Audio API është një sistem i fuqishëm për kontrollimin e audios në ueb. Mund të përdoret për të mundësuar burime audio, shton efekte, krijon vizualizime audio dhe më shumë.
Ky API menaxhon operacionet brenda një Konteksti Audio. Operacionet audio kryhen me nyje audio, të cilat janë të lidhura së bashku për të formuar një Grafik Rutimi Audio. Burime të shumta mbështeten brenda një Konteksti të vetëm Audio. Ky model modular është shumë fleksibël, duke lejuar krijimin e dizenjove komplekse audio.
Nyjet audio janë të lidhura në zinxhirë dhe rrjetë të thjeshtë nga hyrjet dhe daljet e tyre. Ata zakonisht fillojnë me një ose më shumë burime. Daljet e nyjeve mund të lidhen me hyrjet e të tjerëve duke krijuar zinxhirë ose rrjeta të rrymave audio. Një efekt i zakonshëm është shumëzimi i audios me një vlerë për ta bërë atë më të zhurmshëm ose më të qetë duke përdorur GainNode.
Pasi tingulli të jetë kryer dhe të jetë gati për dalje, ai mund të lidhet me hyrjen e një destinacioni AudioContext., i cili dërgon tingullin te altoparlantët. Vini re se kjo lidhje e fundit kërkohet vetëm nëse keni nevojë që audioja të dëgjohet.
Një rrjedhë tipike për Web Audio mund të duket diçka e tillë:
- Krijoni kontekst audio
- Krijoni burime brenda kontekstit (p.sh. audio>>, oshilator, rrjedhat)
- Krijoni nyje efektesh (p.sh. reverb, flanger, panner, compression)
- Zgjidhni një destinacion për audion (p.sh. altoparlantët)
- Lidhni burimet me efektet, dhe efektet me destinacionin
Si të përdorni Web Audio API
Le të hedhim një vështrim se si mund ta përdorni Web Audio API në një projekt. Në këtë shembull do të ngarkoni dhe luani një skedar zanor duke përdorur API.
01. Filloni kontekstin e audios
Për të filluar, ne duhet të konfigurojmë Audio Context, një kanavacë audio për tingujt tanë. Kjo metodë siguron mbështetjen dhe rikthimin maksimal të shfletuesit në rast se API nuk mbështetet.
provoni dritaren.webkitAudioContext; audioCtx = AudioContext i ri (); catch (e) {alert ('API-ja në Web Audio nuk mbështetet në këtë shfletues'); }
Një kontekst i vetëm audio mbështet hyrjet e shumta të tingullit dhe grafikët kompleksë të audios, kështu që ju nevojitet vetëm një për secilin aplikacion audio që krijojmë.
02. Lidhni Grafikun Audio
Dalja e çdo nyje audio mund të lidhet me çdo hyrje tjetër të nyjes audio duke përdorur lidh () funksioni Në këtë shembull do të lidhni daljen e një nyje burimi në një nyje të fitimit dhe do të lidhni prodhimin e nyjes së fitimit në destinacionin e kontekstit:
// Krijoni burimin. var burim = kontekst.createBufferSource (); // Krijoni nyjen e fitimit. fitim var = kontekst.createGain (); // Lidhni burimin në filtër, filtroni në destinacion. burimi.lidhje (fitim); fitim.lidhje (konteksti. destinimi);
Ky grafik audio tani është dinamik, domethënë mund ta ndryshoni sa herë që të keni nevojë. Ju mund të shkëputni nyjet audio nga grafiku duke telefonuar nyja. shkëputja (numri i daljes). Fuqia e kësaj qasje modulare ju lejon të kontrolloni fitimin (volumin) për të gjithë tingujt, ose ata që dëshironi. Ju mund të drejtoni tingujt përmes efekteve ose aspak, ose në ndonjë kombinim që mund t'ju nevojitet.
03. Tingujt e ngarkimit
Për të ngarkuar një skedar audio në Web Audio API, mund të përdorim një Kërkesa XMLHttp dhe përpunoni rezultatet me konteksti.dekodimiAudioData. Kjo funksionon në mënyrë asinkrone dhe nuk bllokon fillin kryesor të ndërfaqes. Ja se si do të dukej kodi:
kërkesë var = kërkesë e re XMLHttp (); kërkesa.hap (‘GET’, url, e vërtetë); kërkesa.responseType = 'arraybuffer'; kërkesa.onload = funksioni () {text.decodeAudioData (kërkesa.përgjigja, funksioni (theBuffer) {buffer = theBuffer;}, onError); } kërkesë. dërgoni ();
04. Luajtja e tingujve
Mbrojtësit e audios janë vetëm një burim i mundshëm i audios. Mund të përdorni hyrjen e drejtpërdrejtë nga një mikrofon ose pajisje lineare ose një audio>> etiketoni ndër të tjera. Pasi të keni ngarkuar buffer-in tuaj, duhet të krijoni një AudioBufferSourceNode për të, lidhni nyjen burimore në grafikun tuaj audio dhe pastaj telefononi fillimi (0) në nyjen burimore. Për të ndaluar një tingull, telefononi ndalim (0) në nyjen burimore.
Kodi duket si ky:
funksioni playSound (buffer) {var burim = kontekst.createBufferSource (); burimi.buffer = buffer; burimi.lidhja (konteksti. destinimi); burimi.filloni (0); }
05. Vendosja e të gjitha së bashku
Siç mund ta shihni nga kodi i mëparshëm, ka pak konfigurim për të marrë tinguj që luhen në Web Audio API. Por, me këtë qasje modulare ju fitoni kontroll maksimal mbi audio. Përzierja e tingujve, leximi i të dhënave të tyre përmes Analyzer Node dhe shumë më tepër. Ja se si duket një shembull pune për të ngarkuar dhe luajtur një tingull të gjithë së bashku. Merrni parasysh abstragimin e këtyre hapave për menaxhimin e tingujve të shumtë edhe në projekte më të mëdha.
var audioCtx, analizues, tampon Gjatësia, dataArray; window.addEventListener ('load', initAudio, false); funksioni initAudio () {provoni kapni (e) {alarm (AP Web Audio API nuk mbështetet në këtë shfletues ’); } // ngarkoni burimin e skedarit audio = audioCtx.createBufferSource (); kërkesë var = kërkesë e re XMLHttp (); kërkesa.apen (‘GET’, ‘asetet / mundi3.mp3’, e vërtetë); kërkesa.responseType = 'arraybuffer'; kërkesë.onload = funksion () {var audioData = kërkesë.përgjigje; audioCtx.decodeAudioData (audioData, funksioni (buffer) {source.buffer = buffer; source.connect (analyzer); analyser.connect (audioCtx.destination); source.loop = true; source.start (0);}, funksioni ( e) {"Gabim në dekodimin e të dhënave audio" + e.err}); } kërkesë. dërgoni (); }
Nyja e Web Audio API Analyser
API-të e Web Audio Analiza e Nyjes ju mundëson të nxjerrni kohën, frekuencën, formën e valës dhe të dhëna të tjera nga audio juaj. Duke përdorur karakteristika si getByteFrequencyData dhe vendosjen e min dhe maks vargjet dhjetore, ju mund të zerosni aspekte specifike të të dhënave audio.
Përtej shtretërve të muzikës, efekteve dhe muzikës së shkëlqyeshme, ne përdorim zërin për të drejtuar gjithashtu pamje. Duke lëvizur përtej plotësimit ose përmirësimit të asaj që përdoruesi shikon, të dhënat audio mund të drejtojnë animacionet. Efektet e thjeshta që përdorin nivelin (vëllimin) e përgjithshëm të një pjese muzikore mund ta bëjnë impulsin e sfondit tuaj në kohë me një ritëm. Ellsnjtjet në rezultatin muzikor mund të përdoren për të ndryshuar perde të një imazhi ose për të zhvendosur ngjyrën e tij.
Duke përgjuar të dhënat audio përmes Web Audio API ne thellohemi në të dhënat e frekuencës dhe formës së valës gjithashtu. Ju mund ta vizualizoni tingullin në një numër të pafund variacionesh.
Gjeni më shumë në Web Audio API
Dëshironi të zbuloni më shumë? Këto janë burimet që duhet të shikoni.
Dokumente Ueb MDN- Një vështrim i thelluar në API me dokumentacion të pasur dhe shembuj. Çdo aspekt i API është i mbuluar mirë.
W3C- Një depo që përmban drafte të redaktorit më të fundit të W3C Web Audio API. Ky është burimi ku paraqiten standardet.
Hyrje në Web Audio API- Një hyrje e mirë për përdorimin e API për të krijuar tinguj nga Greg Hovanesyan. Krijoni një aplikacion specifik për muzikën duke përdorur burimin e audios osciluese.
Java Audio në Web- Një koleksion lajmesh, tregimesh dhe demonstrimesh të tëra rreth Web Audio API. Mbulon një gamë të gjerë temash dhe shembuj për t'ju mbajtur të mësuarit.
Ky artikull u botua fillimisht në numrin krijues 275 të revistës Web Designer. Blini numrin 275 ose pajtohem.
