Kom i gang med Web Audio API

Innhold

• HTML-lyd
• Web Audio API
• Hvordan bruke Web Audio API
• 01. Initialiser lydkonteksten
• 02. Koble til lydgrafen
• 03. Laster inn lyder
• 04. Spille av lyder
• 05. Sette det hele sammen
• Web Audio API AnalyserNode
• Finn mer på Web Audio API

I økende grad utforsker webdesignere kraftlyden som et webdesignverktøy (lær mer om hvordan lyddesign transformerer UX her). Mellom HTML-lyd og Web Audio API er det enkelt å begynne å legge til lyd i prosjektene dine. De lyd> elementet lar deg inkludere plugin-fri lyd på nettstedet ditt, men det er fortsatt begrenset.

For maksimal lydkontroll lar Web Audio API deg generere lyder, spille av eksisterende (holde lydfilene dine trygge i skylagring), lage effekter og mye mer. I denne artikkelen vil vi se nærmere på hvordan hver av disse fungerer, og forklare hvordan du bruker dem til å legge til lyd i prosjektene dine.

For flere fantastiske APIer å utforske, ta en titt på guidene våre til de beste JavaScript APIene, HTML APIene og Google APIene. Eller hvis du vil ha en enklere prosess, bruk et verktøy for nettstedsbyggere og den perfekte leverandøren av webhotell.

HTML-lyd

HTML lyd> tag kan du legge inn musikk på nettsteder og apper. I likhet med video> kan du angi en kildefil, kontroller og flere andre alternativer. Dette lar deg enkelt legge til lyd på siden din med minimal kode. Du kan deretter målrette elementet via JavaScript for å gi ytterligere kontroll. Den støtter MP3, WAV, OGG og andre formater, med MP3 som støttes universelt i moderne nettlesere og enheter.

La oss se på et enkelt eksempel på bruk av lyd> stikkord.

audio autoplay = "autoplay" controls = "controls"> source src = "music.ogg" /> source src = "music.mp3" /> / audio>

Noen nyttige egenskaper som er spesifikke for dette elementet inkluderer:

• Auto spill - For å la lyden spille når den er klar
• Kontroller - Kontroller for lydfilen vil bli inkludert på siden
• Løkke - Hvis denne er inkludert, vil lyden løkke og spille av igjen når den er ferdig
• Forhåndslast - Last inn lyden når det er mulig, så det er klart for avspilling

Imidlertid har det også noen begrensninger. Det er en lav grense for antall lyder som kan spilles samtidig, ingen presis timingkontroll, det er ikke mulig å bruke sanntidseffekter, og det er ingen måte å analysere lyder på. Det er her Web Audio API kan spille inn.

Web Audio API

Web Audio API er et kraftig system for å kontrollere lyd på nettet. Den kan brukes til å aktivere lydkilder, legger til effekter, lager lydvisualiseringer og mer.

Denne API-en administrerer operasjoner i en lydkontekst. Audiooperasjoner utføres med lydnoder, som er koblet sammen for å danne en Audio Routing Graph. Flere kilder støttes i en enkelt lydkontekst. Denne modulære designen er svært fleksibel, slik at du kan lage komplekse lyddesigner.

Lydnoder er koblet til kjeder og enkle nett av deres innganger og utganger. De starter vanligvis med en eller flere kilder. Nodeutganger kan kobles til innganger fra andre som skaper kjeder eller nett av lydstrømmer. En vanlig effekt er å multiplisere lyden med en verdi for å gjøre den høyere eller roligere ved hjelp av GainNode.

Når lyden er utført og er klar for utgang, kan den kobles til inngangen til en AudioContext.destination, som sender lyden til høyttalerne. Merk at denne siste tilkoblingen bare kreves hvis du trenger at lyden skal høres.

En typisk flyt for Web Audio kan se slik ut:

• Lag lydkontekst
• Lag kilder i konteksten (f.eks. lyd>, oscillator, streams)
• Opprett effektnoder (f.eks. Reverb, flanger, panner, komprimering)
• Velg et mål for lyden (f.eks. Høyttalere)
• Koble kildene til effektene og effektene til destinasjonen

Hvordan bruke Web Audio API

La oss se på hvordan du kan bruke Web Audio API i et prosjekt. I dette eksemplet laster du inn og spiller av en lydfil ved hjelp av API.

01. Initialiser lydkonteksten

For å starte må vi sette opp Audio Context, et lydduk for lydene våre. Denne metoden sikrer maksimal støtte og tilbakeføring på tvers av nettlesere i tilfelle API ikke støttes.

prøv window.webkitAudioContext; audioCtx = ny AudioContext (); catch (e) {alert (‘Web Audio API støttes ikke i denne nettleseren’); }

En enkelt lydkontekst støtter flere lydinnganger og komplekse lydgrafier, slik at du bare trenger en for hvert lydprogram vi lager.

02. Koble til lydgrafen

Alle lydnoders utganger kan kobles til andre lydnoders innganger ved hjelp av koble() funksjon. I dette eksemplet vil du koble en kildekodes utgang til en forsterkningsnode, og koble forsterkningsnodens utgang til kontekstens destinasjon:

// Opprett kilden. var kilde = context.createBufferSource (); // Opprett forsterkningsnoden. var gevinst = context.createGain (); // Koble kilde til filter, filtrer til destinasjon. source.connect (gevinst); gain.connect (kontekst. destinasjon);

Denne lydgrafikken er nå dynamisk, noe som betyr at du kan endre den når du trenger det. Du kan koble lydnoder fra grafen ved å ringe node.disconnect (outputNumber). Styrken til denne modulære tilnærmingen lar deg kontrollere forsterkning (volum) for alle lyder, eller de du ønsker. Du kan dirigere lyder gjennom effekter eller ikke i det hele tatt, eller i en hvilken som helst kombinasjon du måtte trenge.

03. Laster inn lyder

For å laste en lydfil inn i Web Audio API, kan vi bruke en XMLHttpRequest og behandle resultatene med context.decodeAudioData. Dette fungerer asynkront og blokkerer ikke hovedgrensesnitttråden. Slik ser koden ut:

var forespørsel = ny XMLHttpRequest (); request.open (‘GET’, url, true); request.responseType = ‘arraybuffer’; request.onload = function () {context.decodeAudioData (request.response, function (theBuffer) {buffer = theBuffer;}, onError); } request.send ();

04. Spille av lyder

Lydbuffere er bare en potensiell lydkilde. Du kan bruke direkte inngang fra en mikrofon eller line-in-enhet eller en lyd> tag blant andre. Når du har lastet bufferen, må du opprette en AudioBufferSourceNode for det, koble kildenoden til lydgrafen din, og ring deretter start (0) på kildekoden. Ring for å stoppe en lyd stopp (0) på kildekoden.

Koden ser slik ut:

funksjon playSound (buffer) {var kilde = context.createBufferSource (); source.buffer = buffer; source.connect (kontekst. destinasjon); source.start (0); }

05. Sette det hele sammen

Som du kan se fra forrige kode, er det litt oppsett for å få lyder til å spille i Web Audio API. Men med denne modulære tilnærmingen får du maksimal kontroll over lyd. Blanding av lyder, lesing av dataene deres via Analyzer Node og så mye mer. Her er hvordan et fungerende eksempel for å laste og spille av lyd ser ut som alle sammen. Vurder å trekke ut disse trinnene for å håndtere flere lyder i større prosjekter også.

var audioCtx, analysator, bufferLength, dataArray; window.addEventListener (‘load’, initAudio, false); funksjon initAudio () {try catch (e) {alert (‘Web Audio API støttes ikke i denne nettleseren’); } // last inn lydfilkilden = audioCtx.createBufferSource (); var forespørsel = ny XMLHttpRequest (); request.open (‘GET’, ‘assets / beat3.mp3’, true); request.responseType = ‘arraybuffer’; request.onload = funksjon () {var audioData = request.response; audioCtx.decodeAudioData (audioData, funksjon (buffer) {source.buffer = buffer; source.connect (analysator); analyser.connect (audioCtx.destination); source.loop = true; source.start (0);}, funksjon ( e) {“Feil ved dekoding av lyddata” + e.err}); } request.send (); }

Web Audio API AnalyserNode

Web Audio API-er AnalyserNode lar deg trekke ut tid, frekvens, bølgeform og andre data fra lyden din. Ved å bruke funksjoner som getByteFrequencyData og sette inn min og maks desimalområder, kan du nullstille spesifikke aspekter av lyddata.

Utover musikksenger, effekter og flott musikk, bruker vi lyd til å også drive visuelt. Ved å gå utover å utfylle eller forbedre det brukeren ser, kan lyddataene faktisk drive animasjonene. Enkle effekter som bruker det generelle nivået (volumet) til et musikkspor, kan få bakgrunnen til å pulsere i takt med et slag. Dønninger i musikalpartituren kan brukes til å endre opasiteten til et bilde eller forandre fargen.

Ved å tappe inn lyddataene via Web Audio API, dykker vi også inn i frekvens- og bølgeformdata. Du kan visualisere lyden i et uendelig antall varianter.

Finn mer på Web Audio API

Vil du finne ut mer? Dette er ressursene du bør sjekke ut.

MDN Web Docs- En grundig titt på API-en med rik dokumentasjon og eksempler. Hvert aspekt av API-et er godt dekket.

W3C- Et depot som inneholder de siste redaktørutkastene til W3C Web Audio API. Dette er kilden der standardene presenteres.

Introduksjon til Web Audio API- En god introduksjon til å bruke API for å lage lyder av Greg Hovanesyan. Lag et musikkspesifikt program ved hjelp av oscillatorlydkilden.

Web Audio Weekly- En samling av nyheter, historier og demoer alt om Web Audio API. Dekker et bredt spekter av emner og eksempler for å holde deg lærende.

Denne artikkelen ble opprinnelig publisert i kreativt nummer 275 av Magasinet Web Designer. Kjøp utgave 275 eller abonnere.