Web Audio API

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

* Some parts of this feature may have varying levels of support.

Das Web-Audio-API bietet ein leistungsstarkes und vielseitiges System zur Steuerung von Audio im Web. Es ermöglicht Entwicklern, Audioquellen zu wählen, Effekte hinzuzufügen, Audio-Visualisierungen zu erstellen, räumliche Effekte (wie Panning) anzuwenden und vieles mehr.

Web-Audio-Konzepte und Nutzung

Das Web-Audio-API umfasst die Durchführung von Audio-Operationen innerhalb eines Audio-Kontexts und wurde so entworfen, dass modulares Routing ermöglicht wird. Grundlegende Audio-Operationen werden mit Audio-Knoten durchgeführt, die zusammen verknüpft werden, um ein Audio-Routing-Diagramm zu bilden. Mehrere Quellen mit unterschiedlichen Kanal-Layouts werden sogar innerhalb eines einzigen Kontexts unterstützt. Dieses modulare Design bietet die Flexibilität, komplexe Audio-Funktionen mit dynamischen Effekten zu erstellen.

Audio-Knoten werden durch ihre Ein- und Ausgänge in Ketten und einfachen Netzwerken verlinkt. Sie beginnen typischerweise mit einer oder mehreren Quellen. Quellen stellen Arrays von Lautstärkepegeln (Samples) in sehr kleinen Zeitabschnitten bereit, oft zehntausende von ihnen pro Sekunde. Diese können entweder mathematisch berechnet werden (wie OscillatorNode), oder sie können Aufnahmen von Audio-/Videodateien sein (wie AudioBufferSourceNode und MediaElementAudioSourceNode) und Audio-Streams (MediaStreamAudioSourceNode). Tatsächlich sind Sounddateien lediglich Aufnahmen von Lautstärkepegeln, die von Mikrofonen oder elektrischen Instrumenten kommen und in eine einzige, komplexe Welle gemischt werden.

Ausgaben dieser Knoten können mit Eingängen anderer verlinkt werden, die diese Streams von Sound-Samples in unterschiedliche Streams mischen oder modifizieren. Eine übliche Modifikation ist das Multiplizieren der Samples mit einem Wert, um sie lauter oder leiser zu machen (wie im Fall von GainNode). Sobald der Sound ausreichend für den gewünschten Effekt verarbeitet wurde, kann er mit der Eingabe eines Ziels (BaseAudioContext.destination) verbunden werden, das den Sound an die Lautsprecher oder Kopfhörer sendet. Diese letzte Verbindung ist nur notwendig, wenn der Benutzer das Audio hören soll.

Ein einfacher, typischer Workflow für Web-Audio könnte folgendermaßen aussehen:

Audio-Kontext erstellen
Innerhalb des Kontexts Quellen erstellen — wie <audio>, Oszillator, Stream
Effektknoten erstellen, wie Nachhall, Biquad-Filter, Panner, Kompressor
Endziel des Audios wählen, zum Beispiel die Systemlautsprecher
Die Quellen mit den Effekten verbinden und die Effekte mit dem Ziel.

Ein einfaches Blockdiagramm mit einem äußeren Block, der mit Audiokontext beschriftet ist, und drei inneren Blöcken, die mit Quellen, Effekten und Ziel beschriftet sind. Die drei inneren Blöcke haben Pfeile dazwischen, die von links nach rechts zeigen, wodurch der Fluss der Audioinformation angezeigt wird.

Das Timing wird mit hoher Präzision und niedriger Latenz gesteuert, sodass Entwickler Code schreiben können, der genau auf Ereignisse reagiert und in der Lage ist, spezifische Samples, selbst bei einer hohen Abtastrate, anzusprechen. Anwendungen wie Drum Machines und Sequencer sind also gut erreichbar.

