Verwenden der Web Audio API

Unsere Boombox sieht folgendermaßen aus:

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

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

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

Die Web Audio API bearbeitet Audiooperationen innerhalb eines Audio-Kontextes und wurde entwickelt, um modulares Routing zu ermöglichen. Grundlegende Audiooperationen 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 manipulierenden Klänge sind, Modifikationsknoten, die diese Klänge nach Wunsch ändern, und Ausgabeknoten (Ziele), die es Ihnen ermöglichen, diese Klänge zu speichern oder zu hören.

Mehrere Audioquellen mit unterschiedlichen Kanallayouts werden unterstützt, auch innerhalb eines einzigen Kontextes. Aufgrund dieses modularen Designs können Sie komplexe Audiofunktionen mit dynamischen Effekten erstellen.

Um irgendetwas mit der Web Audio API machen zu können, müssen wir eine Instanz des Audiokontextes erstellen. Dies ermöglicht uns dann den Zugriff auf alle Funktionen und Funktionalitäten der API.

const audioContext = new AudioContext();

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

Nun braucht der erstellte Audiokontext einige Sounds, die er abspielen kann. Mit der API gibt es einige Möglichkeiten, dies zu tun. Beginnen wir mit einer einfachen Methode – da wir eine Boombox haben, möchten wir höchstwahrscheinlich einen vollständigen Songtrack abspielen. Auch für die Barrierefreiheit ist es schön, diesen Track im DOM anzuzeigen. Wir machen den Song auf der Seite über ein <audio> Element verfügbar.

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

Um alle schönen Dinge nutzen zu können, die wir mit der Web Audio API erhalten, müssen wir die Quelle von diesem Element greifen und sie in den Kontext, den wir erstellt haben, einspeisen. Zum Glück gibt es eine Methode, die es uns ermöglicht, genau das zu tun — 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, dem Benutzer Kontrolle zu ermöglichen. Abhängig vom Anwendungsfall gibt es eine Vielzahl von Optionen, aber wir werden die Funktionalität bieten, den Sound abzuspielen/pausieren, die Lautstärke des Tracks zu ändern und ihn von links nach rechts zu pannen.

Das programmatische Steuern von Sound aus JavaScript-Code wird von den Autoplay-Richtlinien der Browser abgedeckt, da dies ohne Erlaubnis wahrscheinlich blockiert wird (oder eine Liste von Ausnahmen). Autoplay-Richtlinien erfordern normalerweise 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 Klänge ärgerlich und aufdringlich sein können und Barrierefreiheitsprobleme verursachen können. Sie können mehr darüber in unserem Artikel Autoplay-Leitfaden für Media- und Web-Audio-APIs erfahren.

Da unsere Skripte Audio als Reaktion auf ein Benutzereingabereignis (z.B. ein Klick auf einen Wiedergabeknopf) abspielen, sind wir in guter Form und sollten keine Probleme durch Autoplay-Blockierungen haben. Lassen Sie uns also mit einem Blick auf unsere Abspiel- und Pausenfunktionalität 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 können, müssen wir unseren Audiographen vom Audioquellen-/Eingangsknoten bis zum Ziel anschließen.

Wir haben bereits einen Eingangsknoten erstellt, indem wir unser Audioelement in die API übergeben haben. Meistens müssen Sie keinen Ausgabeknoten erstellen, Sie können einfach Ihre anderen Knoten an BaseAudioContext.destination anschließen, das die Situation für Sie handhabt:

track.connect(audioContext.destination);

Ein guter Weg, diese Knoten zu visualisieren, ist das Zeichnen eines Audiographen, damit Sie ihn sich vorstellen können. So sieht unser aktueller Audiograph aus:

Jetzt können wir die Abspiel- 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 zu Ende gespielt ist. Unser HTMLMediaElement löst ein ended Ereignis aus, wenn es fertig gespielt 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 zu ändern, den wir haben. Hier beginnt die Web Audio API wirklich nützlich zu werden. Zunächst einmal lassen Sie uns die Lautstärke ändern. Dies kann mithilfe eines GainNode geschehen, der darstellt, wie groß unsere Klangwelle 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()). Wir werden die Fabrikmethode in unserem Code verwenden:

const gainNode = audioContext.createGain();

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

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

Dies wird unseren Audiographen so 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 eingestellt werden (Float-Wertbereich in JavaScript). Hier werden wir es der Boombox erlauben, den Gain auf bis zu 2 (doppelte ursprüngliche Lautstärke) zu erhöhen und auf 0 (dies wird unseren Sound effektiv stummschalten) zu senken.

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 ändert:

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 aktualisieren! Der Gain-Knoten ist der perfekte Knoten, wenn Sie Stummschaltfunktionalität hinzufügen möchten.

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

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

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

Lassen Sie uns diesmal die Konstruktormethode verwenden, um einen Knoten zu erstellen. Wenn wir es auf diese Weise tun, müssen wir den Kontext und alle Optionen, die der jeweilige Knoten akzeptiert, ü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 erneut ein 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 anzupassen, wie wir es zuvor getan haben:

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

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

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 ist, ist, die App auszuprobieren: Sehen Sie sich das endgültige Demo hier auf CodePen an.

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 einfachen funktionierenden Audiographen gibt.

Dies bildet einige grundlegende Anforderungen, die Sie benötigen würden, 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 Zusammenfügen Ihres Audiographen verstanden haben, können wir uns auf komplexere Funktionalitäten konzentrieren.

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

Der Voice-change-O-matic ist eine lustige Sprachmanipulations- und Soundvisualisierungs-Web-App, die es Ihnen ermöglicht, verschiedene Effekte und Visualisierungen auszuwählen. Die Anwendung ist ziemlich rudimentär, zeigt jedoch die gleichzeitige Verwendung mehrerer Web Audio API-Features. (führen Sie den Voice-change-O-matic live aus).

Eine weitere Anwendung, die speziell zur Demonstration der Web Audio API entwickelt wurde, ist das Violent Theremin, eine einfache Web-Anwendung, die es Ihnen ermöglicht, Tonhöhe und Lautstärke durch Bewegen des Mauszeigers zu ändern. Es bietet auch eine psychedelische Lightshow (siehe Violent Theremin Quellcode).

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