Die Web-Audio-API Was ist das?

Mach dir keine Sorgen, es ist hier! Eine API, die nicht nur Ihre Zähne aufhellt und Ihre Haltung verbessert, sondern Ihrer Website auf wunderbare Weise einen Sound verleiht *. Es ist die Web-Audio-API! Noch nie davon gehört? Mach dir keine Sorgen. Dieses Tutorial wird Sie in kürzester Zeit zum Laufen bringen.

Die Web-Audio-API ist eine übergeordnete Methode zum Erstellen und Bearbeiten von Sound direkt im Browser über JavaScript. Sie können entweder Audio von Grund auf generieren oder vorhandene Audiodateien laden und bearbeiten. Es ist extrem leistungsfähig und verfügt sogar über ein eigenes Timing-System, um Sekundenbruchteil zu ermöglichen.

„Kann ich nicht einfach das benutzen? element? ”Nun, ja, aber es hängt wirklich davon ab, was Ihr Anwendungsfall ist. Das element eignet sich hervorragend zum Einbetten und Wiedergeben von Audioclips wie Musik oder Podcasts. Wenn Sie jedoch etwas mehr Kontrolle benötigen, beispielsweise die programmgesteuerte Steuerung der Lautstärke oder das Hinzufügen von Effekten, ist die Web-Audio-API in Ihrer Tin Pan Alley genau richtig.

Mach ein Geräusch

Lassen Sie uns gleich eintauchen. Um mit der Web-Audio-API zu spielen, müssen wir sicherstellen, dass wir einen Browser verwenden, der dies unterstützt. Schauen wir uns caniuse.com an. Sieht aus, als wäre die Browser-Unterstützung ziemlich gut - nur Internet Explorer unterstützt die API derzeit nicht, aber das wird sich bald ändern, da es derzeit für die Aufnahme in die nächste Hauptversion implementiert wird.

Lassen Sie uns die Dinge einfach halten, indem Sie mit a eine einfache HTML-Seite erstellen

Der AudioContext ist ein kleiner Container, in dem all unser Sound leben wird. Es bietet Zugriff auf die Web-Audio-API, wodurch wir auf einige sehr leistungsfähige Funktionen zugreifen können. Bevor wir jedoch fortfahren, ist es wichtig, ein wichtiges Konzept der Web-Audio-API zu verstehen: Knoten.

Knoten

Nehmen wir als Beispiel den gelockten Astrophysiker und Queen-Gitarristen Brian May. Wenn Brian seine Gitarre spielen möchte, übernimmt er eine Spur von seiner Gitarre und verbindet sie mit einem Effektpedal wie einem Verzerrungspedal. Er verbindet dann eine weitere Leitung von seinem Verzerrungspedal mit einem anderen Effekt oder mit seinem Verstärker. Dadurch kann der Sound von seiner Gitarre aus weitergeleitet, manipuliert und an einen Lautsprecher ausgegeben werden, damit die Leute seine Rock-Riffs hören können. Genau so funktioniert die Web Audio API. Der Ton wird von einem Knoten zum nächsten weitergeleitet und dabei manipuliert, bevor er schließlich an Ihre Lautsprecher ausgegeben wird.


Hier ist ein grundlegendes Beispiel. Fügen Sie Folgendes zu Ihrem hinzu > Etikett.

var context = new AudioContext (), Oszillator = context.createOscillator (); // Verbinden Sie den Oszillator mit unseren Lautsprechern. Oszillator.connect (context.destination);

Hier haben wir einen Oszillator geschaffen. Ein Oszillator ist eine Art Soundgenerator, der einen einfachen Ton liefert. Wir haben eine Leitung vom Oszillator genommen und mit unseren Lautsprechern verbunden, die sonst in Web Audio Land als bekannt sind Kontext.destination.

Nun, da alles miteinander verbunden ist, müssen wir den Oszillator nur starten, um ihn hören zu können. Vergewissern Sie sich, dass Ihre Lautsprecher nicht zu laut sind!

// Jetzt den Oszillator starten oszillator.start (context.currentTime);

Sie sollten jetzt etwas hören, wenn Ihre Seite geladen wird. Um den Oszillator nach einigen Sekunden zu stoppen, fügen Sie einfach Folgendes hinzu.