Das Web-Audio-API ermöglicht es uns auch, zu kontrollieren, wie Audio räumlich angeordnet wird. Mithilfe eines auf einem Quelle-Hörer-Modell basierenden Systems ermöglicht es die Kontrolle des Panning-Modells und behandelt abstandsbedingte Abschwächung, die durch eine sich bewegende Quelle (oder Hörer) verursacht wird.

Hinweis: Sie können mehr über die Theorie des Web-Audio-API detailliert in unserem Artikel Grundkonzepte des Web-Audio-API lesen.

Zielgruppe des Web-Audio-API

Das Web-Audio-API kann auf diejenigen einschüchternd wirken, die nicht mit Audio- oder Musikbegriffen vertraut sind, und da es eine Vielzahl von Funktionalitäten umfasst, kann es für Entwickler schwierig sein zu starten.

Es kann verwendet werden, um Audio in Ihre Website oder Anwendung zu integrieren, indem es Atmosphäre wie futurelibrary.no bereitstellt oder akustische Rückmeldung in Formularen bietet. Doch es kann auch verwendet werden, um fortschrittliche interaktive Instrumente zu schaffen. Damit ist es sowohl für Entwickler als auch Musiker gleichermaßen geeignet.

Wir haben ein einfaches Einführungstutorial für diejenigen, die mit dem Programmieren vertraut sind, aber eine gute Einführung in einige der Begriffe und Strukturen der API benötigen.

Es gibt auch einen Artikel Grundkonzepte des Web-Audio-API, der Ihnen helfen soll zu verstehen, wie digitale Audioarbeiten, insbesondere im Bereich der API, funktionieren. Dies beinhaltet auch eine gute Einführung in einige der Konzepte, auf denen die API basiert.

Das Erlernen des Codierens ist wie das Kartenspielen — Sie lernen die Regeln, dann spielen Sie, dann gehen Sie zurück und lernen die Regeln erneut, dann spielen Sie wieder. Wenn einige der Theorien nach dem ersten Tutorial und dem Artikel nicht ganz passen, gibt es ein fortgeschrittenes Tutorial, das das erste erweitert, um Ihnen bei der Übung dessen, was Sie gelernt haben, zu helfen und einige fortgeschrittene Techniken anzuwenden, um einen Step-Sequencer aufzubauen.

Wir haben auch andere Tutorials und umfassendes Referenzmaterial, das alle Funktionen der API abdeckt. Siehe die Seitenleiste auf dieser Seite für mehr.

Wenn Sie mit dem musikalischen Aspekt vertrauter sind, mit Musiktheorie-Konzepten vertraut sind und anfangen möchten, Instrumente zu bauen, dann können Sie mit dem fortgeschrittenen Tutorial und anderen als Leitfaden loslegen (das oben verlinkte Tutorial behandelt die Planung von Noten, Erstellung maßgeschneiderter Oszillatoren und Hüllkurven sowie eines LFOs unter anderem).

Sollten Sie nicht mit den Programmiergrundlagen vertraut sein, möchten Sie vielleicht zuerst einige Anfängertutorials zu JavaScript konsultieren und dann hierher zurückkehren - sehen Sie sich unser JavaScript-Lernmodul für Anfänger für einen guten Ausgangspunkt an.

Schnittstellen des Web-Audio-API

Das Web-Audio-API hat eine Reihe von Schnittstellen und zugehörigen Ereignissen, die wir in neun Funktionskategorien unterteilt haben.

Allgemeine Definition des Audio-Diagramms

Allgemeine Container und Definitionen, die Audio-Diagramme im Einsatz des Web-Audio-API modellieren.

