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.

Die Web Audio API bietet ein leistungsstarkes und vielseitiges System zur Steuerung von Audio im Web und ermöglicht Entwicklern die Auswahl von Audioquellen, Hinzufügen von Effekten zu Audio, Erstellen von Audio-Visualisierungen, Anwenden räumlicher Effekte (wie Panning) und vieles mehr.

Web-Audio-Konzepte und Verwendung

Die Web Audio API umfasst die Handhabung von Audiovorgängen innerhalb eines Audio Context und wurde entwickelt, um modulares Routing zu ermöglichen. Grundlegende Audiobearbeitungen werden mit Audio Nodes durchgeführt, die miteinander verbunden sind, um einen Audio-Routing-Graphen zu bilden. Mehrere Quellen - mit verschiedenen Kanal-Layouts - werden sogar innerhalb eines einzelnen Kontexts unterstützt. Diese modulare Gestaltung bietet die Flexibilität, komplexe Audiofunktionen mit dynamischen Effekten zu erstellen.

Audio Nodes sind durch ihre Eingänge und Ausgänge in Ketten und einfachen Netzen verbunden. Sie beginnen in der Regel mit einer oder mehreren Quellen. Quellen liefern Arrays von Schallintensitäten (Samples) in sehr kleinen Zeitscheiben, oft Zehntausende pro Sekunde. Diese können entweder mathematisch berechnet werden (wie beim OscillatorNode), oder sie können Aufnahmen von Ton-/Videodateien sein (wie AudioBufferSourceNode und MediaElementAudioSourceNode) und Audiostreams (MediaStreamAudioSourceNode). Tatsächlich sind Tondateien nur Aufnahmen der Schallintensitäten selbst, die von Mikrofonen oder elektronischen Instrumenten aufgenommen und in eine einzige, komplizierte Welle gemischt werden.

Ausgänge dieser Nodes könnten mit Eingängen anderer verknüpft werden, die diese Streams von Schallsamples in verschiedene Streams mischen oder ändern. Eine häufige Modifikation besteht darin, die Samples mit einem Wert zu multiplizieren, um sie lauter oder leiser zu machen (wie es beim GainNode der Fall ist). Sobald der Ton für den beabsichtigten Effekt ausreichend verarbeitet wurde, kann er mit dem Eingang eines Ziels (BaseAudioContext.destination) verbunden werden, das den Ton 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:

Erstellen des Audio Contexts
Innerhalb des Contexts Quellen erstellen — wie <audio>, Oszillator, Stream
Erstellen von Effekt-Nodes, wie Hall, Biquad-Filter, Panner, Kompressor
Auswahl des finalen Audioziels, z.B. die Systemlautsprecher
Verbinden der Quellen mit den Effekten und der Effekte mit dem Ziel.

Ein einfaches Box-Diagramm mit einer äußeren Box, die als Audio Context bezeichnet ist, und drei inneren Boxen, die als Quellen, Effekte und Ziel bezeichnet sind. Die drei inneren Boxen haben Pfeile zwischen ihnen, die von links nach rechts zeigen, was den Fluss der Audioinformationen anzeigt.

Das Timing wird mit hoher Präzision und niedriger Latenz gesteuert, was es den Entwicklern ermöglicht, Code zu schreiben, der präzise auf Ereignisse reagiert und in der Lage ist, spezifische Samples anzuzielen, selbst bei einer hohen Abtastrate. Anwendungen wie Drum Machines und Sequenzer sind somit in greifbarer Nähe.

Die Web Audio API ermöglicht es uns auch, zu steuern, wie Audio räumlich gegliedert wird. Durch ein System, das auf einem Quellen-Hörer-Modell basiert, ermöglicht es die Kontrolle des Panning-Modells und beschäftigt sich mit entfernungsbedingter Dämpfung, die durch eine sich bewegende Quelle (oder einen bewegenden Hörer) verursacht wird.

Hinweis: Sie können in unserem Artikel Grundlegende Konzepte hinter der Web Audio API viel ausführlicher über die Theorie der Web Audio API lesen.

