Web Audio API Vad är det?

Oroa dig inte, det är här! Ett API som inte bara tänder dina tänder och förbättrar din hållning, men lägger till ljud på din webbplats på ett underbart sätt *. Det är Web Audio API! Har aldrig hört talas om det? Oroa dig inte. Denna handledning kommer att få dig igång på nolltid.

Web Audio API är ett sätt på hög nivå att skapa och manipulera ljud direkt i webbläsaren via JavaScript. Det låter dig antingen generera ljud från början eller ladda och manipulera någon befintlig ljudfil du kanske har. Det är extremt kraftfullt, även med sitt eget tidssystem för att ge uppspelning i sekundär sekunder.

"Kan jag inte bara använda element? "Jo, men det beror verkligen på vad ditt användarfall är. De elementet är perfekt för inbäddning och spelning av ljudklipp som musik eller podcaster, men om du behöver lite mer kontroll, till exempel programmering av volymen eller lägga till effekter, kommer Web Audio API-programmet att ligga upp till din Tin Pan Alley.

Gör ett ljud

Låt oss dyka rätt in. För att börja spela med API för Web Audio måste vi se till att vi använder en webbläsare som stöder den. Låt oss kolla caniuse.com. Det verkar som om webbläsarsupport är ganska bra. Internet Explorer stöder inte API för tillfället, men det kommer att förändras snart, eftersom det för närvarande implementeras för införlivande i nästa stora utgåva.

Låt oss hålla saker enkelt genom att skapa en grundläggande HTML-sida med en

AudioContext är en liten behållare där allt vårt ljud kommer att leva. Det ger tillgång till Web Audio API, vilket i sin tur ger oss tillgång till några mycket kraftfulla funktioner. Innan vi fortsätter är det dock viktigt att förstå ett viktigt begrepp i Web Audio API: noder.

noder

Låt oss ta den krullhåriga astrofysiker och drottningsgitarristen Brian May som ett exempel. När Brian vill spela sin gitarr tar han ledningen från gitarr och kopplar den till en effektpedal som en distorsionspedal. Han ansluter sedan en annan ledning från sin distorsionspedal till någon annan effekt eller till sin förstärkare. Detta låter ljudet resa från sin gitarr, bli manipulerad och sedan utmatas till en högtalare så att folk kan höra hans rockriffor. Så här fungerar Web Audio API. Ljudet överförs från en nod till nästa, som manipuleras när den går, innan den äntligen utmatas till dina högtalare.


Här är ett grundläggande exempel. Lägg till följande i din > märka.

var context = new AudioContext (), oscillator = context.createOscillator (); // Anslut oscillatorn till våra högtalare oscillator.connect (context.destination);

Här har vi skapat en oscillator. En oscillator är en typ av ljudgenerator som ger oss en enkel ton. Vi har tagit ledningen från oscillatorn och anslutit den till våra högtalare, annars kändes i webbljud som context.destination.

Nu när allt är anslutet, behöver vi bara starta oscillatorn så att vi kan höra det. Se till att högtalarna inte är uppåtför höga!

// Starta oscillatorn nu oscillator.start (context.currentTime);

Du bör nu höra något när din sida laddas. För att stoppa din oscillator spelar efter några sekunder, lägg bara till följande.

// Stäng oscillatorn 3 sekunder från nu oscillator.stop (context.currentTime + 3);

Hör något? Bra gjort, du har just gjort ljud i webbläsaren!

Ljudfiler

Nu kanske du tänker "Oscillatorer ?! Jag har inte tid för det här, jag är en viktig affärsman med massor av affärsmöten och affärsluncher att gå till! ", Vilket är helt ok. Att göra ljud på detta sätt är inte för alla. Lyckligtvis finns det ett annat sätt.

Låt oss säga i stället att du vill spela en vanlig körning av mill mp3-filen. Web Audio API kan också göra detta. Först måste vi ladda in ljudfilen via vår gamla vän XMLHttpRequest. Kom ihåg att när du laddar filer med den här metoden måste din sida serveras via en server och inte bara laddas från ditt lokala filsystem. För att undvika komplikationer, se till att din mp3-fil serveras på samma sätt och från samma plats.

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

När ljudfilen är fullt laddad av webbläsaren, onload händelsen brinner och returnerar ljuddata i svarattributet. Vid denna tidpunkt lagras den som en ArrayBuffer, men för att få ljuddata ut ur den måste vi konvertera den till en AudioBuffer. Tänk på en AudioBuffer som en liten behållare som håller våra ljuddata i minnet för oss. För att göra detta använder vi decodeAudioData fungera.

request.onload = function () var undecodedAudio = request.response; context.decodeAudioData (undecodedAudio, funktion (buffert) // Innehållet i vår mp3 är nu en AudioBuffer console.log (buffert);); ;

När vi har fått en AudioBuffer med våra ljuddata behöver vi hitta ett sätt att spela det. Du kan inte spela en AudioBuffer direkt - den måste laddas i en speciell AudioBufferSourceNode. Denna nod är som en skivspelare, medan bufferten är vinylplattan med musiken på den. Eller för att få min analogi uppdaterad, är noden som ett bandspel och bufferten är en kassett ...

request.onload = function () var undecodedAudio = request.response; context.decodeAudioData (undecodedAudio, funktion (buffert) // Skapa AudioBufferSourceNode var sourceBuffer = context.createBufferSource (); // Berätta AudioBufferSourceNode för att använda denna AudioBuffer. sourceBuffer.buffer = buffer;); ;

Skivan är nu på skivspelaren redo att spela. Men kom ihåg att vi använder Web Audio API och Web Audio API kräver att vi kopplar samman knutar tillsammans för att skicka ljudet till våra högtalare. Så låt oss bara göra vad vi gjorde tidigare med vår oscillator och koppla vår källkod till våra högtalare (context.destination).

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

Återigen, nu när allt är anslutet, kan vi enkelt börja spela innehållet i mp3en genom att berätta för AudioBufferSourceNode att spela just nu. 

sourceBuffer.start (context.currentTime);

Skön!

Sammanfattning

I den här handledningen har vi lärt oss hur du använder Web Audio API för att skapa ett ljud som är native i webbläsaren, liksom hur du laddar och spelar en mp3-fil. API: n kan mycket mer, och jag ser fram emot att visa dig sin potential i framtida handledning.

Alla koden från denna handledning finns på GitHub.

* Web Audio API stöder för närvarande inte blekningständer eller förbättrar hållning.