AudioContext: Die AudioContext-Schnittstelle repräsentiert ein Audiobearbeitungs-Diagramm, das aus miteinander verbundenen Audiomodulen aufgebaut ist, von denen jedes durch ein AudioNode repräsentiert wird. Ein Audiokontext steuert die Erstellung der Knoten, die er enthält, und die Durchführung der Audiobearbeitung oder Decodierung. Sie müssen ein AudioContext erstellen, bevor Sie etwas anderes tun, da alles innerhalb eines Kontexts geschieht.
AudioNode: Die AudioNode-Schnittstelle repräsentiert ein Audiobearbeitungsmodule wie eine Audioquelle (z.B. ein HTML <audio> oder <video>-Element), ein Audi-Ziel, ein Zwischenbearbeitungsmodul (z.B. ein Filter wie BiquadFilterNode oder Lautstärkeregelung wie GainNode).
AudioParam: Die AudioParam-Schnittstelle repräsentiert einen Audio-bezogenen Parameter, wie einen von einem AudioNode. Sie kann auf einen bestimmten Wert eingestellt oder eine Wertänderung angesetzt werden, und kann programmiert werden, zu einem bestimmten Zeitpunkt und nach einem bestimmten Muster zu geschehen.
AudioParamMap: Bietet eine kartenähnliche Schnittstelle für eine Gruppe von AudioParam-Schnittstellen, was bedeutet, dass es die Methoden forEach(), get(), has(), keys() und values() sowie eine size-Eigenschaft bereitstellt.
BaseAudioContext: Die BaseAudioContext-Schnittstelle fungiert als Baseline-Definition für Online- und Offline-Audioverarbeitungsdiagramme, wie sie durch AudioContext und OfflineAudioContext jeweils repräsentiert werden. Sie würden BaseAudioContext nicht direkt verwenden — Sie würden seine Funktionen über eine der beiden vererbenden Schnittstellen nutzen.
Das ended-Ereignis: Das ended-Ereignis wird ausgelöst, wenn die Wiedergabe gestoppt wird, weil das Ende der Medien erreicht wurde.

Definition von Audioquellen

Schnittstellen, die Audioquellen zur Verwendung im Web-Audio-API definieren.

AudioScheduledSourceNode: Der AudioScheduledSourceNode ist eine Eltern-Schnittstelle für verschiedene Arten von AudiosOURCE-Knoten-Schnittstellen. Es ist ein AudioNode.
OscillatorNode: Die OscillatorNode-Schnittstelle repräsentiert eine periodische Wellenform, wie eine Sinus- oder Dreieckswelle. Es ist ein AudioNode Audiobearbeitungsmodul, das eine gegebene Frequenz einer Welle erzeugt.
AudioBuffer: Die AudioBuffer-Schnittstelle repräsentiert ein kurzes Audio-Asset, das im Speicher liegt und aus einer Audiodatei mit der Methode BaseAudioContext.decodeAudioData erstellt wird, oder mit Rohdaten mit BaseAudioContext.createBuffer erstellt wird. Sobald es in dieser Form dekodiert ist, kann das Audio dann in einem AudioBufferSourceNode verwendet werden.
AudioBufferSourceNode: Die AudioBufferSourceNode-Schnittstelle repräsentiert eine Audioquelle, die aus Audiodaten im Arbeitsspeicher besteht, die in einem AudioBuffer gespeichert sind. Es ist ein AudioNode, das als Audioquelle fungiert.
MediaElementAudioSourceNode: Die MediaElementAudioSourceNode-Schnittstelle repräsentiert eine Audioquelle, die aus einem HTML <audio> oder <video>-Element besteht. Es ist ein AudioNode, das als Audioquelle fungiert.
MediaStreamAudioSourceNode: Die MediaStreamAudioSourceNode-Schnittstelle repräsentiert eine Audioquelle, die aus einem MediaStream (wie eine Webcam, Mikrofon oder ein Stream, der von einem entfernten Computer gesendet wird) besteht. Wenn mehrere Audiospuren im Stream vorhanden sind, wird die Spur verwendet, deren id lexikographisch (alphabetisch) zuerst kommt. Es ist ein AudioNode, das als Audioquelle fungiert.
MediaStreamTrackAudioSourceNode: Ein Knoten des Typs MediaStreamTrackAudioSourceNode stellt eine Audioquelle dar, deren Daten von einem MediaStreamTrack stammen. Beim Erstellen des Knotens mit der createMediaStreamTrackSource()-Methode zur Erstellung des Knotens geben Sie an, welche Spur verwendet werden soll. Dies bietet mehr Kontrolle als MediaStreamAudioSourceNode.

Definition von Audioeffektfiltern

Schnittstellen zur Definition von Effekten, die Sie auf Ihre Audioquellen anwenden möchten.

BiquadFilterNode: Die BiquadFilterNode-Schnittstelle repräsentiert einen einfachen Filter niedriger Ordnung. Es ist ein AudioNode, das verschiedene Arten von Filtern, Tonregelgeräten oder graphischen Equalizern darstellen kann. Ein BiquadFilterNode hat immer genau einen Eingang und einen Ausgang.
ConvolverNode: Die ConvolverNode-Schnittstelle ist ein AudioNode, das eine Lineare Faltung auf einem gegebenen AudioBuffer durchführt und oft verwendet wird, um einen Nachhall-Effekt zu erzielen.
DelayNode: Die DelayNode-Schnittstelle repräsentiert eine Verzögerungsleitung; ein AudioNode-Audiobearbeitungsmodul, das eine Verzögerung zwischen dem Eintreffen von Eingabedaten und deren Weiterleitung an den Ausgang verursacht.
DynamicsCompressorNode: Die DynamicsCompressorNode-Schnittstelle bietet einen Kompressionseffekt, der die Lautstärke der lautesten Teile des Signals senkt, um zu helfen, Clipping und Verzerrungen zu vermeiden, die auftreten können, wenn mehrere Sounds gleichzeitig gespielt und gemultiplext werden.
GainNode: Die GainNode-Schnittstelle repräsentiert eine Änderung der Lautstärke. Es ist ein AudioNode-Audiobearbeitungsmodul, das einen bestimmten Verstärker auf die Eingabedaten anwendet, bevor er auf die Ausgabe weitergeleitet wird.
WaveShaperNode: Die WaveShaperNode-Schnittstelle repräsentiert einen nichtlinearen Verzerrer. Es ist ein AudioNode, das eine Kurve verwendet, um eine Verzerrung des Signals zu bewirken. Neben offensichtlichen Verzerrungseffekten wird sie oft verwendet, um dem Signal ein warmes Gefühl zu verleihen.
PeriodicWave: Beschreibt eine periodische Wellenform, die verwendet werden kann, um die Ausgabe eines OscillatorNode zu formen.
IIRFilterNode: Implementiert einen allgemeinen Infinite Impulse Response-Filter (IIR); dieser Filtertyp kann verwendet werden, um Tonregelgeräte und graphische Equalizer zu implementieren.

Definition von Audio-Zielen

Sobald Sie mit der Verarbeitung Ihres Audios fertig sind, definieren diese Schnittstellen, wohin es ausgegeben werden soll.

AudioDestinationNode: Die AudioDestinationNode-Schnittstelle repräsentiert das Ende einer Audioquelle in einem bestimmten Kontext — normalerweise die Lautsprecher Ihres Geräts.
MediaStreamAudioDestinationNode: Die MediaStreamAudioDestinationNode-Schnittstelle repräsentiert ein Audioziel bestehend aus einem WebRTC MediaStream mit einem einzigen AudioMediaStreamTrack, welcher auf ähnliche Weise wie ein MediaStream verwendet werden kann, der von getUserMedia() erhalten wurde. Es ist ein AudioNode, das als Audioziel fungiert.

Datenanalyse und -visualisierung

Wenn Sie Zeit, Frequenz und andere Daten aus Ihrem Audio extrahieren möchten, benötigen Sie den AnalyserNode.

AnalyserNode: Die AnalyserNode-Schnittstelle repräsentiert einen Knoten, der Echtzeit-Frequenz- und Zeitbereichsanalyseinformationen bereitstellen kann, für die Zwecke der Datenanalyse und Visualisierung.

Trennen und Zusammenführen von Audiokanälen

Um Audiokanäle zu trennen und zusammenzuführen, verwenden Sie diese Schnittstellen.

ChannelSplitterNode: Die ChannelSplitterNode-Schnittstelle trennt die verschiedenen Kanäle einer Audioquelle in eine Reihe von Monokanälen-Ausgängen auf.
ChannelMergerNode: Die ChannelMergerNode-Schnittstelle vereinigt verschiedenen Monoeingänge in einen einzigen Ausgang. Jeder Eingang wird verwendet, um einen Kanal des Ausgangs zu füllen.

Audio-Raumklang

Diese Schnittstellen ermöglichen Ihnen das Hinzufügen von Raumklang-Panning-Effekten zu Ihren Audioquellen.

AudioListener: Die AudioListener-Schnittstelle repräsentiert die Position und Orientierung der einzigartigen Person, die die Audioszene hört, die bei der Audioklanggestaltung verwendet wird.
PannerNode: Die PannerNode-Schnittstelle repräsentiert die Position und das Verhalten eines Audioquellensignals im 3D-Raum, wodurch es Ihnen ermöglicht wird, komplexe Panning-Effekte zu erstellen.
StereoPannerNode: Die StereoPannerNode-Schnittstelle repräsentiert einen einfachen Stereo-Panner-Knoten, der verwendet werden kann, um einen Audiostream nach links oder rechts zu schwenken.

Audiobearbeitung in JavaScript

Unter Verwendung von Audioworklets können Sie benutzerdefinierte Audioknoten in JavaScript oder WebAssembly definieren. Audioworklets implementieren die Worklet-Schnittstelle, einer leichten Version der Worker-Schnittstelle.

AudioWorklet: Die AudioWorklet-Schnittstelle ist verfügbar über das AudioContext-Objekt audioWorklet und ermöglicht es Ihnen, Module zum Audioworklet hinzuzufügen, die außerhalb des Hauptthreads ausgeführt werden.
AudioWorkletNode: Die AudioWorkletNode-Schnittstelle repräsentiert einen AudioNode, der in ein Audiodiagramm eingebettet ist und Nachrichten an den entsprechenden AudioWorkletProcessor senden kann.
AudioWorkletProcessor: Die AudioWorkletProcessor-Schnittstelle repräsentiert Code zur Audiobearbeitung, der im AudioWorkletGlobalScope ausgeführt wird, das Audio direkt generiert, verarbeitet oder analysiert und Nachrichten an den entsprechenden AudioWorkletNode senden kann.
AudioWorkletGlobalScope: Die AudioWorkletGlobalScope-Schnittstelle ist ein WorkletGlobalScope-Objekt, das einen Arbeitskontext repräsentiert, in dem ein Audiobearbeitungsskript ausgeführt wird. Sie ist darauf ausgelegt, die Generierung, Verarbeitung und Analyse von Audiodaten direkt unter Verwendung von JavaScript in einem Worklet-Thread anstatt im Hauptthread zu ermöglichen.

Veraltet: Skriptverarbeitungsknoten

Bevor Audioworklets definiert wurden, verwendete das Web-Audio-API den ScriptProcessorNode für die JavaScript-basierte Audiobearbeitung. Da der Code im Hauptthread läuft, haben sie schlechte Leistung. Der ScriptProcessorNode wird aus historischen Gründen beibehalten, ist jedoch als veraltet markiert.

ScriptProcessorNode Veraltet: Die ScriptProcessorNode-Schnittstelle ermöglicht die Generierung, Verarbeitung oder Analyse von Audio unter Verwendung von JavaScript. Es ist ein AudioNode-Audiobearbeitungsmodul, das mit zwei Puffer verbunden ist, von denen einer den aktuellen Eingang enthält und der andere die Ausgabe. Ein Ereignis, das die AudioProcessingEvent-Schnittstelle implementiert, wird an das Objekt gesendet, jedes Mal wenn der Eingabepuffer neue Daten enthält, und der Ereignishandler wird beendet, wenn er den Ausgabepuffer mit Daten gefüllt hat.
audioprocess (Ereignis) Veraltet: Das audioprocess-Ereignis wird ausgelöst, wenn ein Eingabepuffer eines Web-Audio-API-ScriptProcessorNode zur Bearbeitung bereit ist.
AudioProcessingEvent Veraltet: Das AudioProcessingEvent stellt Ereignisse dar, die auftreten, wenn ein Eingabepuffer eines ScriptProcessorNode bereit zur Bearbeitung ist.

Offline-/Hintergrund-Audioverarbeitung

Es ist möglich, ein Audiodiagramm sehr schnell im Hintergrund zu verarbeiten/rendern - es in einen AudioBuffer anstatt in die Lautsprecher des Geräts zu rendern - mit dem Folgenden.

OfflineAudioContext: Die OfflineAudioContext-Schnittstelle ist eine AudioContext-Schnittstelle, die ein Audiobearbeitungsdiagramm repräsentiert, das aus miteinander verbundenen AudioNodes besteht. Im Gegensatz zu einem Standard-AudioContext rendert ein OfflineAudioContext das Audio nicht wirklich, sondern generiert es so schnell wie möglich in einem Puffer.
complete (Ereignis): Das complete-Ereignis wird ausgelöst, wenn das Rendering eines OfflineAudioContext abgeschlossen ist.
OfflineAudioCompletionEvent: Das OfflineAudioCompletionEvent stellt Ereignisse dar, die auftreten, wenn die Verarbeitung eines OfflineAudioContext abgeschlossen ist. Das complete-Ereignis verwendet diese Schnittstelle.

Leitfäden und Tutorials

Beispiel und Tutorial: Einfaches Synthesizer-Keyboard: Dieser Artikel stellt den Code und eine funktionsfähige Demo eines Video-Keyboards vor, das Sie mit der Maus spielen können. Das Keyboard ermöglicht es Ihnen, zwischen den standardmäßigen Wellenformen sowie einer benutzerdefinierten Wellenform zu wechseln, und Sie können die Hauptverstärkung über einen Lautstärkeregler unterhalb des Keyboards steuern. Dieses Beispiel nutzt die folgenden Web-API-Schnittstellen: AudioContext, OscillatorNode, PeriodicWave und GainNode.
Erweiterte Techniken: Erstellen und Sequenzieren von Audio: In diesem Tutorial werden wir uns mit der Erstellung und Modifikation von Klängen sowie mit dem Timing und der Planung beschäftigen. Wir werden das Laden von Samples, Hüllkurven, Filter, Wavetables und Frequenzmodulation einführen. Wenn Sie mit diesen Begriffen vertraut sind und nach einer Einführung in deren Anwendung mit der Web Audio API suchen, sind Sie hier genau richtig.
Grundlagen der Web-Audio-Sound-Spezialisierung: Wie wenn die umfangreiche Vielfalt an Soundverarbeitungs- (und anderen) Optionen nicht schon ausreichen würde, beinhaltet die Web Audio API auch Möglichkeiten, um den Unterschied im Klang zu simulieren, wenn ein Zuhörer sich um eine Schallquelle herumbewegt, beispielsweise das Panning, wenn Sie sich in einem 3D-Spiel um eine Schallquelle bewegen. Der offizielle Begriff hierfür ist Spatialization, und dieser Artikel behandelt die Grundlagen zur Implementierung eines solchen Systems.
Grundlegende Konzepte hinter der Web Audio API: Dieser Artikel erklärt einige theoretische Grundlagen der Audioverarbeitung, um zu verstehen, wie die Funktionen der Web Audio API arbeiten. Dies wird Ihnen helfen, fundierte Entscheidungen zu treffen, wenn Sie Ihre App zur Verarbeitung von Audio entwerfen. Wenn Sie noch kein Tontechniker sind, gibt Ihnen dieser Artikel genügend Hintergrundwissen, um zu verstehen, warum die Web Audio API so funktioniert, wie sie es tut.
Hintergrund-Audioverarbeitung mit AudioWorklet: Dieser Artikel erklärt, wie Sie einen Audio-Worklet-Prozessor erstellen und ihn in einer Web-Audio-Anwendung verwenden.
Steuern mehrerer Parameter mit ConstantSourceNode: Dieser Artikel zeigt, wie Sie einen ConstantSourceNode verwenden können, um mehrere Parameter miteinander zu verknüpfen, sodass sie denselben Wert teilen, der durch Einstellen des Wertes des ConstantSourceNode.offset-Parameters geändert werden kann.
Verwendung der Web Audio API: Lassen Sie uns einen Blick darauf werfen, wie man mit der Web Audio API beginnt. Wir werden kurz einige Konzepte betrachten und dann ein einfaches Boombox-Beispiel studieren, das es uns ermöglicht, eine Audiospur zu laden, abzuspielen und zu pausieren, sowie deren Lautstärke und Stereo-Panning zu ändern.
Verwendung von IIR-Filtern: Das IIRFilterNode-Interface der Web Audio API ist ein AudioNode-Prozessor, der einen allgemeinen Infinite Impulse Response (IIR)-Filter implementiert. Diese Art von Filter kann zur Implementierung von Tonregelgeräten und grafischen Equalizern verwendet werden, und die Filterantwortparameter können spezifiziert werden, sodass sie nach Bedarf abgestimmt werden können. Dieser Artikel beschreibt, wie man einen solchen Filter implementiert und in einem einfachen Beispiel verwendet.
Visualisierungen mit Web Audio API: Eine der interessantesten Funktionen der Web Audio API ist die Fähigkeit, Frequenz-, Wellenform- und andere Daten aus Ihrer Audioquelle zu extrahieren, die dann zur Erstellung von Visualisierungen verwendet werden können. Dieser Artikel erklärt, wie das funktioniert, und bietet ein paar grundlegende Anwendungsbeispiele.
Web Audio API Best Practices: Es gibt kein strikt richtig oder falsch, wenn es darum geht, kreativen Code zu schreiben. Solange Sie Sicherheit, Leistung und Zugänglichkeit berücksichtigen, können Sie Ihren eigenen Stil anpassen. In diesem Artikel teilen wir eine Reihe von Best Practices — Richtlinien, Tipps und Tricks für die Arbeit mit der Web Audio API.

Beispiele

Sie können eine Reihe von Beispielen auf unserem webaudio-examples Repo auf GitHub finden.

Spezifikationen

Specification
Web Audio API # AudioContext

Tones: eine einfache Bibliothek zur Wiedergabe spezifischer Töne/Noten mit dem Web-Audio-API.
Tone.js: ein Framework zur Erstellung interaktiver Musik im Browser.
howler.js: eine JS-Audiobibliothek, die standardmäßig auf Web-Audio-API und HTML Audio zurückfällt und weitere nützliche Funktionen bietet.
Mooog: jQuery-ähnliche Verkettung von AudioNodes, Mischpultstil-Send/Returns und mehr.
XSound: Web-Audio-API-Bibliothek für Synthesizer, Effekte, Visualisierung, Aufnahme usw.
OpenLang: HTML-Video-Sprachlabor-Webanwendung, die das Web-Audio-API verwendet, um Video und Audio von verschiedenen Quellen in einer Datei aufzuzeichnen und zu kombinieren (Quelle auf GitHub)
Pts.js: Vereinfachte Web-Audio-Visualisierung (Leitfaden)