Zielgruppe der Web Audio API

Die Web Audio API kann für diejenigen, die nicht mit Audio- oder Musikbegriffen vertraut sind, einschüchternd wirken, und da sie viele Funktionen enthält, kann es sich als schwierig erweisen, als Entwickler den Einstieg zu finden.

Sie kann verwendet werden, um Audio in Ihre Website oder Anwendung zu integrieren, indem sie z.B. Atmosphäre wie futurelibrary.no bereitstellt oder auditive Rückmeldungen in Formularen. Sie kann jedoch auch verwendet werden, um fortschrittliche interaktive Instrumente zu erstellen. In diesem Sinne ist sie sowohl für Entwickler als auch Musiker geeignet.

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

Es gibt auch einen Artikel zu Grundlegenden Konzepten hinter der Web Audio API, der Ihnen hilft zu verstehen, wie digitale Audio speziell im Bereich der API funktioniert. Dies beinhaltet auch eine gute Einführung in einige der Konzepte, auf denen die API basiert.

Programmieren zu lernen ist wie Karten zu spielen — Sie lernen die Regeln, dann spielen Sie, dann gehen Sie zurück und lernen die Regeln wieder, dann spielen Sie erneut. Wenn also in den ersten Tutorials und dem Artikel einige Theorie nicht ganz passt, gibt es ein fortgeschrittenes Tutorial, das das erste erweitert, um Ihnen zu helfen, das Gelernte zu üben, und einige fortgeschrittenere Techniken, um einen Step-Sequenzer aufzubauen.

Wir haben auch andere Tutorials und umfassendes Referenzmaterial verfügbar, das alle Funktionen der API umfasst. Weitere Informationen finden Sie in der Seitenleiste dieser Seite.

Wenn Sie eher mit der musikalischen Seite vertraut sind, mit musikspezifischen Konzepten vertraut sind und Instrumente bauen möchten, können Sie direkt mit dem fortgeschrittenen Tutorial und anderen als Leitfaden beginnen (das oben verlinkte Tutorial behandelt das Planen von Noten, das Erstellen maßgeschneiderter Oszillatoren und Hüllkurven sowie ein LFO unter anderem).

Wenn Ihnen die Grundlagen der Programmierung nicht vertraut sind, sollten Sie zunächst einige JavaScript-Einsteiger-Tutorials konsultieren und dann hierher zurückkehren — sehen Sie sich unser JavaScript-Lernmodul für Anfänger für einen großartigen Einstieg an.

Web Audio API-Schnittstellen

Die Web Audio API verfügt über eine Reihe von Schnittstellen und zugehörigen Ereignissen, die wir in neun Funktionskategorien unterteilt haben.

Allgemeine Definition des Audio-Graphen

Allgemeine Container und Definitionen, die Audio-Graphen in der Nutzung der Web Audio API formen.

AudioContext: Die AudioContext-Schnittstelle stellt einen Audio-Verarbeitungsgraphen dar, der aus miteinander verknüpften Audiomodulen besteht, von denen jedes durch einen AudioNode dargestellt wird. Ein Audio Context steuert die Erstellung der enthaltenen Nodes und die Ausführung der Audiobearbeitung oder -dekodierung. Sie müssen einen AudioContext erstellen, bevor Sie etwas anderes tun, da alles innerhalb eines Contexts geschieht.
AudioNode: Die AudioNode-Schnittstelle stellt ein Audiobearbeitungsmodul wie eine Audioquelle (z.B. ein HTML <audio> oder <video> Element), Audioziel, Zwischenbearbeitungsmodul (z.B. einen Filter wie BiquadFilterNode oder Lautstärkeregelung wie GainNode) dar.
AudioParam: Die AudioParam-Schnittstelle stellt einen audiobezogenen Parameter dar, wie einer eines AudioNode. Er kann auf einen bestimmten Wert oder eine Änderung des Werts gesetzt werden und kann so programmiert werden, dass er zu einem bestimmten Zeitpunkt und nach einem bestimmten Muster erfolgt.
AudioParamMap: Bietet eine map-ähnliche Schnittstelle zu einer Gruppe von AudioParam-Schnittstellen, was bedeutet, dass sie die Methoden forEach(), get(), has(), keys() und values() sowie eine size-Eigenschaft bereitstellt.
BaseAudioContext: Die BaseAudioContext-Schnittstelle fungiert als Grunddefinition für Online- und Offline-Audioverarbeitungsgraphen, dargestellt durch AudioContext und OfflineAudioContext jeweils. Sie würden BaseAudioContext nicht direkt verwenden — Sie würden dessen Funktionen über eine dieser beiden vererbenden Schnittstellen nutzen.
Das ended Ereignis: Das ended-Ereignis wird ausgelöst, wenn die Wiedergabe gestoppt wurde, weil das Ende der Mediendaten erreicht wurde.

