De Web Audio API wat is het?

Maak je geen zorgen, het is hier! Een API die niet alleen uw tanden witter maakt en uw houding verbetert, maar ook op een geweldige manier geluid toevoegt aan uw website *. Het is de Web Audio API! Nooit van gehoord? Maak je geen zorgen. Met deze zelfstudie kunt u snel aan de slag.

De Web Audio API is een hoogwaardige manier om geluid rechtstreeks in de browser te creëren en te manipuleren via JavaScript. Hiermee kun je ofwel audio vanuit het niets genereren, of een bestaand audiobestand dat je hebt, laden en manipuleren. Het is buitengewoon krachtig, zelfs met een eigen timingsysteem om in twee seconden te kunnen worden afgespeeld.

"Kan ik niet gewoon het element? "Wel, ja, maar het hangt echt af van wat uw use-case is. De element is perfect voor het insluiten en afspelen van audioclips zoals muziek of podcasts, maar als je wat meer controle nodig hebt, zoals het programmatisch regelen van het volume of het toevoegen van effecten, dan is de Web Audio API helemaal in je Tin Pan Alley.

Maak een geluid

Laten we meteen beginnen met duiken. Om te beginnen met spelen met de Web Audio API, moeten we zeker weten dat we een browser gebruiken die dit ondersteunt. Laten we caniuse.com controleren. Lijkt erop dat browserondersteuning redelijk goed is - alleen Internet Explorer biedt momenteel geen ondersteuning voor de API, maar dat zal binnenkort veranderen, omdat het momenteel wordt geïmplementeerd voor opname in de volgende grote release.

Laten we de dingen eenvoudig houden door een eenvoudige HTML-pagina te maken met een

De AudioContext is een kleine container waar al ons geluid zal leven. Het biedt toegang tot de Web Audio API, die ons op zijn beurt toegang geeft tot een aantal zeer krachtige functies. Voordat we verder gaan, is het echter essentieel om een ​​belangrijk concept van de Web Audio API te begrijpen: knooppunten.

knooppunten

Laten we de curly-haired astrofysicus en gitarist Brian May als voorbeeld nemen. Wanneer Brian zijn gitaar wil spelen, neemt hij de leiding van zijn gitaar en verbindt deze met een effectpedaal zoals een distortionpedaal. Hij verbindt vervolgens een andere lead van zijn distortion-pedaal met een ander effect of met zijn versterker. Hierdoor kan geluid van zijn gitaar reizen, gemanipuleerd worden en vervolgens worden uitgevoerd naar een luidspreker zodat mensen zijn rockriffs kunnen horen. Dit is precies hoe de Web Audio API werkt. Geluid wordt doorgegeven van het ene knooppunt naar het volgende, terwijl het wordt gemanipuleerd voordat het uiteindelijk wordt uitgevoerd naar uw luidsprekers.


Hier is een eenvoudig voorbeeld. Voeg het volgende toe aan uw > label.

var context = new AudioContext (), oscillator = context.createOscillator (); // Sluit de oscillator aan op onze speakers oscillator.connect (context.destination);

Hier hebben we een oscillator gemaakt. Een oscillator is een soort geluidsgenerator die ons een eenvoudige toon zal geven. We hebben de leiding genomen van de oscillator en verbonden met onze luidsprekers, ook wel bekend in web-audio-land als context.destination.

Nu alles met elkaar verbonden is, hoeven we alleen maar de oscillator te starten, zodat we het kunnen horen. Zorg ervoor dat uw luidsprekers niet te luid staan!

// Start de oscillator nu oscillator.start (context.currentTime);

Je hoort nu iets wanneer je pagina wordt geladen. Om na enkele seconden uw oscillator te laten spelen, voegt u gewoon het volgende toe.

// Stop de oscillator 3 seconden vanaf nu oscillator.stop (context.currentTime + 3);

Hoor je iets? Goed gedaan, je hebt net geluid gemaakt in de browser!

Geluidsbestanden

Nu denk je misschien "Oscillators ?!" Ik heb hier geen tijd voor, ik ben een belangrijke zakenman met veel zakelijke bijeenkomsten en zakelijke lunches om naar toe te gaan! ", Wat perfect in orde is. Op deze manier geluid maken is niet voor iedereen. Gelukkig is er een andere manier.

Laten we zeggen dat je in plaats daarvan een gewoon mp3-bestand wilt afspelen. De Web Audio API kan dit ook doen. Eerst moeten we het audiobestand laden via onze oude vriend XMLHttpRequest. Onthoud dat bij het laden van bestanden met deze methode, uw pagina via een server moet worden bediend en niet alleen vanaf uw lokale bestandssysteem moet worden geladen. Om complicaties te voorkomen, moet je ervoor zorgen dat je mp3-bestand op dezelfde manier en vanaf dezelfde locatie wordt bediend.

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

Wanneer het audiobestand volledig door de browser is geladen, wordt het onload event ontsteekt en retourneert de audiogegevens in het antwoordkenmerk. Op dit punt wordt het opgeslagen als een ArrayBuffer, maar om de audiogegevens eruit te krijgen, moeten we het naar een AudioBuffer converteren. Beschouw een AudioBuffer als een kleine container waarin onze audiogegevens voor ons in het geheugen worden bewaard. Om dit te doen gebruiken we de decodeAudioData functie.

request.onload = function () var undecodedAudio = request.response; context.decodeAudioData (undecodedAudio, functie (buffer) // De inhoud van onze mp3 is nu een AudioBuffer console.log (buffer);); ;

Zodra we een AudioBuffer hebben die onze audiogegevens bevat, moeten we een manier vinden om deze af te spelen. Je kunt een AudioBuffer niet rechtstreeks spelen - het moet in een special worden geladen AudioBufferSourceNode. Dit knooppunt is als een platenspeler, terwijl de buffer de vinylplaat is met de muziek erop. Of om mijn analogie up-to-date te houden, het knooppunt lijkt op een cassettedeck en de buffer is een cassette ...

request.onload = function () var undecodedAudio = request.response; context.decodeAudioData (undecodedAudio, functie (buffer) // Maak de AudioBufferSourceNode var sourceBuffer = context.createBufferSource (); // Vertel de AudioBufferSourceNode om deze AudioBuffer te gebruiken. sourceBuffer.buffer = buffer;); ;

Het record staat nu op de platenspeler en is klaar om te spelen. Maar denk eraan, we gebruiken de Web Audio API en de Web Audio API vereist dat we knooppunten aan elkaar koppelen om het geluid naar onze luidsprekers te sturen. Dus laten we gewoon doen wat we eerder deden met onze oscillator en onze bronknoop verbinden met onze luidsprekers (context.destination).

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

Nogmaals, nu alles met elkaar is verbonden, kunnen we gemakkelijk de inhoud van de mp3 beginnen te spelen door de AudioBufferSourceNode op dit moment in de tijd te laten spelen. 

sourceBuffer.start (context.currentTime);

Mooi!

Samenvatting

In deze zelfstudie hebben we geleerd hoe we de Web Audio API kunnen gebruiken om een ​​geluid native in de browser te maken, evenals hoe een mp3-bestand kan worden geladen en afgespeeld. De API is veel meer in staat, en ik zie ernaar uit u in toekomstige zelfstudies het potentieel ervan te tonen.

Alle code van deze tutorial is beschikbaar op GitHub.

* De Web Audio API ondersteunt helaas momenteel niet het bleken van tanden of het verbeteren van de houding.