Verwendung der Web Audio API

Beispielcode

Unser Boombox sieht so aus:

Beachten Sie das Retro-Kassettendeck mit einem Wiedergabeknopf und Lautstärken- sowie Panorama-Reglern, um die Lautstärke und das Stereo-Panorama zu ändern. Wir könnten dies viel komplexer machen, aber dies ist ideal für einfaches Lernen an diesem Punkt.

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

Audiografiken

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

Die Web Audio API bearbeitet Audio-Operationen innerhalb eines Audio-Kontexts und wurde entwickelt, um modulares Routing zu ermöglichen. Grundlegende Audio-Operationen werden mit Audio-Knoten durchgeführt, die miteinander verbunden sind, um ein Audio-Routing-Diagramm zu bilden. Sie haben Eingangsknoten, die die Quelle der zu bearbeitenden Klänge sind, Änderungsknoten, die diese Klänge nach Wunsch ändern, und Ausgangsknoten (Ziele), die es Ihnen ermöglichen, diese Klänge zu speichern oder anzuhören.

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

Audio-Kontext

Um etwas mit der Web Audio API machen zu können, müssen wir eine Instanz des Audio-Kontexts erstellen. Dies gibt uns dann Zugang zu allen Funktionen und Möglichkeiten der API.

const audioContext = new AudioContext();

Was passiert, 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.

Laden von Sound

Nun braucht der Audio-Kontext, den wir erstellt haben, etwas Sound, um ihn abzuspielen. Es gibt einige Möglichkeiten, dies mit der API zu tun. Beginnen wir mit einer einfachen Methode – da wir ein Boombox haben, möchten wir wahrscheinlich einen vollständigen Songtrack abspielen. Auch aus Gründen der Barrierefreiheit ist es gut, diesen Track im DOM sichtbar zu machen. Wir werden den Song auf der Seite mit einem <audio> Element anzeigen.

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

Um alle Vorteile der Web Audio API nutzen zu können, müssen wir die Quelle aus diesem Element entnehmen und in den von uns erstellten Kontext einfügen. Glücklicherweise 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);

Kontrolle des Sounds

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

Das steuern von Audio programmgesteuert durch JavaScript unterliegt den Autoplay-Unterstützungsrichtlinien der Browser, weshalb es wahrscheinlich blockiert wird, wenn keine Erlaubnis vom Benutzer erteilt wurde (oder eine Positivliste vorhanden ist). Autoplay-Richtlinien erfordern in der Regel entweder eine explizite Erlaubnis oder eine Benutzerinteraktion mit der Seite, bevor Skripte den Audio-Trigger aktivieren können.

Diese speziellen Anforderungen bestehen im Wesentlichen, weil 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 (z. B. ein Klick auf eine Wiedergabetaste), sind wir in guter Form und sollten keine Probleme durch Autoplay-Blockierung haben. Lassen Sie uns also mit unserer Wiedergabe- und Pausenfunktion beginnen. Wir haben eine Wiedergabetaste, die sich in eine Pausentaste ä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 Audioquellen-/Eingabeknoten zum Ziel verbinden.

Wir haben bereits einen Eingabeknoten erstellt, indem wir unser Audio-Element in die API übergeben haben. Meistens müssen Sie keinen Ausgangsknoten erstellen, Sie können einfach Ihre anderen Knoten mit BaseAudioContext.destination verbinden, das die Situation für Sie handhabt:

track.connect(audioContext.destination);

Eine gute Möglichkeit, sich diese Knoten vorzustellen, ist das Zeichnen eines Audiografen, um ihn zu visualisieren. So sieht unser aktueller Audiograf aus:

Nun können wir die Wiedergabe- und Pausenfunktionen 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 das Abspielen beendet hat, sodass wir daraufhorchen und entsprechend Code ausführen können:

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

Sound verändern

Lassen Sie uns in einige grundlegende Änderungsknoten eintauchen, um den Sound, den wir haben, zu ändern. Hier beginnt die Web Audio API wirklich nützlich zu werden. Zuerst ändern wir die Lautstärke. Dies kann mit einem GainNode erfolgen, der darstellt, wie groß unsere Schallwelle ist.

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

const gainNode = audioContext.createGain();

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

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

Dies wird unseren Audiografen 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 (Float-Zahlenbereich in JavaScript) gesetzt werden. Hier ermöglichen wir es dem Boombox, den Gain auf bis zu 2 zu erhöhen (doppelte Lautstärke) und auf 0 zu senken (dies wird unseren Sound effektiv stummschalten).

Geben wir dem Benutzer die Möglichkeit, dies zu steuern - wir verwenden ein Bereichseingabefeld:

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

Lassen Sie uns den Wert dieses Eingabefelds abgreifen 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 ändern! Der Gain-Knoten ist der perfekte Knoten, um eine Stummfunktion hinzuzufügen.

Stereo-Panning zu unserer App hinzufügen

Fügen wir einen weiteren Änderungsknoten hinzu, um zu üben, was wir gerade gelernt haben.

Es gibt einen StereoPannerNode-Knoten, der das Gleichgewicht des Klangs zwischen den linken und rechten Lautsprechern verändert, wenn der Benutzer über Stereo-Funktionalität verfügt.

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

Lassen Sie uns diesmal die Konstruktor-Methode zum Erstellen eines Knotens verwenden. Wenn wir es auf diese Weise tun, müssen wir den Kontext und alle Optionen, die der spezielle Knoten verwenden kann, übergeben:

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

Hier reicht unser Wertebereich von -1 (ganz links) bis 1 (ganz rechts). Wieder verwenden wir ein Bereichstyp-Eingabefeld, 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 Eingabefeld, um unsere Panoramawerte auf die gleiche Weise wie zuvor anzupassen:

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

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

Lassen Sie uns unseren Audiografen erneut anpassen, um alle Knoten zusammen zu verbinden:

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

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

Zusammenfassung

Großartig! Wir haben einen Boombox, der unser 'Tape' abspielt, und wir können die Lautstärke und das Stereo-Panorama anpassen, was uns ein ziemlich einfaches funktionierendes Audiograf gibt.

Dies umfasst einige grundlegende Dinge, 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 die Erstellung Ihres Audiografen verstanden haben, können wir uns komplexeren Funktionalitäten zuwenden.

Weitere Beispiele

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

Der Voice-change-O-matic ist ein lustiger Sprachmanipulator und Klangvisualisierungs-Web-App, mit der Sie verschiedene Effekte und Visualisierungen auswählen können. Die Anwendung ist ziemlich einfach, aber sie demonstriert die gleichzeitige Verwendung mehrerer Web Audio API Funktionen. (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 Webanwendung, mit der Sie die Tonhöhe und Lautstärke durch Bewegen des Mauszeigers ändern können. Sie bietet auch eine psychedelische Lichtshow (siehe Quellcode des Violent Theremin).

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