Audioquellen definieren

Schnittstellen, die Audioquellen zur Verwendung in der Web Audio API definieren.

AudioScheduledSourceNode: Der AudioScheduledSourceNode ist eine übergeordnete Schnittstelle für mehrere Arten von Audiosource-Node-Schnittstellen. Es ist ein AudioNode.
OscillatorNode: Die OscillatorNode-Schnittstelle stellt eine periodische Wellenform dar, wie eine Sinus- oder Dreieckswelle. Es ist ein AudioNode Audioverarbeitungsmodul, das eine bestimmte Frequenz einer Welle erzeugt.
AudioBuffer: Die AudioBuffer-Schnittstelle repräsentiert ein kurzes Audio-Asset, das im Speicher residiert, erstellt aus einer Audiodatei mit der Methode BaseAudioContext.decodeAudioData, oder erstellt mit Rohdaten unter Verwendung von BaseAudioContext.createBuffer. Sobald es in diese Form dekodiert ist, kann das Audio dann in einen AudioBufferSourceNode gelegt werden.
AudioBufferSourceNode: Die AudioBufferSourceNode-Schnittstelle stellt eine Audioquelle dar, die aus im Speicher vorhandenem Audio besteht, gespeichert in einem AudioBuffer. Es ist ein AudioNode, das als Audioquelle fungiert.
MediaElementAudioSourceNode: Die MediaElementAudioSourceNode-Schnittstelle stellt eine Audioquelle dar, die aus einem HTML <audio> oder <video> Element besteht. Es ist ein AudioNode, das als Audioquelle fungiert.
MediaStreamAudioSourceNode: Die MediaStreamAudioSourceNode-Schnittstelle stellt eine Audioquelle dar, die aus einem MediaStream besteht (wie eine Webcam, Mikrofon oder ein Stream, der von einem entfernten Computer gesendet wird). Wenn mehrere Audio-Tracks im Stream vorhanden sind, wird der Track verwendet, dessen id lexikographisch (alphabetisch) zuerst kommt. Es ist ein AudioNode, das als Audioquelle fungiert.
MediaStreamTrackAudioSourceNode: Ein Node vom Typ MediaStreamTrackAudioSourceNode stellt eine Audioquelle dar, deren Daten von einem MediaStreamTrack stammen. Beim Erstellen des Nodes mit der Methode createMediaStreamTrackSource(), um den Node zu erstellen, geben Sie den zu verwendenden Track an. Dies bietet mehr Kontrolle als MediaStreamAudioSourceNode.

Definition von Audio-Effekten

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

