Verwendung der Web Audio API

Beispielcode

Unsere Boombox sieht so aus:

[Ein Boombox mit Steuerungen fr Wiedergabe, Pan und Lautstrke]

Beachten Sie das Retro-Kassettendeck mit einer Wiedergabetaste und Lautstrke- und Pan-Schiebereglern, um die Lautstrke und Stereoverteilung zu ndern. Wir knnten dies viel komplexer gestalten, aber zu diesem Zeitpunkt ist es ideal fr einfaches Lernen.

Sehen Sie sich das endgltige Demo hier live an oder sehen Sie sich den Quellcode auf GitHub an.

Audiographen

Alles innerhalb der Web Audio API basiert auf dem Konzept eines Audiographen, der aus Knoten besteht.

Die Web Audio API verarbeitet Audiooperationen innerhalb eines Audiokontexts und wurde entwickelt, um modularen Routing zu ermglichen. Grundlegende Audiooperationen werden mit Audioknoten durchgefhrt, die miteinander verbunden sind, um einen Audio-Routing-Graphen zu bilden. Sie haben Eingabeknoten, die die Quelle der Sounds sind, die Sie manipulieren, Modifikationsknoten, die diese Sounds nach Bedarf ndern, und Ausgabeknoten (Ziele), die es Ihnen ermglichen, diese Sounds zu speichern oder zu hren.

Mehrere Audioquellen mit unterschiedlichen Kanal-Layouts werden untersttzt, sogar innerhalb eines einzelnen Kontexts. Aufgrund dieses modularen Designs knnen Sie komplexe Audiofunktionen mit dynamischen Effekten erstellen.

Audiokontext

Um irgendetwas mit der Web Audio API machen zu knnen, mssen wir eine Instanz des Audiokontexts erstellen. Dies gibt uns dann Zugang zu allen Funktionen und Eigenschaften der API.

const audioContext = new AudioContext();

Was passiert also, wenn wir dies tun? Ein BaseAudioContext wird fr uns automatisch erstellt und zu einem Online-Audiokontext erweitert. Das mchten wir, weil wir live Sound abspielen mchten.

Sound laden

Nun, der von uns erstellte Audiokontext bentigt etwas Sound, um ihn abzuspielen. Es gibt mehrere Mglichkeiten, dies mit der API zu tun. Beginnen wir mit einer einfachen Methode - da wir eine Boombox haben, mchten wir hchstwahrscheinlich einen vollstndigen Songtrack abspielen. Auch aus Grnden der Barrierefreiheit ist es schn, diesen Track im DOM offenzulegen. Wir werden den Song auf der Seite mit einem <audio> Element offenlegen.

<audio src="myCoolTrack.mp3"></audio>

Um all die schnen Dinge nutzen zu knnen, die wir mit der Web Audio API erhalten, mssen wir die Quelle aus diesem Element nehmen und in den von uns erstellten Kontext einleiten. Glcklicherweise gibt es eine Methode, die uns genau das ermglicht AudioContext.createMediaElementSource:

// get the audio element
const audioElement = document.querySelector("audio");

// pass it into the audio context
const track = audioContext.createMediaElementSource(audioElement);

Soundsteuerung

Beim Abspielen von Sound im Web ist es wichtig, dem Benutzer die Kontrolle zu ermglichen. Abhngig vom Anwendungsfall gibt es eine Vielzahl von Optionen, aber wir werden die Mglichkeit bieten, den Sound abzuspielen/anzuhalten, die Lautstrke zu ndern und die Stereoposition von links nach rechts zu verschieben.

Das Programmieren von Sound steuern durch JavaScript-Code wird durch die Autoplay-Richtlinien der Browser abgedeckt, wodurch es ohne Erlaubnis des Benutzers oder einer Allowlist blockiert werden kann. Autoplay-Richtlinien erfordern in der Regel entweder eine ausdrckliche Erlaubnis oder ein Benutzerinteraktion mit der Seite, bevor Skripte das Abspielen von Audio auslsen knnen.

Diese speziellen Anforderungen bestehen im Wesentlichen, weil unerwartete Sounds lstig und aufdringlich sein und Barrierefreiheitsprobleme verursachen knnen. Sie knnen mehr darber in unserem Artikel Autoplay-Leitfaden fr Medien und Web Audio APIs erfahren.

Da unsere Skripte Audio als Antwort auf ein Benutzereingabeereignis abspielen (zum Beispiel ein Klick auf einen Wiedergabeknopf), sind wir auf der sicheren Seite und sollten keine Probleme mit der Autoplay-Blockierung haben. Lassen Sie uns also mit der Betrachtung unserer Abspiel- und Pausenfunktionalitt beginnen. Wir haben einen Wiedergabeknopf, der sich in einen Pausenknopf ndert, wenn der Track abgespielt wird:

<button data-playing="false" role="switch" aria-checked="false">
  <span>Play/Pause</span>
</button>

Bevor wir unseren Track abspielen knnen, mssen wir unseren Audiographen vom Audioquelle/Eingabeknoten zum Ziel verbinden.

Wir haben bereits einen Eingabeknoten erstellt, indem wir unser Audioelement in die API eingebracht haben. Meistens mssen Sie keinen Ausgabeknoten erstellen, Sie knnen einfach Ihre anderen Knoten mit BaseAudioContext.destination verbinden, das die Situation fr Sie handhabt:

track.connect(audioContext.destination);

Eine gute Mglichkeit, sich diese Knoten vorzustellen, besteht darin, einen Audiographen zu zeichnen, damit Sie diesen visualisieren knnen. So sieht unser aktueller Audiograph aus:

[Ein Audiograph mit einer Audioquellen-Element und der Verbindung zum Standardziel]

Jetzt knnen wir die Abspiel- und Pausenfunktionalitt hinzufgen.

// Select our play button
const playButton = document.querySelector("button");

playButton.addEventListener("click", () => {
  // Check if context is in suspended state (autoplay policy)
  if (audioContext.state === "suspended") {
    audioContext.resume();
  }

  // Play or pause track depending on state
  if (playButton.dataset.playing === "false") {
    audioElement.play();
    playButton.dataset.playing = "true";
  } else if (playButton.dataset.playing === "true") {
    audioElement.pause();
    playButton.dataset.playing = "false";
  }
});

Wir mssen auch bercksichtigen, was zu tun ist, wenn der Track mit dem Abspielen fertig ist. Unser HTMLMediaElement lst ein ended Ereignis aus, sobald es das Abspielen beendet hat, sodass wir darauf horchen und entsprechend Code ausfhren knnen:

audioElement.addEventListener("ended", () => {
  playButton.dataset.playing = "false";
});

Soundmodifizierung

Lassen Sie uns einige grundlegende Modifikationsknoten betrachten, um den Klang zu verndern, den wir haben. Hier beginnt die Web Audio API wirklich ntzlich zu werden. Beginnen wir mit der nderung der Lautstrke. Dies kann mit einem GainNode erreicht werden, der darstellt, wie gro unsere Schallwelle ist.

Es gibt zwei Mglichkeiten, Knoten mit der Web Audio API zu erstellen. Sie knnen die Fabrikmethode im Kontext selbst verwenden (z.B. audioContext.createGain()) oder ber einen Konstruktor des Knotens (z.B. new GainNode()). Wir werden in unserem Code die Fabrikmethode verwenden:

const gainNode = audioContext.createGain();

Nun mssen wir unseren vorherigen Audiographen aktualisieren, sodass der Eingang an den Gain angeschlossen ist, dann der Gain-Knoten an das Ziel angeschlossen ist:

track.connect(gainNode).connect(audioContext.destination);

Dies wird unseren Audiographen so aussehen lassen:

[Ein Audiograph mit einer Audioquellen-Element, verbunden mit einem Gain-Knoten, der die Audioquelle modifiziert, und anschlieend zum Standardziel fhrt]

Der Standardwert fr Gain ist 1; dies hlt die aktuelle Lautstrke gleich. Gain kann auf ein Minimum von etwa -3.4028235E38 und ein Maximum von etwa 3.4028235E38 (Gleitkommazahlenbereich in JavaScript) eingestellt werden. Hier werden wir der Boombox erlauben, den Gain bis zu 2 (doppelte ursprngliche Lautstrke) und auf 0 nach unten zu bewegen (dies wird unseren Sound effektiv stummschalten).

Lassen Sie uns dem Benutzer die Kontrolle darber geben wir verwenden ein Range-Input:

<input type="range" id="volume" min="0" max="2" value="1" step="0.01" />

Lassen Sie uns den Wert dieses Inputs greifen und den Gain-Wert aktualisieren, wenn der Eingabeknoten seinen Wert durch den Benutzer gendert hat:

const volumeControl = document.querySelector("#volume");

volumeControl.addEventListener("input", () => {
  gainNode.gain.value = volumeControl.value;
});

Groartig, nun kann der Benutzer die Lautstrke des Tracks anpassen! Der Gain-Knoten ist der perfekte Knoten, um eine Stummfunktion hinzuzufgen.

Stereoverteilung zu unserer App hinzufgen

Lassen Sie uns einen weiteren Modifikationsknoten hinzufgen, um zu ben, was wir gerade gelernt haben.

Es gibt einen StereoPannerNode Knoten, der die Balance des Sounds zwischen den linken und rechten Lautsprechern verndert, wenn der Benutzer Stereo-Fhigkeiten hat.

Um es zu visualisieren, werden wir unseren Audiographen so aussehen lassen:

[Eine Abbildung, die den Audiographen mit einem Eingabeknoten, zwei Modifikationsknoten (einem Gain-Knoten und einem Stereopan-Knoten) und einem Zielknoten zeigt.]

Lassen Sie uns diesmal die Konstruktor-Methode verwenden, um einen Knoten zu erstellen. Wenn wir es auf diese Weise tun, mssen wir den Kontext und alle Optionen, die der bestimmte Knoten mglicherweise bentigt, bergeben:

const pannerOptions = { pan: 0 };
const panner = new StereoPannerNode(audioContext, pannerOptions);

Hier reicht unser Bereich von -1 (ganz links) bis 1 (ganz rechts). Wieder verwenden wir ein Range-Eingabetyp, um diesen Parameter zu variieren:

<input type="range" id="panner" min="-1" max="1" value="0" step="0.01" />

Wir verwenden die Werte aus diesem Input, um unsere Panner-Werte auf die gleiche Weise anzupassen wie zuvor:

const pannerControl = document.querySelector("#panner");

pannerControl.addEventListener("input", () => {
  panner.pan.value = pannerControl.value;
});

Lassen Sie uns unseren Audiographen erneut anpassen, um alle Knoten miteinander zu verbinden:

track.connect(gainNode).connect(panner).connect(audioContext.destination);

Das Einzige, was noch zu tun bleibt, ist die App auszuprobieren: Sehen Sie sich das endgltige Demo hier live an.

Zusammenfassung

Groartig! Wir haben eine Boombox, die unser 'Band' abspielt, und wir knnen die Lautstrke und Stereoverteilung anpassen, was uns einen ziemlich einfachen, funktionierenden Audiographen gibt.

Dies bildet einige Grundlagen, die Sie bentigen, um Audio zu Ihrer Website oder Web-App hinzuzufgen. Es gibt viel mehr Funktionen in der Web Audio API, aber sobald Sie das Konzept der Knoten und das Zusammenstellen Ihres Audiographen verstanden haben, knnen wir uns komplexeren Funktionen zuwenden.

Weitere Beispiele

Es gibt andere Beispiele, um mehr ber die Web Audio API zu lernen.

Der Voice-change-O-matic ist eine unterhaltsame Stimmmanipulation und Soundvisualisierungs-Web-App, die es Ihnen ermglicht, verschiedene Effekte und Visualisierungen auszuwhlen. Die Anwendung ist ziemlich rudimentr, zeigt jedoch die gleichzeitige Verwendung mehrerer Web Audio API Funktionen. (Voice-change-O-matic live ausfhren).

[Eine Benutzeroberflche mit einer angezeigten Schallwelle und Optionen zur Auswahl von Stimmeffekten und Visualisierungen.]

Eine weitere speziell entwickelte Anwendung zur Demonstration der Web Audio API ist das Violent Theremin, eine einfache Webanwendung, die es Ihnen ermglicht, Tonhhe und Lautstrke durch Bewegen Ihres Mauszeigers zu ndern. Es bietet auch eine psychedelische Lightshow (siehe Violent Theremin Quellcode).

[Eine Seite voller Regenbogenfarben mit zwei Tasten mit Beschriftung Clear screen und mute.]

Sehen Sie auch unser webaudio-examples Repo fr weitere Beispiele.