Web Audio API Hva er det?

Ikke bekymre deg, det er her! En API som ikke bare tenner tennene dine og forbedrer stillingen din, men vil legge lyd til nettstedet ditt på en fantastisk måte *. Det er Web Audio API! Aldri hørt om det? Ikke bekymre deg. Denne opplæringen vil få deg i gang på kort tid.

Web Audio API er en høy måte å skape og manipulere lyd direkte i nettleseren via JavaScript. Det lar deg enten generere lyd fra grunnen eller laste og manipulere en eksisterende lydfil du måtte ha. Det er ekstremt kraftig, selv med sitt eget timingsystem for å gi avspilling i andre sekunder.

"Kan jeg ikke bare bruke element? "Vel, ja, men det avhenger virkelig av hva din brukstilstand er. De elementet er perfekt for å bygge inn og spille av lydklipp som musikk eller podcaster, men hvis du trenger litt mer kontroll, for eksempel programmatisk kontroll av volum eller legge til effekter, vil Web Audio API rett opp din Tin Pan Alley.

Lag en lyd

La oss dykke rett inn. For å begynne å spille med Web Audio API må vi sørge for at vi bruker en nettleser som støtter den. La oss sjekke caniuse.com. Ser ut som nettleserstøtte er ganske bra bare Internet Explorer støtter ikke API-en for øyeblikket, men det vil forandre seg snart, da det for tiden blir implementert for inkludering i neste store utgivelse.

La oss holde ting enkelt ved å lage en grunnleggende HTML-side med en

AudioContext er en liten container der all lyden vår vil leve. Det gir tilgang til Web Audio API, som igjen gir oss tilgang til noen svært kraftige funksjoner. Før vi fortsetter, er det imidlertid viktig å forstå et viktig konsept av Web Audio API: noder.

noder

La oss ta den krøllete astrofysiker og dronninggitaristen Brian May som et eksempel. Når Brian ønsker å spille gitaren, tar han ledelsen fra gitaren og kobler den til en effektpedal som en forvrengningspedal. Han kobler deretter en annen ledning fra forvrengningspedalen til en annen effekt eller til forsterkeren. Dette gjør at lyden kan reise fra gitaren, bli manipulert, og deretter sendes ut til en høyttaler slik at folk kan høre hans rockriffs. Dette er akkurat slik Web Audio API fungerer. Lyden sendes fra en knutepunkt til den neste, blir manipulert etter hvert som den går, før den endelig sendes til høyttalerne dine.


Her er et grunnleggende eksempel. Legg til følgende i din > stikkord.

var context = new AudioContext (), oscillator = context.createOscillator (); // Koble oscillatoren til våre høyttalere oscillator.connect (context.destination);

Her har vi laget en oscillator. En oscillator er en type lydgenerator som gir oss en enkel tone. Vi har tatt ledelsen fra oscillatoren og koblet den til høyttalerne våre, ellers kjent i web lydland som context.destination.

Nå som alt er tilkoblet, trenger vi bare å starte oscillatoren slik at vi kan høre det. Pass på at høyttalerne ikke er skrudd for høyt!

// Start oscillatoren nå oscillator.start (context.currentTime);

Du bør nå høre noe når siden lastes. For å stoppe oscillatoren din etter noen sekunder, legg til du bare følgende.

// Stopp oscillatoren 3 sekunder fra nå oscillator.stop (context.currentTime + 3);

Hør noe? Godt gjort, du har nettopp laget lyd i nettleseren!

Lydfiler

Nå kan du tenke "Oscillators ?! Jeg har ikke tid til dette, jeg er en viktig forretningsmann med mange forretningsmøter og forretningslunsjer å gå til! ", Som er helt ok. Å lage lyd på denne måten er ikke for alle. Heldigvis er det en annen måte.

La oss si i stedet at du vil spille en vanlig runde av mill mp3-filen. Web Audio API kan også gjøre dette. Først må vi laste inn lydfilen via vår gamle venn XMLHttpRequest. Husk at når du laster inn filer ved hjelp av denne metoden, må siden din bli servert via en server og ikke bare lastet fra ditt lokale filsystem. For å unngå komplikasjoner må du kontrollere at mp3-filen din blir servert på samme måte og fra samme sted.

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

Når lydfilen er fullstendig lastet av nettleseren, vil på Last Hendelsen brenner og returnerer lyddataene i svarattributtet. På dette punktet er det lagret som en ArrayBuffer, men for å få lyddataene ut av det, må vi konvertere det til en AudioBuffer. Tenk på en AudioBuffer som en liten beholder som holder våre lyddata i minnet for oss. For å gjøre dette bruker vi decodeAudioData funksjon.

request.onload = function () var undecodedAudio = request.response; context.decodeAudioData (undecodedAudio, funksjon (buffer) // Innholdet i vår mp3 er nå en AudioBuffer console.log (buffer);); ;

Når vi har en AudioBuffer som holder lyddataene våre, må vi finne en måte å spille på. Du kan ikke spille en AudioBuffer direkte - den må lastes inn i en spesiell AudioBufferSourceNode. Denne noden er som en platespiller, mens bufferen er vinylopptaket med musikken på den. Eller for å bringe analogien min oppdatert, er noden som et kassettkort og bufferen er en kassett ...

request.onload = function () var undecodedAudio = request.response; context.decodeAudioData (undecodedAudio, funksjon (buffer) // Opprett AudioBufferSourceNode var sourceBuffer = context.createBufferSource (); // Fortell AudioBufferSourceNode å bruke denne AudioBuffer. sourceBuffer.buffer = buffer;); ;

Platen er nå på platespilleren klar til å spille. Men husk, vi bruker Web Audio API, og Web Audio API krever at vi knytter knuter sammen for å kunne sende lyden til våre høyttalere. Så la oss bare gjøre det vi gjorde tidligere med oscillatoren vår, og koble kildekoden til våre høyttalere (context.destination).

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

Igjen, nå at alt er koblet, kan vi enkelt begynne å spille innholdet i mp3en ved å fortelle AudioBufferSourceNode å spille akkurat nå. 

sourceBuffer.start (context.currentTime);

Vakker!

Sammendrag

I denne opplæringen har vi lært hvordan du bruker Web Audio API for å lage en lyd innfødt i nettleseren, samt hvordan du laster og spiller en mp3-fil. API-en er i stand til mye mer, og jeg gleder meg til å vise deg sitt potensial i fremtidige opplæringsprogrammer.

Alle koden fra denne opplæringen er tilgjengelig på GitHub.

* Web Audio API støtter foreløpig ikke hvittende tenner eller forbedrer stillingen.