BiquadFilterNode: Die BiquadFilterNode-Schnittstelle stellt einen einfachen Filter niedriger Ordnung dar. Es ist ein AudioNode, das verschiedene Arten von Filtern, Klangregelgeräten oder grafischen 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 einen gegebenen AudioBuffer ausführt und häufig verwendet wird, um einen Hall-Effekt zu erzielen.
DelayNode: Die DelayNode-Schnittstelle stellt eine Verzögerungsleitung; ein AudioNode Audioverarbeitungsmodul, das eine Verzögerung zwischen dem Eintreffen eines Eingabedatums und seiner Weiterleitung an den Ausgang verursacht.
DynamicsCompressorNode: Die DynamicsCompressorNode-Schnittstelle bietet einen Kompressionseffekt, der die Lautstärke der lautesten Teile des Signals reduziert, um das Clipping und die Verzerrung zu verhindern, die auftreten können, wenn mehrere Sounds gleichzeitig abgespielt und multiplexiert werden.
GainNode: Die GainNode-Schnittstelle stellt eine Änderung der Lautstärke dar. Es ist ein AudioNode Audioverarbeitungsmodul, das einen bestimmten Gewinn auf die Eingabedaten anwendet, bevor es weitergeleitet wird.
WaveShaperNode: Die WaveShaperNode-Schnittstelle stellt einen nicht-linearen Verzerrer dar. Es ist ein AudioNode, das mit einer Kurve eine Wellenformverzerrung auf das Signal anwendet. Neben offensichtlichen Verzerreffekten wird es oft genutzt, um dem Signal ein warmes Gefühl zu verleihen.
PeriodicWave: Beschreibt eine periodische Wellenform, die verwendet werden kann, um die Ausgabe eines OscillatorNode zu gestalten.
IIRFilterNode: Implementiert einen allgemeinen Infinite Impulse Response-Filter; dieser Filtertyp kann verwendet werden, um Klangregelgeräte und grafische Equalizer zu implementieren.

Definition von Audio-Zielen

Sobald Sie Ihre Audioverarbeitung abgeschlossen haben, definieren diese Schnittstellen, wohin Sie sie ausgeben möchten.

AudioDestinationNode: Die AudioDestinationNode-Schnittstelle repräsentiert das Endziel einer Audioquelle innerhalb eines bestimmten Kontextes — normalerweise die Lautsprecher Ihres Geräts.
MediaStreamAudioDestinationNode: Die MediaStreamAudioDestinationNode-Schnittstelle stellt ein Audiosziel dar, das aus einem WebRTC MediaStream mit einem einzigen AudioMediaStreamTrack besteht, das ähnlich verwendet werden kann wie ein MediaStream, der von getUserMedia() erhalten wurde. Es ist ein AudioNode, das als Audiosziel fungiert.

Datenanalyse und Visualisierung

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

AnalyserNode: Die AnalyserNode-Schnittstelle stellt einen Node dar, der in der Lage ist, Echtzeit-Frequenz- und Zeitbereichsanalyseinformationen bereitzustellen, für die Zwecke der Datenanalyse und Visualisierung.

Aufteilen und Zusammenführen von Audiospuren

Zum Aufteilen und Zusammenführen von Audiospuren verwenden Sie diese Schnittstellen.

ChannelSplitterNode: Die ChannelSplitterNode-Schnittstelle trennt die verschiedenen Kanäle einer Audioquelle in ein Set von Mono-Ausgängen.
ChannelMergerNode: Die ChannelMergerNode-Schnittstelle führt verschiedene Mono-Eingänge zu einer einzigen Ausgabe zusammen. Jeder Eingang wird verwendet, um einen Kanal der Ausgabe zu füllen.

Audio-Spatialisation

Diese Schnittstellen erlauben Ihnen, Audio-Spatialisation-Panning-Effekte zu Ihren Audioquellen hinzuzufügen.

AudioListener: Die AudioListener-Schnittstelle repräsentiert die Position und Ausrichtung der einzigartigen Person, die dem Audio-Szenario zuhört, das in der Audio-Spatialisation verwendet wird.
PannerNode: Die PannerNode-Schnittstelle repräsentiert die Position und das Verhalten eines Audio-Source-Signals im 3D-Raum und ermöglicht Ihnen das Erstellen komplexer Panning-Effekte.
StereoPannerNode: Die StereoPannerNode-Schnittstelle stellt einen einfachen Stereo-Panner-Node dar, der verwendet werden kann, um einen Audio-Stream nach links oder rechts zu pannen.

Verarbeitung von Audio in JavaScript

