Verwendung der Web Audio API

Unsere Boombox sieht folgendermaßen aus:

Beachten Sie das Retro-Kassettendeck mit einem Wiedergabeknopf und den Volumen- und Pan-Slidern, um die Lautstärke und das Stereo-Panning zu ändern. Wir könnten das viel komplexer gestalten, aber dies ist ideal für einfaches Lernen in diesem Stadium.

Hier auf CodePen die endgültige Demo ansehen oder den Quellcode auf GitHub ansehen.

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

Die Web Audio API führt Audio-Operationen innerhalb eines Audio-Kontexts aus und wurde für ein modulares Routing konzipiert. Grundlegende Audio-Operationen werden mit Audio-Knoten ausgeführt, die miteinander verbunden sind, um einen Audio-Routing-Graphen zu bilden. Sie haben Eingabeknoten, die die Quelle der zu manipulieren Klänge sind, Modifikationsknoten, die diese Klänge nach Bedarf verändern, und Ausgabeknoten (Ziele), die es Ihnen ermöglichen, diese Klänge zu speichern oder zu hören.

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

Um mit der Web Audio API etwas machen zu können, müssen wir eine Instanz des Audiokontexts erstellen. Dies gibt uns dann Zugriff auf alle Funktionen und Möglichkeiten der API.

const audioContext = new AudioContext();

Was passiert, wenn wir dies tun? Ein BaseAudioContext wird automatisch für uns erstellt und zu einem Online-Audiokontext erweitert. Wir wollen dies, weil wir vorhaben, Live-Sound abzuspielen.

Der von uns erstellte Audiokontext benötigt nun Sound zum Abspielen. Es gibt ein paar Möglichkeiten, dies mit der API zu tun. Beginnen wir mit einer einfachen Methode — da wir eine Boombox haben, möchten wir höchstwahrscheinlich einen vollständigen Song-Track abspielen. Auch der Zugänglichkeit halber ist es schön, diesen Track im DOM offenzulegen. Wir werden den Song auf der Seite mithilfe eines <audio>-Elements darstellen.

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

Um all die netten Dinge verwenden zu können, die uns die Web Audio API bietet, müssen wir die Quelle von diesem Element holen und sie in den von uns erstellten Kontext leiten. Zum Glück gibt es eine Methode, die uns genau das ermöglicht — AudioContext.createMediaElementSource:

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

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

Beim Abspielen von Sound im Web ist es wichtig, dass der Benutzer ihn steuern kann. Abhängig vom Anwendungsfall gibt es eine Vielzahl von Optionen, aber wir bieten die Möglichkeit, den Sound abzuspielen/zu pausieren, die Lautstärke des Tracks zu ändern und ihn von links nach rechts zu pannen.

Die programmgesteuerte Steuerung von Sound aus JavaScript-Code wird durch die Autoplay-Richtlinien der Browser abgedeckt, sodass es wahrscheinlich blockiert wird, ohne dass die Erlaubnis des Benutzers (oder eine Ausnahmeliste) erteilt wird. Autoplay-Richtlinien erfordern normalerweise entweder eine explizite Erlaubnis oder eine Benutzerinteraktion mit der Seite, bevor Skripte Audio abspielen können.

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

Da unsere Skripte Audio als Reaktion auf ein Benutzereingabeereignis abspielen (zum Beispiel einen Klick auf einen Wiedergabeknopf), sollten wir keine Probleme durch Autoplay-Blockierungen haben. Lassen Sie uns also mit der Betrachtung unserer Wiedergabe- und Pausen-Funktionalität beginnen. Wir haben einen Wiedergabeknopf, der zu einem Pausenknopf wird, 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 Audiographen vom Audioquellen-/Eingabeknoten zum Ziel verbinden.

Wir haben bereits einen Eingabeknoten erstellt, indem wir unser Audioelement in die API geleitet haben. Meistens müssen Sie keinen Ausgabeknoten erstellen, Sie können einfach Ihre anderen Knoten mit BaseAudioContext.destination verbinden, das dies für Sie handhabt:

track.connect(audioContext.destination);

Eine gute Möglichkeit, sich diese Knoten vorzustellen, besteht darin, einen Audiographen zu zeichnen, damit Sie ihn visualisieren können. So sieht unser aktueller Audiograph aus:

Jetzt können wir die Wiedergabe- und Pausenfunktionalitä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";
    }
  },
  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 das Abspielen beendet hat, sodass wir darauf hören und entsprechend Code ausführen können:

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

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. Zuerst ändern wir die Lautstärke. Dies kann mit einem GainNode geschehen, der repräsentiert, wie groß unsere Schallwelle ist.

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

const gainNode = audioContext.createGain();

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

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

Dies wird unseren Audiographen wie folgt 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-Wertebereich in JavaScript) gesetzt werden. Hier erlauben wir der Boombox, den Gain bis zu 2 (das Doppelte der ursprünglichen Lautstärke) und auf 0 herabzusetzen (dies wird unseren Sound effektiv stummschalten).

Lassen Sie uns dem Benutzer die Kontrolle darüber geben — wir verwenden ein 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 seinen Wert durch den Benutzer ändern lässt:

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

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

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

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

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

Um es zu visualisieren, gestalten wir unseren Audiographen wie folgt:

Lassen Sie uns dieses Mal die Knoten mit der Konstruktor-Methode erstellen. Wenn wir es auf diese Weise tun, müssen wir den Kontext und alle Optionen, die der jeweilige Knoten haben kann, übergeben:

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

Hier reicht unser Wertebereich von -1 (ganz links) bis 1 (ganz rechts). Verwenden wir erneut einen Range-Input-Typ, um diesen Parameter zu variieren:

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

Wir verwenden die Werte dieses Inputs, um unsere Panner-Werte wie zuvor anzupassen:

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

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

Lassen Sie uns unseren Audiographen wieder anpassen, 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: Hier auf CodePen die endgültige Demo ansehen.

Großartig! Wir haben eine Boombox, die unser 'Tape' abspielt, und wir können die Lautstärke und das Stereo-Panning anpassen. Damit haben wir einen ziemlich einfachen funktionierenden Audiographen.

Dies umfasst einige Grundlagen, 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 das Zusammenstellen Ihres Audiographen verstanden haben, können wir uns komplexeren Funktionen zuwenden.

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

Der Voice-change-O-matic ist ein unterhaltsamer Sprachmanipulator und Sound-Visualisierungs-Web-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. (Voice-change-O-matic live ausführen).

Eine weitere Anwendung, die speziell zur Demonstration der Web Audio API entwickelt wurde, ist das Violent Theremin, eine einfache Webanwendung, mit der Sie Tonhöhe und Lautstärke durch Bewegen Ihres Mauszeigers ändern können. Sie bietet auch eine psychedelische Lichtshow (siehe Quellcode des Violent Theremin).

Sehen Sie sich auch unser webaudio-examples repo für weitere Beispiele an.