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.

Die Web Audio API bietet ein leistungsstarkes und vielseitiges System zur Steuerung von Audio im Web. Diese ermöglicht Entwicklern, Audioquellen auszuwählen, Audioeffekte 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 Audiovorgängen innerhalb eines audio context und wurde entwickelt, um modulares Routing zu ermöglichen. Grundlegende Audiovorgänge werden mit audio nodes durchgeführt, die miteinander verknüpft werden, um einen audio routing graph zu bilden. Mehrere Quellen — mit unterschiedlichen Arten von Kanalaufteilungen — werden sogar innerhalb eines einzigen Kontexts unterstützt. Dieses modulare Design bietet die Flexibilität, komplexe Audiofunktionen mit dynamischen Effekten zu erstellen.

Audio nodes sind durch ihre Eingaben und Ausgaben zu Ketten und einfachen Netzwerken verbunden. Sie beginnen typischerweise mit einer oder mehreren Quellen. Quellen liefern Arrays von Schallintensitäten (Samples) in sehr kleinen Zeitabschnitten, oft zehntausende von ihnen pro Sekunde. Diese können entweder mathematisch berechnet werden (wie zum Beispiel der OscillatorNode), oder es können Aufnahmen von Audio-/Videodateien sein (wie der AudioBufferSourceNode und der MediaElementAudioSourceNode) sowie Audio-Streams (MediaStreamAudioSourceNode). Tatsächlich sind Audiodateien nichts anderes als Aufzeichnungen von Schallintensitäten, die von Mikrofonen oder elektrischen Instrumenten kommen und in eine einzige, komplizierte Wellenform gemischt werden.

Ausgänge dieser nodes können mit den Eingängen anderer nodes verbunden werden, die diese Tonstreams mischen oder verändern, um unterschiedlich Streams zu erzeugen. Eine häufige Änderung 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 ist, kann er mit dem Eingang eines Ziels (BaseAudioContext.destination) verbunden werden, das den Ton an 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 folgendermaßen aussehen:

Erstellen Sie einen Audio-Kontext
Erstellen Sie innerhalb des Kontexts Quellen – wie <audio>, Oszillator, Stream
Erstellen Sie Effekt-Nodes, wie Hall, Biquad-Filter, Panning, Kompressor
Wählen Sie die endgültige Audioziel, 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 mit Audio-Kontext beschriftet ist, und drei inneren Boxen, die mit Quellen, Effekten und Ziel beschriftet sind. Die drei inneren Boxen haben Pfeile zwischen sich, die von links nach rechts zeigen, und den Fluss von Audioinformationen angeben.

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, auch bei hoher Samplerate, anzusprechen. Anwendungen wie Drum-Machines und Sampler sind somit in Reichweite.

Die Web Audio API ermöglicht uns auch, zu steuern, wie Audio räumlich dargestellt wird. Basierend auf einem Quellen-Hörer-Modell ermöglicht sie die Kontrolle über das Panning-Modell und beschäftigt sich mit der durch Entfernungen induzierten Abschwächung durch eine sich bewegende Quelle (oder einen sich bewegenden Hörer).

Hinweis: Sie können über die Theorie der Web Audio API in viel größerem Detail in unserem Artikel Grundlegende Konzepte hinter der Web Audio API lesen.

Zielgruppe der Web Audio API

Die Web Audio API kann für diejenigen einschüchternd sein, die mit Audio- oder Musikbegriffen nicht vertraut sind, und da sie eine Vielzahl von Funktionen beinhaltet, kann es schwierig sein, als Entwickler einzusteigen.

Sie kann verwendet werden, um Audio in Ihre Website oder Anwendung zu integrieren, indem Sie eine Atmosphäre bereitstellen wie futurelibrary.no oder auditive Rückmeldungen bei Formularen hinzufügen. Sie kann jedoch auch verwendet werden, um fortschrittliche interaktive Instrumente zu erstellen. Mit diesem Gedanken eignet sie sich sowohl für Entwickler als auch für Musiker.

Wir haben ein einfaches Einführungstutorial für diejenigen, die mit der Programmierung 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, 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 Lernen von Programmierung ist wie Kartenspielen – Sie lernen die Regeln, dann spielen Sie, dann gehen Sie zurück und lernen die Regeln erneut, dann spielen Sie wieder. Wenn also einige der Theorien nach dem ersten Tutorial und Artikel nicht ganz passen, gibt es ein fortgeschrittenes Tutorial, das das erste erweitert, um Ihnen beim Üben des Gelernten zu helfen und einige fortgeschrittenere Techniken anzuwenden, um einen Step-Sequencer aufzubauen.

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

Wenn Sie sich mit der musikalischen Seite der Dinge vertrauter fühlen, mit Konzepten der Musiktheorie vertraut sind und beginnen möchten, Instrumente zu bauen, dann können Sie mit dem fortgeschrittenen Tutorial und anderen anfangen, als Leitfaden Dinge zu bauen (das oben verlinkte Tutorial deckt die Planung von Noten, das Erstellen maßgeschneiderter Oszillatoren und Umschläge sowie einen LFO unter anderem ab.)

Wenn Sie mit den Grundlagen der Programmierung nicht vertraut sind, möchten Sie möglicherweise zuerst einige JavaScript-Tutorials für Anfänger konsultieren und dann hierher zurückkehren – sehen Sie sich unser JavaScript-Lernmodul für Anfänger an, um einen großartigen Einstieg zu finden.

Schnittstellen der Web Audio API

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 Audiografen

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

AudioContext: Die AudioContext Schnittstelle stellt einen Audio-Verarbeitungsgraph dar, der aus miteinander verknüpften Audio-Modulen aufgebaut ist, die jeweils durch ein AudioNode repräsentiert werden. Ein Audio-Kontext steuert die Erstellung der darin enthaltenen Nodes und die Ausführung der Audiobearbeitung oder Decodierung. Sie müssen einen AudioContext erstellen, bevor Sie etwas anderes tun, da alles innerhalb eines Kontexts passiert.
AudioNode: Die AudioNode Schnittstelle repräsentiert ein Audio-Verarbeitungsmodul wie eine Audioquelle (z.B. ein HTML <audio> oder <video> Element), Audioziel, zwischenzeitliches Verarbeitungsmodul (z.B. ein Filter wie BiquadFilterNode, oder Lautstärkeregler wie 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 eingestellt werden und kann so geplant werden, dass es zu einer bestimmten Zeit und einem bestimmten Muster geschieht.
AudioParamMap: Bietet eine kartenausartige Schnittstelle zu einer Gruppe von AudioParam Schnittstellen und bietet somit die Methoden forEach(), get(), has(), keys(), und values(), sowie eine size Eigenschaft.
BaseAudioContext: Die BaseAudioContext Schnittstelle fungiert als Basisdefinition für Online- und Offline-Audio-Verarbeitungsgraphen, wie sie jeweils durch AudioContext und OfflineAudioContext dargestellt werden. Sie würden BaseAudioContext nicht direkt verwenden – Sie würden ihre Funktionen über eine der beiden vererbenden Schnittstellen verwenden.
Das ended Ereignis: Das ended Ereignis wird ausgelöst, wenn die Wiedergabe gestoppt wurde, weil das Ende des Mediums erreicht wurde.

Definieren von Audioquellen

Schnittstellen, die Audioquellen für die 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 Welle dar, wie eine Sinus- oder Dreieckswelle. Sie ist ein AudioNode Audio-Verarbeitungsmodul, das eine bestimmte Frequenz einer Welle erzeugt.
AudioBuffer: Die AudioBuffer Schnittstelle stellt ein kurzes Audio-Asset dar, das im Speicher residiert und aus einer Audiodatei mithilfe der BaseAudioContext.decodeAudioData Methode oder mit Rohdaten mithilfe der BaseAudioContext.createBuffer erstellt wurde. Sobald es in dieser Form decodiert wurde, kann das Audio dann in einen AudioBufferSourceNode eingefügt werden.
AudioBufferSourceNode: Die AudioBufferSourceNode Schnittstelle stellt eine Audioquelle dar, die aus im Speicher befindlichen Audiodaten besteht, die in einem AudioBuffer gespeichert sind. Sie ist ein AudioNode, das als Audioquelle fungiert.
MediaElementAudioSourceNode: Die MediaElementAudioSourceNode Schnittstelle stellt eine Audioquelle dar, die aus einem HTML <audio> oder <video> Element besteht. Sie ist ein AudioNode, das als Audioquelle fungiert.
MediaStreamAudioSourceNode: Die MediaStreamAudioSourceNode Schnittstelle stellt eine Audioquelle dar, die aus einem MediaStream (wie einer Webcam, Mikrofon oder einem Stream, der von einem entfernten Computer gesendet wird) besteht. Wenn mehrere Audio-Tracks 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 stellt eine Audioquelle dar, deren Daten von einem MediaStreamTrack stammen. Beim Erstellen des Knotens mit der createMediaStreamTrackSource() Methode, um den Knoten zu erstellen, geben Sie an, welcher Track verwendet werden soll. Dies bietet mehr Kontrolle als MediaStreamAudioSourceNode.

Definieren von Audioeffektfiltern

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

BiquadFilterNode: Die BiquadFilterNode Schnittstelle stellt einen einfachen Filter niedriger Ordnung dar. Sie 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 einem gegebenen AudioBuffer ausführt und häufig für einen Halleffekt verwendet wird.
DelayNode: Die DelayNode Schnittstelle stellt eine Verzögerungsleitung dar; ein AudioNode Audio-Verarbeitungsmodul, das eine Verzögerung zwischen dem Eintreffen von Eingangsdaten und deren Weiterleitung zum Ausgang verursacht.
DynamicsCompressorNode: Die DynamicsCompressorNode Schnittstelle bietet einen Kompressionseffekt, der die Lautstärke der lautesten Teile des Signals senkt, um Übersteuerung und Verzerrungen zu vermeiden, die auftreten können, wenn mehrere Sounds gleichzeitig abgespielt und zusammengeführt werden.
GainNode: Die GainNode Schnittstelle repräsentiert eine Änderung der Lautstärke. Sie ist ein AudioNode Audio-Verarbeitungsmodul, das einen bestimmten Verstärkungsfaktor auf die Eingangsdaten anwendet, bevor sie zum Ausgang weitergeleitet werden.
WaveShaperNode: Die WaveShaperNode Schnittstelle stellt einen nicht-linearen Verzerrer dar. Sie ist ein AudioNode, das eine Kurve verwendet, um eine waveshaping Verzerrung auf das Signal anzuwenden. Neben offensichtlichen Verzerrungseffekten wird sie 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 Infinite Impulse Response (IIR) Filter; dieser Filtertyp kann verwendet werden, um Klangregelgeräte und grafische Equalizer zu implementieren.

Definieren von Audiozielen

Sobald Sie Ihre Audiodaten verarbeitet haben, definieren diese Schnittstellen, wohin sie ausgegeben werden sollen.

AudioDestinationNode: Die AudioDestinationNode Schnittstelle stellt das Endziel einer Audioquelle in einem bestimmten Kontext dar — normalerweise die Lautsprecher Ihres Geräts.
MediaStreamAudioDestinationNode: Die MediaStreamAudioDestinationNode Schnittstelle stellt ein Audioziel dar, das aus einem WebRTC MediaStream mit einem einzelnen AudioMediaStreamTrack besteht, der ähnlich wie ein MediaStream verwendet werden kann, der aus getUserMedia() erhalten wurde. Sie ist ein AudioNode, das als Audioziel fungiert.

Datenanalyse und Visualisierung

Wenn Sie Zeit-, Frequenz- und andere Daten aus Ihrem Audio extrahieren möchten, ist AnalyserNode genau das, was Sie brauchen.

AnalyserNode: Die AnalyserNode Schnittstelle stellt ein Node dar, das in der Lage ist, Echtzeitfrequenz- und Zeitbereichsanalysen zur Verfügung zu stellen, für Zwecke der Datenanalyse und Visualisierung.

Aufteilen und Zusammenführen von Audiokanälen

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

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

Audio-Raumklang

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

AudioListener: Die AudioListener Schnittstelle repräsentiert die Position und Orientierung der einzigartigen Person, die die Audio-Szene anhört, die in der Audio-Raumklangverarbeitung verwendet wird.
PannerNode: Die PannerNode Schnittstelle stellt die Position und das Verhalten eines Audioquellsignals im 3D-Raum dar und ermöglicht das Erstellen von komplexen Panning-Effekten.
StereoPannerNode: Die StereoPannerNode Schnittstelle stellt einen einfachen Stereo-Panning-Knoten dar, der verwendet werden kann, um einen Audiostream nach links oder rechts zu schwenken.

Audioverarbeitung in JavaScript

Mit Hilfe von 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 und dessen audioWorklet verfügbar und ermöglicht es Ihnen, Module zum Audio-Worklet hinzuzufügen, die außerhalb des Hauptthreads ausgeführt werden.
AudioWorkletNode: Die AudioWorkletNode Schnittstelle stellt ein AudioNode dar, das in einen Audio-Graph eingebettet ist und Nachrichten an den entsprechenden AudioWorkletProcessor senden kann.
AudioWorkletProcessor: Die AudioWorkletProcessor Schnittstelle stellt Audioprozessor-Code dar, der im AudioWorkletGlobalScope ausgeführt wird, 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 darstellt, in dem ein Audiobearbeitungsskript ausgeführt wird; sie ist darauf ausgelegt, die Erzeugung, Verarbeitung und Analyse von Audiodaten direkt in einem Worklet-Thread anstelle des Hauptthreads zu ermöglichen.

Veraltet: Script-Prozessor-Nodes

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 eine 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 mithilfe von JavaScript. Sie ist ein AudioNode Audio-Verarbeitungsmodul, das mit zwei Puffern verknüpft ist, von denen einer den aktuellen Eingang enthält, einer den Ausgang. Ein Ereignis, das die AudioProcessingEvent Schnittstelle implementiert, wird an das Objekt gesendet, jedes Mal wenn der Eingabepuffer neue Daten enthält, und der Ereignishandler 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 Verarbeitung bereit ist.
AudioProcessingEvent Veraltet: Das AudioProcessingEvent stellt Ereignisse dar, die auftreten, wenn ein ScriptProcessorNode Eingabepuffer zur Verarbeitung bereit ist.

Offline-/Hintergrund-Audioverarbeitung

Es ist möglich, einen Audio-Graph sehr schnell im Hintergrund zu verarbeiten/rendern — ihn in einen AudioBuffer zu rendern, anstatt zu den Lautsprechern des Geräts — mit dem Folgenden.

OfflineAudioContext: Die OfflineAudioContext Schnittstelle ist eine AudioContext Schnittstelle, die einen Audio-Verarbeitungsgraph repräsentiert, der aus miteinander verknüpften AudioNodes aufgebaut ist. Im Gegensatz zu einem normalen 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 stellt Ereignisse dar, 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 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.
Best Practices für die Web Audio API: Es gibt keinen strikt richtigen oder falschen Weg bei der Erstellung von kreativem Code. 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.
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 räumlichen Audiowiedergabe im Web: Neben einer Vielzahl von Optionen zur Klangverarbeitung (und anderen Möglichkeiten) bietet die Web Audio API auch Funktionen, um Unterschiede im Klang zu emulieren, wenn sich ein Hörer um eine Klangquelle herum bewegt, beispielsweise durch Schwenken, während Sie sich innerhalb eines 3D-Spiels um eine Klangquelle bewegen. Der offizielle Begriff dafü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 auf den Einstieg in die Web Audio API werfen. Wir werden kurz einige Konzepte betrachten und dann ein einfaches Boombox-Beispiel studieren, das es uns ermöglicht, eine Audiospur zu laden, sie abzuspielen und zu pausieren sowie die Lautstärke und die Stereoposition 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 Tonsteuerungsgeräten und grafischen Equalizern verwendet werden, und die Filterantwortparameter können spezifisch angegeben werden, sodass der Filter nach Bedarf abgestimmt werden kann. Dieser Artikel zeigt, 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.

Beispiele

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

Spezifikationen

Specification
Web Audio API # AudioContext

Tones: eine einfache Bibliothek zum Abspielen bestimmter Töne/Noten mit der Web Audio API.
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 andere nützliche Funktionen bietet.
Mooog: jQuery-ähnliches Chaining von AudioNodes, Mixer-Style Sends/Returns und mehr.
XSound: Web Audio API-Bibliothek für Synthesizer, Effekte, Visualisierung, Aufnahme usw.
OpenLang: HTML-Videosprachlabor-Webanwendung, die die Web Audio API verwendet, um Video- und Audioaufnahmen aus verschiedenen Quellen in einer einzigen Datei aufzuzeichnen und zu kombinieren (Quelle auf GitHub)
Pts.js: vereinfacht Webaudio-Visualisierungen (Leitfaden)