Mit Audio Worklets können Sie benutzerdefinierte Audio Nodes erstellen, die in JavaScript oder WebAssembly geschrieben sind. Audio Worklets implementieren die Worklet-Schnittstelle, eine leichte Version der Worker-Schnittstelle.

AudioWorklet: Die AudioWorklet-Schnittstelle ist über das AudioContext-Objekt verfügbar, dessen audioWorklet, und ermöglicht es Ihnen, Module zum Audio Worklet hinzuzufügen, die außerhalb des Haupt-Threads ausgeführt werden.
AudioWorkletNode: Die AudioWorkletNode-Schnittstelle stellt einen AudioNode dar, der in einen Audio-Graphen eingebettet ist und Nachrichten an den entsprechenden AudioWorkletProcessor senden kann.
AudioWorkletProcessor: Die AudioWorkletProcessor-Schnittstelle stellt die in einem AudioWorkletGlobalScope laufende Audiobearbeitungscode dar, die Audio direkt generiert, verarbeitet oder analysiert und Nachrichten an den entsprechenden AudioWorkletNode senden kann.
AudioWorkletGlobalScope: Die AudioWorkletGlobalScope-Schnittstelle ist ein WorkletGlobalScope-abgeleitetes Objekt, das einen Worker-Kontext darstellt, in dem ein Audiobearbeitungsskript ausgeführt wird; es ist dafür ausgelegt, die Generierung, Verarbeitung und Analyse von Audiodaten direkt unter Verwendung von JavaScript in einem Worklet-Thread statt im Haupt-Thread zu ermöglichen.

Veraltet: Script-Processor-Nodes

Vor der Definition von Audio Worklets verwendete die Web Audio API den ScriptProcessorNode für die auf JavaScript basierende Audiobearbeitung. Da der Code im Haupt-Thread 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 mit JavaScript. Es ist ein AudioNode Audiobearbeitungsmodul, das mit zwei Buffern verbunden ist: ein Puffer, der den aktuellen Eingang enthält, und ein anderer, der die Ausgabe enthält. Ein Ereignis, das die AudioProcessingEvent-Schnittstelle implementiert, wird an das Objekt gesendet, jedes Mal, wenn der Eingabepuffer neue Daten enthält, und der Ereignishandler endet, wenn er den Ausgabepuffer mit Daten gefüllt hat.
audioprocess (Ereignis) Veraltet: Das audioprocess-Ereignis wird ausgelöst, wenn ein Eingabepuffer eines ScriptProcessorNode der Web Audio API zur Verarbeitung bereit ist.
AudioProcessingEvent Veraltet: Der AudioProcessingEvent repräsentiert Ereignisse, die auftreten, wenn ein Eingabepuffer eines ScriptProcessorNode zur Verarbeitung bereit ist.

Offline-/Hintergrund-Audiobearbeitung

Es ist möglich, einen Audio-Graphen sehr schnell im Hintergrund zu verarbeiten/rendern - ihn in einen AudioBuffer zu rendern anstelle der Lautsprecher des Geräts - mit dem Folgenden.

OfflineAudioContext: Die OfflineAudioContext-Schnittstelle ist eine AudioContext-Schnittstelle, die einen Audiobearbeitungsgraphen darstellt, der aus miteinander verknüpften AudioNodes besteht. Im Gegensatz zu einem Standard-AudioContext rendert ein OfflineAudioContext das Audio eigentlich nicht, sondern generiert es so schnell wie möglich in einem Buffer.
complete (Ereignis): Das complete-Ereignis wird ausgelöst, wenn das Rendering eines OfflineAudioContext beendet ist.
OfflineAudioCompletionEvent: Der OfflineAudioCompletionEvent repräsentiert Ereignisse, die auftreten, wenn die Verarbeitung eines OfflineAudioContext beendet ist. Das complete-Ereignis verwendet diese Schnittstelle.

Leitfäden und Anleitungen