// Stoppen Sie den Oszillator in 3 Sekunden. Oszillator.stop (context.currentTime + 3);

Etwas hören Gut gemacht, Sie haben gerade im Browser einen Ton erzeugt!

Audiodateien

Nun denkst du vielleicht “Oszillatoren ?! Ich habe keine Zeit dafür, ich bin eine wichtige Geschäftsperson mit vielen Geschäftstreffen und Geschäftsessen, an die ich mich wenden kann! ”, Was absolut in Ordnung ist. Sound auf diese Weise zu erzeugen, ist nicht jedermanns Sache. Zum Glück gibt es einen anderen Weg.

Angenommen, Sie möchten einen normalen Lauf der Mühlen-MP3-Datei abspielen. Das Web Audio API kann dies auch tun. Zuerst müssen wir die Audiodatei über unseren alten Freund XMLHttpRequest laden. Beachten Sie, dass beim Laden von Dateien mit dieser Methode Ihre Seite über einen Server bereitgestellt werden muss und nicht nur von Ihrem lokalen Dateisystem geladen werden muss. Um Komplikationen zu vermeiden, stellen Sie sicher, dass Ihre MP3-Datei auf dieselbe Weise und von demselben Speicherort aus bedient wird.

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

Wenn die Audiodatei vom Browser vollständig geladen wurde, wird die onload Das Ereignis wird ausgelöst und gibt die Audiodaten im Antwortattribut zurück. An diesem Punkt werden sie als ArrayBuffer gespeichert, aber um die Audiodaten daraus zu erhalten, müssen wir sie in einen AudioBuffer konvertieren. Stellen Sie sich einen AudioBuffer als einen kleinen Container vor, der unsere Audiodaten für uns speichert. Dazu verwenden wir die decodeAudioData Funktion.

request.onload = function () var undecodedAudio = request.response; context.decodeAudioData (undecodedAudio, Funktion (Puffer) // Der Inhalt unserer MP3-Datei ist jetzt ein AudioBuffer. console.log (Puffer);); ;

Sobald wir einen AudioBuffer mit unseren Audiodaten haben, müssen wir einen Weg finden, sie abzuspielen. Sie können einen AudioBuffer nicht direkt abspielen, er muss in ein Special geladen werden AudioBufferSourceNode. Dieser Knoten ist wie ein Plattenspieler, während der Puffer die Schallplatte mit der Musik ist. Oder um meine Analogie auf den neuesten Stand zu bringen: Der Knoten ist wie ein Kassettendeck und der Puffer ist eine Kassette…

request.onload = function () var undecodedAudio = request.response; context.decodeAudioData (undecodedAudio, Funktion (Puffer) // Erzeuge den AudioBufferSourceNode var varBuffer = context.createBufferSource (); // weist den AudioBufferSourceNode an, diesen AudioBuffer zu verwenden. sourceBuffer.buffer = buffer;); ;

Die Platte ist jetzt auf dem Plattenspieler spielbereit. Denken Sie jedoch daran, dass wir die Web-Audio-API verwenden. Für die Web-Audio-API müssen wir Knoten miteinander verbinden, um den Sound an unsere Lautsprecher zu senden. Machen wir also einfach das, was wir zuvor mit unserem Oszillator gemacht haben, und verbinden Sie den Quellknoten mit unseren Lautsprechern (Kontext.destination).

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

Jetzt, da alles verbunden ist, können wir leicht den Inhalt des MP3s abspielen, indem wir den AudioBufferSourceNode anweisen, zu diesem Zeitpunkt zu spielen. 

sourceBuffer.start (context.currentTime);

Wunderschönen!

Zusammenfassung

In diesem Lernprogramm haben wir gelernt, wie Sie mit der Web-Audio-API einen Sound nativ im Browser erzeugen und eine MP3-Datei laden und abspielen können. Die API kann noch viel mehr, und ich freue mich darauf, Ihnen in zukünftigen Tutorials ihr Potenzial zu zeigen.

Der gesamte Code aus diesem Tutorial ist auf GitHub verfügbar.

* Die Web-Audio-API unterstützt derzeit leider keine Zahnaufhellung oder Verbesserung der Körperhaltung.