Web Audio API

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit April 2021 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

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

Konzepte und Nutzung der Web Audio API

Die Web Audio API umfasst die Verarbeitung von Audiooperationen innerhalb eines audio context, und sie wurde entwickelt, um modulares Routing zu ermöglichen. Grundlegende Audiooperationen werden mit audio nodes durchgeführt, die miteinander verknüpft werden, um einen audio routing graph zu bilden. Mehrere Quellen – mit unterschiedlichen Arten von Kanal-Layouts – werden sogar innerhalb eines einzelnen Kontexts unterstützt. Dieses modulare Design bietet die Flexibilität, komplexe Audiofunktionen mit dynamischen Effekten zu erstellen.

Audionoten werden durch ihre Eingänge und Ausgänge zu Ketten und einfachen Netzen verbunden. Sie beginnen in der Regel mit einer oder mehreren Quellen. Quellen liefern Arrays von Samples – Messungen der Amplitude des Audiosignals zu aufeinanderfolgenden Zeitpunkten – oft zehntausende pro Sekunde. Diese können entweder mathematisch berechnet werden (wie OscillatorNode), oder sie können Aufnahmen von Sound-/Videodateien sein (wie AudioBufferSourceNode und MediaElementAudioSourceNode) und Audiostreams (MediaStreamAudioSourceNode). Tatsächlich sind Audiodateien lediglich Aufnahmen der Tonintensitäten selbst, die von Mikrofonen oder elektrischen Instrumenten aufgenommen und zu einer einzigen, komplizierten Welle gemischt werden.

Ausgänge dieser Knoten können mit Eingängen anderer Knoten verbunden werden, die diese Streams von Tonsamples zu unterschiedlichen Streams mischen oder modifizieren. Eine häufige Modifikation besteht darin, die Samples mit einem Wert zu multiplizieren, um sie lauter oder leiser zu machen (wie beim GainNode). Sobald der Ton ausreichend für den beabsichtigten Effekt 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 Webaudio könnte etwa so aussehen:

Erstellen Sie einen Audiokontext.
Innerhalb des Kontexts Quellen erstellen – wie <audio>, Oszillator, Stream.
Effektknoten wie Hall, Biquad-Filter, Panner, Kompressor erstellen.
Wählen Sie das endgültige Ziel des Audios, zum Beispiel Ihre Systemlautsprecher.
Verbinden Sie die Quellen mit den Effekten und die Effekte mit dem Ziel.

Ein einfaches Box-Diagramm mit einer äußeren Box, die als Audiokontext beschriftet ist, und drei inneren Boxen, die als Quellen, Effekte und Ziel beschriftet sind. Die drei inneren Boxen haben Pfeile dazwischen, die von links nach rechts zeigen und den Fluss von Audioinformationen anzeigen.

Das Timing wird mit hoher Präzision und niedriger Latenz kontrolliert, was es Entwicklern ermöglicht, Code zu schreiben, der genau auf Ereignisse reagiert und in der Lage ist, spezifische Samples anzusprechen, selbst bei einer hohen Abtastrate. Anwendungen wie Drum Machines und Sequencer sind somit in Reichweite.

Die Web Audio API ermöglicht auch die Kontrolle darüber, wie Audio räumlich dargestellt wird. Basierend auf einem Quelle-Hörer-Modell erlaubt sie die Kontrolle des Panning-Modells und behandelt entfernungsbedingte Dämpfung, die durch eine bewegte Quelle (oder einen bewegten Hörer) hervorgerufen wird.

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

Zielgruppe der Web Audio API

Die Web Audio API kann auf den ersten Blick einschüchternd wirken, besonders für diejenigen, die nicht vertraut mit Audio- oder Musikterminen sind. Aufgrund der Vielzahl an Funktionen kann es für Entwickler schwierig sein, den Einstieg zu finden.

Sie kann verwendet werden, um Audio in Ihre Website oder Anwendung zu integrieren, indem z. B. eine Atmosphäre wie auf futurelibrary.no bereitgestellt wird oder akustisches Feedback bei Formularen. Sie kann jedoch auch verwendet werden, um fortgeschrittene interaktive Instrumente zu erstellen. Mit diesem Gedanken ist sie sowohl für Entwickler als auch für Musiker geeignet.

Wir haben ein einfaches einführendes Tutorial 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.

Es gibt auch einen Artikel Grundlegende Konzepte hinter der Web Audio API, um Ihnen zu helfen, zu verstehen, wie digitale Audiofunktioniert, insbesondere im Bereich der API. Dies beinhaltet auch eine gute Einführung in einige der Konzepte, auf denen die API aufbaut.

Programmieren zu lernen ist wie Kartenspielen – man lernt die Regeln, dann spielt man, dann geht man zurück und lernt die Regeln erneut, dann spielt man wieder. Wenn also die Theorie nach dem ersten Tutorial und Artikel nicht ganz greift, gibt es ein fortgeschrittenes Tutorial, das das erste erweitert und Ihnen hilft, das Gelernte zu üben und einige fortgeschrittene Techniken anzuwenden, um einen Step-Sequencer zu erstellen.

Wir haben auch andere Tutorials und umfassende Referenzmaterialien, die alle Funktionen der API abdecken. Sehen Sie die Seitenleiste auf dieser Seite für mehr.

Wenn Sie sich mehr mit der musikalischen Seite der Dinge auskennen, mit den Konzepten der Musiktheorie vertraut sind und anfangen möchten, Instrumente zu bauen, dann können Sie mit dem fortgeschrittenen Tutorial und anderen als Leitfaden direkt loslegen (das oben verlinkte Tutorial behandelt das Planen von Noten, das Erstellen maßgeschneiderter Oszillatoren und Hüllkurven sowie ein LFO und andere Dinge).

Wenn Sie mit den Grundlagen der Programmierung nicht vertraut sind, sollten Sie möglicherweise zuerst einige JavaScript-Tutorials für Anfänger konsultieren und dann hierher zurückkommen – siehe unser JavaScript-Lernmodul für Anfänger als einen großartigen Ausgangspunkt.

Schnittstellen der Web Audio API

Die Web Audio API verfügt über mehrere Schnittstellen und zugehörige Ereignisse, die wir in neun Funktionskategorien unterteilt haben.

Allgemeine Definition des Audiografen

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

AudioContext: Die AudioContext-Schnittstelle repräsentiert einen Audiobearbeitungsgraphen, der aus Audio-Modulen aufgebaut ist, die miteinander verknüpft sind, wobei jedes von einem AudioNode dargestellt wird. Ein Audiokontext steuert die Erstellung der Knoten, die er enthält, und die Ausführung der Audiobearbeitung oder -dekodierung. Sie müssen einen AudioContext erstellen, bevor Sie irgendetwas anderes tun, da alles innerhalb eines Kontexts passiert.
AudioNode: Die AudioNode-Schnittstelle repräsentiert ein Audiobearbeitungsmodul wie eine Audioquelle (z.B. ein HTML <audio> oder <video> Element), einen Audioausgang, ein Zwischenbearbeitungsmodul (z.B. ein Filter wie BiquadFilterNode) oder eine Lautstärkeregelung wie der GainNode.
AudioParam: Die AudioParam-Schnittstelle repräsentiert einen audio-bezogenen Parameter, wie einen von einem AudioNode. Er kann auf einen bestimmten Wert oder eine Wertänderung gesetzt und so geplant werden, dass er zu einer bestimmten Zeit und mit einem bestimmten Muster erfolgt.
AudioParamMap: Bietet eine kartenä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 dient als Basisdefinition für Online- und Offline-Audiobearbeitungsgraphen, wie sie von AudioContext und OfflineAudioContext repräsentiert werden. Sie würden BaseAudioContext nicht direkt verwenden - Sie würden seine Funktionen über eine dieser beiden ererbten Schnittstellen nutzen.
Das ended Ereignis: Das ended-Ereignis wird ausgelöst, wenn die Wiedergabe gestoppt wurde, weil das Ende des Mediums erreicht wurde.

Definition von Audioquellen

Schnittstellen, die Audioquellen für die Nutzung in der Web Audio API definieren.

AudioScheduledSourceNode: Der AudioScheduledSourceNode ist eine übergeordnete Schnittstelle für mehrere Typen von Audiosource-Node-Schnittstellen. Er ist ein AudioNode.
OscillatorNode: Die OscillatorNode-Schnittstelle stellt eine periodische Wellenform dar, die Sinus, Quadrat, Sägezahn, Dreieck oder benutzerdefiniert sein kann. Es ist ein AudioNode-Audiobearbeitungsmodul, das eine gegebene Frequenz der Welle erzeugt.
AudioBuffer: Die AudioBuffer-Schnittstelle stellt ein kurzes Audiodateiobjekt im Speicher dar, das mit der Methode BaseAudioContext.decodeAudioData aus einer Audiodatei erstellt wurde, oder mit Rohdaten mit BaseAudioContext.createBuffer. Sobald es in diese Form dekodiert ist, kann das Audio dann in einen AudioBufferSourceNode platziert werden.
AudioBufferSourceNode: Die AudioBufferSourceNode-Schnittstelle repräsentiert eine Audioquelle, die aus im Speicher gespeicherten Audiodaten 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 einer Webcam, einem Mikrofon oder einem Stream, der von einem entfernten Computer gesendet wird), besteht. Wenn mehrere Audiotracks im Stream vorhanden sind, wird der Track verwendet, dessen id lexikografisch (alphabetisch) zuerst kommt. Es ist ein AudioNode, das als Audioquelle fungiert.
MediaStreamTrackAudioSourceNode: Ein Knoten vom Typ MediaStreamTrackAudioSourceNode repräsentiert eine Audioquelle, deren Daten aus einem MediaStreamTrack stammen. Wenn Sie den Knoten mit der Methode createMediaStreamTrackSource() erstellen, geben Sie an, welchen Track Sie verwenden möchten. Dies bietet mehr Kontrolle als MediaStreamAudioSourceNode.

Definition von Audioeffektfiltern

Schnittstellen zur Definition von Effekten, die auf Audioquellen angewendet werden sollen.

BiquadFilterNode: Die BiquadFilterNode-Schnittstelle repräsentiert einen einfachen Niedrigordnungsfilter. Es ist ein AudioNode, das verschiedene Arten von Filtern, Tonkontrollgeräten oder Grafik-Equalizern darstellt. 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 Halleffekt zu erzielen.
DelayNode: Die DelayNode-Schnittstelle repräsentiert eine Verzögerungsleitung; ein AudioNode-Audiobearbeitungsmodul, das eine Verzögerung zwischen dem Eintreffen von Eingangsdaten und ihrer Ausbreitung an den Ausgang verursacht.
DynamicsCompressorNode: Die DynamicsCompressorNode-Schnittstelle bietet einen Kompressionseffekt, der das Volumen der lautesten Teile des Signals verringert, um Clipping und Verzerrung zu verhindern, die auftreten können, wenn mehrere Sounds gleichzeitig abgespielt und gemultiplext werden.
GainNode: Die GainNode-Schnittstelle repräsentiert eine Lautstärkenänderung. Es ist ein AudioNode-Audiobearbeitungsmodul, das eine bestimmte Verstärkung auf die Eingabedaten anwendet, bevor diese an den Ausgang weitergeleitet werden.
WaveShaperNode: Die WaveShaperNode-Schnittstelle repräsentiert einen nicht-linearen Verzerrer. Es ist ein AudioNode, das eine Kurve verwendet, um eine Wellenshaping-Verzerrung auf das Signal anzuwenden. Neben offensichtlichen Verzerrungseffekten wird häufig 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 unendlichen Impulsantwortfilter (IIR); dieser Filtertyp kann verwendet werden, um Tonkontrollgeräte und Grafik-Equalizer zu implementieren.

Definition von Audioausgängen

Wenn Sie mit der Verarbeitung Ihres Audios fertig sind, definieren diese Schnittstellen, wohin es ausgegeben wird.

AudioDestinationNode: Die AudioDestinationNode-Schnittstelle repräsentiert das Endziel einer Audioquelle in einem gegebenen Kontext - üblicherweise die Lautsprecher Ihres Geräts.
MediaStreamAudioDestinationNode: Die MediaStreamAudioDestinationNode-Schnittstelle repräsentiert ein Audioziel, das aus einem WebRTC MediaStream mit einem einzelnen AudioMediaStreamTrack besteht, der ähnlich wie ein MediaStream verwendet werden kann, der von getUserMedia() erhalten wurde. Es ist ein AudioNode, das als Audioziel fungiert.

Datenanalyse und Visualisierung

Schnittstellen zum Extrahieren von Statistiken aus Audiografen, zu Zwecken der Datenanalyse und Visualisierung.

AnalyserNode: Repräsentiert einen Knoten, der in der Lage ist, Echtzeit-Frequenz- und Zeitdomänenanalyseinformationen bereitzustellen.
AudioPlaybackStats: Bietet Zugriff auf Dauer-, Unterbrechungs- und Latenzstatistiken für den zugehörigen AudioContext. Diese Statistiken ermöglichen es, Audiolatenz und Aussetzer zu messen.

Audio-Kanäle aufteilen und zusammenführen

Um Audio-Kanäle aufzuspalten und zu verbinden, verwenden Sie diese Schnittstellen.

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

Audio-Räumlichkeit

Diese Schnittstellen ermöglichen es Ihnen, Audio-Panning-Effekte auf Ihre Audioquellen anzuwenden.

AudioListener: Die AudioListener-Schnittstelle repräsentiert die Position und Ausrichtung der einzigartigen Person, die dem Audiobild zuhört, das in der audio-räumlichen Darstellung verwendet wird.
PannerNode: Die PannerNode-Schnittstelle repräsentiert die Position und das Verhalten eines Audiosignalquelle in einem dreidimensionalen Raum, wodurch Sie komplexe Panning-Effekte erstellen können.
StereoPannerNode: Die StereoPannerNode-Schnittstelle repräsentiert einen einfachen Stereo-Panner-Knoten, der verwendet werden kann, um einen Audiostream nach links oder rechts zu pannen.

Audiobearbeitung in JavaScript

Mit Audio-Worklets können Sie benutzerdefinierte Audio-Knoten in JavaScript oder WebAssembly schreiben. Audio-Worklets implementieren die Worklet-Schnittstelle, eine leichtgewichtige Version der Worker-Schnittstelle.

AudioWorklet: Die AudioWorklet-Schnittstelle ist über das AudioContext-Objekt audioWorklet verfügbar und ermöglicht es Ihnen, Module zu dem Audio-Worklet hinzuzufügen, die außerhalb des Hauptthreads ausgeführt werden.
AudioWorkletNode: Die AudioWorkletNode-Schnittstelle repräsentiert einen AudioNode, der in einem Audiobild eingebettet ist und Nachrichten an den entsprechenden AudioWorkletProcessor senden kann.
AudioWorkletProcessor: Die AudioWorkletProcessor-Schnittstelle repräsentiert Audiobearbeitungscode, der in einem AudioWorkletGlobalScope läuft, der Audio direkt generiert, verarbeitet oder analysiert und Nachrichten an den entsprechenden AudioWorkletNode senden kann.
AudioWorkletGlobalScope: Die AudioWorkletGlobalScope-Schnittstelle ist ein von WorkletGlobalScope abgeleitetes Objekt, das einen Worker-Kontext repräsentiert, in dem ein Audiodatenverarbeitungsskript ausgeführt wird; es ist so konzipiert, dass es die Erzeugung, Verarbeitung und Analyse von Audiodaten direkt mit JavaScript in einem Worklet-Thread ermöglicht, anstatt im Hauptthread.

Veraltet: Script-Prozessorknoten

Bevor Audio-Worklets definiert wurden, verwendete die Web Audio API den ScriptProcessorNode für 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: Die ScriptProcessorNode-Schnittstelle erlaubt die Generierung, Verarbeitung oder Analyse von Audio mithilfe von JavaScript. Es ist ein AudioNode-Audiobearbeitungsmodul, das mit zwei Puffern verknüpft ist, von denen einer den aktuellen Eingang und der andere den Ausgang enthält. Ein Ereignis, das die AudioProcessingEvent-Schnittstelle implementiert, wird bei jedem neuen Dateninhalt des Eingabepuffers an das Objekt gesendet, und der Ereignishandler wird beendet, wenn der Ausgabe-Puffer mit Daten gefüllt ist.
audioprocess (Ereignis): Das audioprocess-Ereignis wird ausgelöst, wenn ein Eingabepuffer eines Web Audio API ScriptProcessorNode zur Bearbeitung bereit ist.
AudioProcessingEvent: Das AudioProcessingEvent repräsentiert Ereignisse, die auftreten, wenn ein ScriptProcessorNode-Eingabepuffer zur Bearbeitung bereit ist.

Offline-/Hintergrund-Audiobearbeitung

Es ist möglich, einen Audiographen sehr schnell im Hintergrund zu verarbeiten/rendern – ihn in einen AudioBuffer zu rendern, anstatt ihn an die Lautsprecher des Geräts auszugeben – mit den folgenden.

OfflineAudioContext: Die OfflineAudioContext-Schnittstelle ist eine AudioContext-Schnittstelle, die einen Audiobearbeitungsgraphen repräsentiert, der aus verknüpften AudioNodes gebaut ist. 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 Rendern eines OfflineAudioContext beendet ist.
OfflineAudioCompletionEvent: Das OfflineAudioCompletionEvent repräsentiert Ereignisse, die auftreten, wenn die Verarbeitung eines OfflineAudioContext beendet ist. Das complete-Ereignis verwendet diese Schnittstelle.

Leitfäden und Tutorials

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-Räumlichkeit im Web: Als ob die umfangreiche Bandbreite an Klangverarbeitungs- (und anderen) Optionen noch nicht genug wäre, enthält die Web Audio API auch Möglichkeiten, um die Unterschiede im Klang zu emulieren, wenn ein Zuhörer sich um eine Schallquelle herum bewegt, zum Beispiel ein Panning, wenn Sie sich innerhalb eines 3D-Spiels um eine Schallquelle bewegen. Der offizielle Begriff hierfür ist Räumlichkeit, und dieser Artikel behandelt die Grundlagen der 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-Audiobearbeitung mit AudioWorklet: Dieser Artikel erklärt, wie Sie einen Audio-Worklet-Prozessor erstellen und in einer Web-Audio-Anwendung verwenden können.
Steuerung mehrerer Parameter mit ConstantSourceNode: Dieser Artikel demonstriert, wie Sie einen ConstantSourceNode verwenden können, um mehrere Parameter so zu verknüpfen, dass sie denselben Wert teilen, welcher durch das Setzen 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, 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. Dieser Filtertyp kann zur Implementierung von Tonsteuergeräten und grafischen Equalizern genutzt werden, und die Filterantwortparameter können spezifiziert werden, sodass er nach Bedarf angepasst werden kann. 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 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 Anwendungsbeispiele.

Beispiele

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

Spezifikationen

Spezifikation
Web Audio API # AudioContext

Tone.js: ein Rahmen für die Kreation interaktiver Musik im Browser.
howler.js: Eine JS-Audiobibliothek, die standardmäßig die Web Audio API verwendet und auf HTML Audio zurückgreift, sowie andere nützliche Funktionen bietet.
Mooog: jQuery-ähnliche Verkettung von AudioNodes, Mixerstil-Sendungen/Rücksendungen und mehr.
XSound: Web Audio API Bibliothek für Synthesizer, Effekte, Visualisierung, Aufnahme, etc.
OpenLang: HTML-Videosprachlabor-Webanwendung, die die Web Audio API verwendet, um Video und Audio von verschiedenen Quellen zu einem einzelnen File zu kombinieren (Quelle auf GitHub)
Pts.js: Vereinfacht die Visualisierung von Web Audio (Leitfaden)

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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