Verwendung der Web Audio API

Beispielcode

Unser Boombox sieht so aus:

[Ein Boombox mit Wiedergabe-, Panorama- und Lautstrkereglern]

Beachten Sie das Retro-Kassettendeck mit einem Wiedergabeknopf und Lautstrken- sowie Panorama-Reglern, um die Lautstrke und das Stereo-Panorama zu ndern. Wir knnten dies viel komplexer machen, aber dies ist ideal fr einfaches Lernen an diesem Punkt.

Sehen Sie sich hier die endgltige 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 ermglichen. Grundlegende Audio-Operationen werden mit Audio-Knoten durchgefhrt, die miteinander verbunden sind, um ein Audio-Routing-Diagramm zu bilden. Sie haben Eingangsknoten, die die Quelle der zu bearbeitenden Klnge sind, nderungsknoten, die diese Klnge nach Wunsch ndern, und Ausgangsknoten (Ziele), die es Ihnen ermglichen, diese Klnge zu speichern oder anzuhren.

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

Audio-Kontext

Um etwas mit der Web Audio API machen zu knnen, mssen wir eine Instanz des Audio-Kontexts erstellen. Dies gibt uns dann Zugang zu allen Funktionen und Mglichkeiten der API.

const audioContext = new AudioContext();

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

Laden von Sound

Nun braucht der Audio-Kontext, den wir erstellt haben, etwas Sound, um ihn abzuspielen. Es gibt einige Mglichkeiten, dies mit der API zu tun. Beginnen wir mit einer einfachen Methode da wir ein Boombox haben, mchten wir wahrscheinlich einen vollstndigen Songtrack abspielen. Auch aus Grnden 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 knnen, mssen wir die Quelle aus diesem Element entnehmen und in den von uns erstellten Kontext einfgen. Glcklicherweise gibt es eine Methode, die es uns ermglicht, 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 darber zu ermglichen. Abhngig vom Anwendungsfall gibt es unzhlige Optionen, aber wir werden Funktionalitten bereitstellen, um den Sound abzuspielen/zu pausieren, die Lautstrke des Tracks zu ndern und ihn von links nach rechts zu verschieben.

Das steuern von Audio programmgesteuert durch JavaScript unterliegt den Autoplay-Untersttzungsrichtlinien 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 knnen.

Diese speziellen Anforderungen bestehen im Wesentlichen, weil unerwartete Sounds strend und aufdringlich sein knnen 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 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 knnen, mssen 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 mssen Sie keinen Ausgangsknoten 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, ist das Zeichnen eines Audiografen, um ihn zu visualisieren. So sieht unser aktueller Audiograf aus:

[ein Audiograf mit einer Audioelementquelle, die mit dem Standardziel verbunden ist]

Nun knnen wir die Wiedergabe- und Pausenfunktionen 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 das Abspielen beendet. Unser HTMLMediaElement lst ein ended Ereignis aus, sobald es das Abspielen beendet hat, sodass wir daraufhorchen und entsprechend Code ausfhren knnen:

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

Sound verndern

Lassen Sie uns in einige grundlegende nderungsknoten eintauchen, um den Sound, den wir haben, zu ndern. Hier beginnt die Web Audio API wirklich ntzlich zu werden. Zuerst ndern wir die Lautstrke. Dies kann mit einem GainNode erfolgen, der darstellt, wie gro unsere Schallwelle ist.

Es gibt zwei Mglichkeiten, Knoten mit der Web Audio API zu erstellen. Sie knnen 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 mssen wir unseren Audiografen von zuvor aktualisieren, damit der Eingang mit dem Verstrker 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:

[ein Audiograf mit einer Audioelementquelle, verbunden mit einem Gain-Knoten, der die Audioquelle verndert, und dann zum Standardziel]

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 (Float-Zahlenbereich in JavaScript) gesetzt werden. Hier ermglichen wir es dem Boombox, den Gain auf bis zu 2 zu erhhen (doppelte Lautstrke) und auf 0 zu senken (dies wird unseren Sound effektiv stummschalten).

Geben wir dem Benutzer die Mglichkeit, 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 gendert wird:

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

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

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

Stereo-Panning zu unserer App hinzufgen

Fgen 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 verndert, wenn der Benutzer ber Stereo-Funktionalitt verfgt.

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

[Ein Bild, das den Audiografen zeigt, der einen Eingabeknoten, zwei nderungsknoten (einen Gain-Knoten und einen Stereo-Panner-Knoten) und einen Zielknoten zeigt.]

Lassen Sie uns diesmal die Konstruktor-Methode zum Erstellen eines Knotens verwenden. Wenn wir es auf diese Weise tun, mssen 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 endgltige Demo live an.

Zusammenfassung

Groartig! Wir haben einen Boombox, der unser 'Tape' abspielt, und wir knnen die Lautstrke und das Stereo-Panorama anpassen, was uns ein ziemlich einfaches funktionierendes Audiograf gibt.

Dies umfasst einige grundlegende Dinge, die Sie bentigen wrden, um Audio zu Ihrer Website oder Web-App hinzuzufgen. Es gibt viel mehr Funktionalitt in der Web Audio API, aber sobald Sie das Konzept der Knoten und die Erstellung Ihres Audiografen verstanden haben, knnen wir uns komplexeren Funktionalitten 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 auswhlen knnen. Die Anwendung ist ziemlich einfach, aber sie demonstriert die gleichzeitige Verwendung mehrerer Web Audio API Funktionen. (fhren Sie den Voice-change-O-matic live aus).

[Eine Benutzeroberflche mit einer Klangwelle, die angezeigt wird, und Optionen zur Auswahl von Spracheffekten und Visualisierungen.]

Eine weitere Anwendung, die speziell zur Demonstration der Web Audio API entwickelt wurde, ist das Violent Theremin, eine einfache Webanwendung, mit der Sie die Tonhhe und Lautstrke durch Bewegen des Mauszeigers ndern knnen. Sie bietet auch eine psychedelische Lichtshow (siehe Quellcode des Violent Theremin).

[Eine Seite voller Regenbogenfarben, mit zwei Schaltflchen, die mit Bildschirm lschen und stumm beschriftet sind.]

Siehe auch unser webaudio-examples Repository fr weitere Beispiele.