Beispiel und Tutorial: Einfaches Synthesizer-Keyboard: Dieser Artikel präsentiert den Code und eine funktionierende Demo eines Video-Keyboards, das Sie mit der Maus spielen können. Das Keyboard ermöglicht das Umschalten zwischen den Standard-Wellenformen sowie einer benutzerdefinierten Wellenform. Sie können die Hauptverstärkung mit einem Lautstärkeregler unter dem Keyboard steuern. Dieses Beispiel nutzt die folgenden Web-API-Schnittstellen: AudioContext, OscillatorNode, PeriodicWave und GainNode.
Best Practices für die Web Audio API: Es gibt keine strikt richtige oder falsche Methode, wenn es um das Schreiben von kreativem Code geht. 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.
Fortgeschrittene Techniken: Erstellen und Sequenzieren von Audio: In diesem Tutorial werden wir die Erstellung und Modifikation von Sound sowie Timing und Planung behandeln. Wir werden Probenladen, Hüllkurven, Filter, Wavetables und Frequenzmodulation einführen. Wenn Sie mit diesen Begriffen vertraut sind und nach einer Einführung in ihre Anwendung mit der Web Audio API suchen, sind Sie hier genau richtig.
Grundlagen der Audio-Raumklang-Verarbeitung: Als ob die umfangreiche Vielfalt an Sound-Verarbeitungs- (und anderen) Optionen nicht genug wäre, bietet die Web Audio API auch Möglichkeiten, den Unterschied im Klang zu simulieren, wenn sich ein Hörer um eine Klangquelle herum bewegt, beispielsweise das Panning, wenn Sie sich in einem 3D-Spiel um eine Klangquelle bewegen. Der offizielle Begriff hierfür ist Raumklang (Spatialization) und dieser Artikel behandelt die Grundlagen, wie ein solches System implementiert werden kann.
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-Audiodatenverarbeitung mit AudioWorklet: Dieser Artikel erklärt, wie man einen Audio Worklet Prozessor erstellt und in einer Web Audio-Anwendung verwendet.
Steuerung mehrerer Parameter mit ConstantSourceNode: Dieser Artikel zeigt, wie Sie einen ConstantSourceNode verwenden, um mehrere Parameter miteinander zu verknüpfen, so dass sie denselben Wert teilen, der geändert werden kann, indem Sie den Wert des Parameters ConstantSourceNode.offset setzen.
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, einen Audiotrack zu laden, abzuspielen und anzuhalten sowie die Lautstärke und die Stereoverteilung 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 für Tonregelgeräte und grafische Equalizer verwendet werden, und die Parameter der Filterantwort können spezifiziert werden, sodass er nach Bedarf angepasst werden kann. Dieser Artikel beschreibt, wie man einen solchen implementiert und ihn in einem einfachen Beispiel verwendet.
Visualisierungen mit Web Audio API: Eines der interessantesten Merkmale der Web Audio API ist die Möglichkeit, Frequenz-, Wellenform- und andere Daten von Ihrer Audioquelle zu extrahieren, die dann zur Erstellung von Visualisierungen verwendet werden können. Dieser Artikel erklärt, wie das geht, und bietet einige grundlegende Anwendungsfälle.

Beispiele

Sie finden eine Reihe von Beispielen in unserem webaudio-examples Repo auf GitHub.

Spezifikationen

Specification
Web Audio API # AudioContext

Tone.js: Ein Framework zur Erstellung interaktiver Musik im Browser.
howler.js: Eine JS-Audiobibliothek, die standardmäßig die Web Audio API verwendet und auf HTML Audio zurückgreift sowie weitere nützliche Funktionen bietet.
Mooog: jQuery-ähnliches Verkettung von AudioNodes, Mixer-ähnliche Sends/Returns und mehr.
XSound: Web Audio API Bibliothek für Synthesizer, Effekte, Visualisierung, Aufnahme usw.
OpenLang: HTML-Video-Sprachlabor-Webanwendung, die die Web Audio API verwendet, um Video und Audio von verschiedenen Quellen in einer einzigen Datei aufzuzeichnen und zu kombinieren (Quelle auf GitHub)
Pts.js: Vereinfacht die Web-Audio-Visualisierung (Leitfaden)

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden