Verwendung der Web Audio API

Beispielcode

Unsere Boombox sieht so aus:

Beachten Sie das Retro-Kassettendeck mit einem Play-Button sowie den Volumen- und Pan-Schiebereglern, die es Ihnen ermöglichen, die Lautstärke und das Stereo-Panning zu ändern. Wir könnten dies viel komplizierter gestalten, aber dies ist ideal zum einfachen Lernen in diesem Stadium.

Sehen Sie sich hier die endgültige Demo live an, oder sehen Sie sich den Quellcode auf GitHub an.

Audiografiken

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

Die Web Audio API führt Audio-Operationen innerhalb eines Audio-Kontexts durch und wurde entwickelt, um modulares Routing zu ermöglichen. Grundlegende Audio-Operationen werden mit Audioknoten durchgeführt, die miteinander verbunden sind, um einen Audio-Routing-Grafen zu bilden. Sie haben Eingangsknoten, die die Quelle der von Ihnen manipulierten Sounds sind, Modifikationsknoten, die diese Sounds nach Bedarf ändern, und Ausgangsknoten (Ziele), die es Ihnen ermöglichen, diese Sounds zu speichern oder zu hören.

Mehrere Audioquellen mit unterschiedlichen Kanal-Layouts werden unterstützt, auch innerhalb eines einzelnen Kontexts. Aufgrund dieses modularen Designs können Sie komplexe Audiofunktionen mit dynamischen Effekten erstellen.

Audio-Kontext

Um mit der Web Audio API irgendetwas machen zu können, müssen wir eine Instanz des Audio-Kontexts erstellen. Dies gibt uns dann Zugriff auf alle Funktionen und Features der API.

const audioContext = new AudioContext();

Was passiert also, wenn wir das tun? Ein BaseAudioContext wird automatisch für uns erstellt und zu einem Online-Audiokontext erweitert. Das wollen wir, weil wir live Sound abspielen möchten.

Sound laden

Nun, der von uns erstellte Audiokontext benötigt etwas Sound, um durch ihn abgespielt zu werden. Es gibt einige Möglichkeiten, dies mit der API zu tun. Beginnen wir mit einer einfachen Methode — da wir eine Boombox haben, möchten wir wahrscheinlich einen vollständigen Songtrack abspielen. Außerdem ist es der Barrierefreiheit zuliebe schön, diesen Track im DOM zugänglich zu machen. Wir werden den Song auf der Seite mit einem <audio>-Element sichtbar machen.

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

Um alle schönen Dinge zu nutzen, die wir mit der Web Audio API erhalten, müssen wir die Quelle aus diesem Element erfassen und in den von uns erstellten Kontext einbinden. Glücklicherweise gibt es eine Methode, die genau dies ermöglicht — AudioContext.createMediaElementSource:

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

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

Sound steuern

Wenn Sie Sound im Web abspielen, ist es wichtig, dem Benutzer die Kontrolle darüber zu geben. Abhängig vom Anwendungsfall gibt es unzählige Optionen, aber wir werden die Funktionalität bereitstellen, um den Sound abzuspielen/pausieren, die Lautstärke des Tracks zu ändern und ihn von links nach rechts zu verschieben.

Das programmatische Steuern von Sound durch JavaScript-Code wird von den Autoplay-Richtlinien der Browser abgedeckt, weshalb es wahrscheinlich ohne Erlaubnis des Benutzers (oder einer Whitelist) blockiert wird. Autoplay-Richtlinien erfordern in der Regel entweder eine ausdrückliche Erlaubnis oder eine Benutzerinteraktion mit der Seite, bevor Skripte das Abspielen von Audio auslösen können.

Diese speziellen Anforderungen bestehen im Wesentlichen, weil unerwartete Sounds störend und aufdringlich sein können und Barrierefreiheitsprobleme verursachen können. Mehr darüber erfahren Sie in unserem Artikel Autoplay-Leitfaden für Medien und Web Audio APIs.

Da unsere Skripte Audio als Antwort auf ein Benutzereingabeereignis (z. B. einen Klick auf einen Play-Button) abspielen, sind wir in guter Form und sollten keine Probleme mit Autoplay-Blockierungen haben. Lassen Sie uns also mit unserer Play- und Pause-Funktionalität beginnen. Wir haben einen Play-Button, der sich zu einem Pause-Button ä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 können, müssen wir unseren Audiografen vom Audioquelleingangsknoten zum Ziel verbinden.

Wir haben bereits einen Eingangsknoten erstellt, indem wir unser Audioelement in die API übergeben haben. In den meisten Fällen müssen Sie keinen Ausgangsknoten erstellen; Sie können einfach Ihre anderen Knoten mit BaseAudioContext.destination verbinden, was die Situation für Sie regelt:

track.connect(audioContext.destination);

Eine gute Möglichkeit, sich diese Knoten vorzustellen, ist, einen Audiografen zu zeichnen, den Sie visualisieren können. So sieht unser aktueller Audiograf aus:

Jetzt können wir die Play- und Pause-Funktionalität hinzufügen.

// 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 müssen auch berücksichtigen, was zu tun ist, wenn der Track das Abspielen beendet. Unser HTMLMediaElement löst ein ended-Ereignis aus, sobald es mit dem Abspielen fertig ist, sodass wir darauf hören und entsprechenden Code ausführen können:

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

Sound modifizieren

Lassen Sie uns einige grundlegende Modifikationsknoten untersuchen, um den Sound, den wir haben, zu ändern. Dies ist der Punkt, an dem die Web Audio API wirklich nützlich wird. Lassen Sie uns zuerst die Lautstärke ändern. Dies kann mithilfe eines GainNode erfolgen, der repräsentiert, wie groß unsere Schallwelle ist.

Es gibt zwei Möglichkeiten, wie Sie mit der Web Audio API Knoten erstellen können. Sie können die Factory-Methode auf dem Kontext selbst verwenden (z.B. audioContext.createGain()) oder über einen Konstruktor des Knotens (z.B. new GainNode()). Wir werden in unserem Code die Factory-Methode verwenden:

const gainNode = audioContext.createGain();

Jetzt müssen wir unseren Audiografen von zuvor aktualisieren, damit der Eingang mit dem Gain verbunden ist und der Gain-Knoten mit dem Ziel verbunden ist:

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

Dies wird unseren Audiografen folgendermaßen aussehen lassen:

Der Standardwert für Gain ist 1; dies hält die aktuelle Lautstärke gleich. Gain kann auf ein Minimum von etwa -3.4028235E38 und ein Maximum von etwa 3.4028235E38 (Float-Zahlenbereich in JavaScript) gesetzt werden. Hier erlauben wir der Boombox, den Gain auf bis zu 2 (doppelt so laut wie das Original) und auf bis zu 0 (das wird unseren Sound effektiv stummschalten) zu verschieben.

Lassen Sie uns dem Benutzer die Möglichkeit geben, dies zu tun — wir verwenden dazu einen Range-Input:

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

Lassen Sie uns also den Wert dieses Inputs erfassen und den Gain-Wert aktualisieren, wenn der Eingabeknoten vom Benutzer geändert wird:

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

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

Großartig, jetzt kann der Benutzer die Lautstärke des Tracks aktualisieren! Der Gain-Knoten ist der perfekte Knoten, wenn Sie eine Stummfunktion hinzufügen möchten.

Hinzufügen von Stereo-Panning zu unserer App

Lassen Sie uns einen weiteren Modifikationsknoten hinzufügen, um das, was wir gerade gelernt haben, zu üben.

Es gibt einen StereoPannerNode, der das Gleichgewicht des Sounds zwischen den linken und rechten Lautsprechern ändert, wenn der Benutzer über Stereo-Fähigkeiten verfügt.

Um es zu visualisieren, gestalten wir unseren Audiografen folgendermaßen:

Lassen Sie uns diesmal die Konstruktor-Methode verwenden, um einen Knoten zu erstellen. Wenn wir es auf diese Weise tun, müssen wir den Kontext und alle Optionen, die der spezielle Knoten erfordert, übergeben:

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

Hier reichen unsere Werte von -1 (ganz links) bis 1 (ganz rechts). Lassen Sie uns wieder einen Range-Input verwenden, 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 wie zuvor anzupassen:

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

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

Passen wir unseren Audiografen erneut an, um alle Knoten miteinander zu verbinden:

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

Das einzige, was noch zu tun ist, ist die App auszuprobieren: Sehen Sie sich hier die endgültige Demo live an.

Zusammenfassung

Großartig! Wir haben eine Boombox, die unser 'Tape' abspielt, und wir können die Lautstärke und das Stereo-Panning anpassen, was uns einen ziemlich grundlegenden, funktionierenden Audiografen gibt.

Dies macht eine ganze Reihe von Grundlagen aus, die Sie benötigen, um Audio zu Ihrer Website oder Web-App hinzuzufügen. Es gibt viel mehr Funktionalität in der Web Audio API, aber sobald Sie das Konzept der Knoten und des Aufbaus Ihres Audiografen verstanden haben, können wir uns mit komplizierteren Funktionen befassen.

Weitere Beispiele

Es gibt weitere Beispiele, um mehr über die Web Audio API zu erfahren.

Der Voice-change-O-matic ist eine unterhaltsame Stimmenmanipulations- und Schallvisualisierungs-App, mit der Sie verschiedene Effekte und Visualisierungen auswählen können. Die Anwendung ist ziemlich rudimentär, aber sie demonstriert die gleichzeitige Nutzung mehrerer Funktionen der Web Audio API. (Führen Sie den Voice-change-O-matic live aus).

Eine andere speziell zur Demonstration der Web Audio API entwickelte Anwendung ist das Violent Theremin, eine einfache Webanwendung, die es Ihnen ermöglicht, Tonhöhe und Lautstärke durch Bewegen Ihres Mauszeigers zu ändern. Es bietet auch eine psychedelische Lichtshow (siehe den Violent Theremin Quellcode).

Siehe auch unser webaudio-examples Repo für weitere Beispiele.