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. Sie ermöglicht Entwicklern die Auswahl von Audioquellen, die Hinzufügung von Effekten, die Erstellung von Audio-Visualisierungen, die Anwendung räumlicher Effekte (wie Panorama) und vieles mehr.

Web-Audio-Konzepte und Verwendung

Die Web Audio API beinhaltet die Verarbeitung von Audio innerhalb eines audio context und ist so konzipiert, dass modulares Routing ermöglicht wird. Grundlegende Audiooperationen werden mit audio nodes durchgeführt, die miteinander verbunden sind, um einen audio routing graph zu bilden. Mehrere Quellen — mit unterschiedlichen Arten der Kanalaufteilung — werden sogar innerhalb eines einzelnen Kontextes unterstützt. Dieses modulare Design bietet die Flexibilität, komplexe Audiofunktionen mit dynamischen Effekten zu erstellen.

Audio-Knoten sind über ihre Eingänge und Ausgänge in Ketten und einfachen Netzen miteinander verbunden. Sie beginnen typischerweise mit einer oder mehreren Quellen. Quellen liefern Arrays von Schallintensitäten (Samples) in sehr kleinen Zeitabschnitten, oft Zehntausende pro Sekunde. Diese können entweder mathematisch berechnet sein (wie OscillatorNode), oder es können Aufnahmen aus Sound-/Videodateien (AudioBufferSourceNode und MediaElementAudioSourceNode) sowie Audiostreams (MediaStreamAudioSourceNode) sein. Tatsächlich sind Schallaufnahmen nur Aufzeichnungen von Schallintensitäten selbst, die von Mikrofonen oder elektrischen Instrumenten kommen und zu einer einzigen, komplexen Welle gemischt werden.

Ausgänge dieser Knoten können mit Eingängen anderer Knoten verbunden sein, die diese Sound-Sample-Ströme zu verschiedenen 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 es bei einem GainNode der Fall ist). Sobald der Sound ausreichend für den beabsichtigten Effekt verarbeitet wurde, kann er mit dem Eingang eines Ziels (BaseAudioContext.destination) verbunden werden, das den Sound an die Lautsprecher oder Kopfhörer sendet. Diese letzte Verbindung ist nur notwendig, wenn der Nutzer das Audio hören soll.

Ein einfacher, typischer Arbeitsablauf für Web-Audio sieht folgendermaßen aus:

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

Ein einfaches Diagramm mit einem äußeren Kasten, beschriftet mit Audio-Kontext, und drei inneren Kästen, beschriftet mit Quellen, Effekte und Ziel. Die drei inneren Kästen haben Pfeile, die zwischen ihnen von links nach rechts zeigen und den Fluss der Audioinformationen anzeigen.

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 anzuvisieren, selbst bei einer hohen Abtastrate. Anwendungen wie Drum Machines und Sequencer sind somit durchaus erreichbar.

Die Web Audio API ermöglicht es uns auch, wie Audio räumlich dargestellt wird. Mit einem System basierend auf einem Quelle-Hörer-Modell erlaubt sie die Steuerung des Panoramamodells und befasst sich mit der distanzbedingten Abschwächung, die durch eine sich bewegende Quelle (oder einen sich bewegenden Hörer) verursacht wird.

Hinweis: Sie können sich eingehender über die Theorie der Web Audio API in unserem Artikel Grundkonzepte hinter der Web Audio API informieren.

Zielgruppe der Web Audio API

Die Web Audio API kann einschüchternd wirken für diejenigen, die mit Audio- oder Musikbegriffen nicht vertraut sind, und da sie eine Vielzahl von Funktionen umfasst, kann es schwierig sein, einen Einstieg zu finden, wenn Sie ein Entwickler sind.

Sie kann verwendet werden, um Audio in Ihre Website oder Anwendung einzubinden, indem Sie beispielsweise Atmosphäre wie futurelibrary.no bereitstellen, oder auditive Rückmeldungen in Formularen. Sie kann jedoch auch verwendet werden, um fortgeschrittene interaktive Instrumente zu erstellen. In dieser Hinsicht ist sie sowohl für Entwickler als auch für Musiker geeignet.

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 zu den Grundkonzepten hinter der Web Audio API, um Ihnen zu helfen, die Funktionsweise von digitalem Audio im speziellen Rahmen der API zu verstehen. Dieser enthält auch eine gute Einführung in einige der Konzepte, auf denen die API basiert.

Das Programmieren lernen ist wie ein Kartenspiel — 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 zu helfen, das Gelernte zu üben und einige fortgeschrittenere Techniken anzuwenden, um einen Step-Sequencer zu erstellen.

Es gibt 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 mehr vertraut sind, mit Musikkonzepten vertraut sind, Instrumente bauen möchten, dann können Sie 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 eines LFOs unter anderem).

Sollten Sie mit den Grundlagen der Programmierung nicht vertraut sein, könnten Sie zuerst einige JavaScript-Tutorials für Anfänger konsultieren und dann hierher zurückkehren — sehen Sie sich unser JavaScript-Lernmodul für Anfänger als einen großartigen Ausgangspunkt an.

Schnittstellen der Web Audio API

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

Allgemeine Audio-Graph-Definition

Allgemeine Container und Definitionen, die Audio-Graphen in der Verwendung der Web Audio API gestalten.

AudioContext: Die AudioContext-Schnittstelle stellt einen Audioverarbeitungsgraphen dar, der aus miteinander verbundenen Audiomodulen besteht, die jeweils durch einen AudioNode repräsentiert werden. Ein Audio-Kontext steuert die Erstellung der darin enthaltenen Knoten und die Ausführung der Audiobearbeitung oder des Dekodierens. Sie müssen einen AudioContext erstellen, bevor Sie etwas anderes tun können, da alles innerhalb eines Kontextes geschieht.
AudioNode: Die AudioNode-Schnittstelle repräsentiert ein Audioverarbeitungsmodul wie eine Audioquelle (z. B. ein HTML <audio>- oder <video>-Element), ein Audioziel, ein Zwischenverarbeitungsmodul (z. B. einen Filter wie BiquadFilterNode, oder eine Lautstärkeregelung wie GainNode).
AudioParam: Die AudioParam-Schnittstelle repräsentiert einen audio-bezogenen Parameter, ähnlich einem eines AudioNode. Er kann auf einen bestimmten Wert oder eine Wertänderung eingestellt werden und ist so geplant, dass er zu einer bestimmten Zeit und einem bestimmten Muster erfolgt.
AudioParamMap: Bietet eine kartenähnliche Schnittstelle zu einer Gruppe von AudioParam-Schnittstellen, was bedeutet, dass es die Methoden forEach(), get(), has(), keys() und values() sowie eine size-Eigenschaft bietet.
BaseAudioContext: Die BaseAudioContext-Schnittstelle fungiert als Basisdefinition für Online- und Offline-Audioverarbeitungsgraphen, vertreten durch AudioContext und OfflineAudioContext. Sie würden BaseAudioContext nicht direkt verwenden – Sie würden seine Funktionen über eine dieser beiden erbenden Schnittstellen verwenden.
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 Verwendung in der Web Audio API definieren.

AudioScheduledSourceNode: Der AudioScheduledSourceNode ist eine übergeordnete Schnittstelle für mehrere Arten von Audiosource-Knotenschnittstellen. Es ist ein AudioNode.
OscillatorNode: Die OscillatorNode-Schnittstelle repräsentiert eine periodische Wellenform, wie eine Sinus- oder Dreieckswelle. Es handelt sich um ein AudioNode-Audioverarbeitungsmodul, das eine bestimmte Frequenz an Wellen erzeugt.
AudioBuffer: Die AudioBuffer-Schnittstelle stellt ein kurzes Audio-Asset dar, das sich im Speicher befindet, erstellt aus einer Audiodatei mit der Methode BaseAudioContext.decodeAudioData, oder mit Rohdaten erstellt mit BaseAudioContext.createBuffer. Sobald es in dieser Form dekodiert ist, kann das Audio in ein AudioBufferSourceNode eingesetzt werden.
AudioBufferSourceNode: Die AudioBufferSourceNode-Schnittstelle stellt eine Audioquelle dar, die aus sich im Speicher befindlichen Audiodaten besteht, gespeichert in einem AudioBuffer. 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 stellt eine Audioquelle dar, die aus einem MediaStream (wie eine Webcam, Mikrofon oder ein von einem entfernten Computer gesendeter Stream) besteht. Wenn mehrere Audiotracks im Stream vorhanden sind, wird der Track verwendet, dessen id alphabetisch als erster aufgeführt ist. Es ist ein AudioNode, das als Audioquelle fungiert.
MediaStreamTrackAudioSourceNode: Ein Knoten vom Typ MediaStreamTrackAudioSourceNode repräsentiert eine Audioquelle, deren Daten von 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 Sie auf Ihre Audioquellen anwenden möchten.

BiquadFilterNode: Die BiquadFilterNode-Schnittstelle stellt einen einfachen niederordentlichen Filter dar. Es ist ein AudioNode, das verschiedene Arten von Filtern, Tonregelgerä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 an einem gegebenen AudioBuffer durchführt und häufig verwendet wird, um einen Halleffekt zu erzielen.
DelayNode: Die DelayNode-Schnittstelle repräsentiert eine Verzögerungsleitung; ein AudioNode-Audioverarbeitungsmodul, das eine Verzögerung zwischen dem Eintreffen von Eingabedaten und ihrer Weiterleitung an den Ausgang verursacht.
DynamicsCompressorNode: Die DynamicsCompressorNode-Schnittstelle bietet einen Kompressionseffekt, der die Lautstärke der lautesten Teile des Signals verringert, um Clipping und Verzerrungen zu verhindern, die auftreten können, wenn mehrere Sounds gleichzeitig abgespielt und multiplexiert werden.
GainNode: Die GainNode-Schnittstelle repräsentiert eine Lautstärkeänderung. Es ist ein AudioNode-Audioverarbeitungsmodul, das einen angegebenen gain auf die Eingabedaten anwendet, bevor sie weitergeleitet werden.
WaveShaperNode: Die WaveShaperNode-Schnittstelle repräsentiert einen nichtlinearen Verzerrer. Es ist ein AudioNode, das eine Wellenform verwendet, um eine Wellenformverzerrung auf das Signal anzuwenden. Neben offensichtlichen Verzerrungseffekten wird es häufig verwendet, um ein warmes Gefühl im Signal hinzuzufügen.
PeriodicWave: Beschreibt eine periodische Wellenform, die zum Shaping der Ausgabe eines OscillatorNode verwendet werden kann.
IIRFilterNode: Implementiert eine allgemeine Infinite Impulse Response (IIR)-Filter; dieser Filtertyp kann verwendet werden, um Tonregelgeräte und grafische Equalizer zu implementieren.

Definition von Auditiven Zielen

Sobald Sie die Audiobearbeitung abgeschlossen haben, definieren diese Schnittstellen, wohin Sie sie ausgeben.

AudioDestinationNode: Die AudioDestinationNode-Schnittstelle repräsentiert das Endziel einer Audioquelle in einem gegebenen Kontext – in der Regel die Lautsprecher Ihres Geräts.
MediaStreamAudioDestinationNode: Die MediaStreamAudioDestinationNode-Schnittstelle repräsentiert ein Audioziel, bestehend aus einem WebRTC MediaStream mit einem einzigen AudioMediaStreamTrack, der ähnlich 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 in der Lage ist, Echtzeit-Zeit- und Frequenzbereichsanalyseinformationen für die Zwecke der Datenanalyse und Visualisierung bereitzustellen.

Aufsplittung und Zusammenführung von Audiokanälen

Um Audiokanäle zu splitten und zu zusammenzuführen, 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 vereint verschiedene Mono-Eingänge zu einem einzelnen Ausgang. Jeder Eingang wird verwendet, um einen Kanal des Ausgangs zu füllen.

Audioräumliche Darstellung

Diese Schnittstellen ermöglichen es Ihnen, Audioräumliche Panning-Effekte zu Ihren Audioquellen hinzuzufügen.

AudioListener: Die AudioListener-Schnittstelle repräsentiert die Position und Ausrichtung der einzigartigen Person, die das Audioszenario in der audio-räumlichen Darstellung hört.
PannerNode: Die PannerNode-Schnittstelle repräsentiert die Position und das Verhalten eines Audiosignals in einem 3D-Raum, wodurch Sie komplexe Panning-Effekte erstellen können.
StereoPannerNode: Die StereoPannerNode-Schnittstelle repräsentiert einen einfachen Stereoverteilungsknoten, der verwendet werden kann, um einen Audiostream nach links oder rechts zu verteilen.

Audiobearbeitung in JavaScript

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

AudioWorklet: Die AudioWorklet-Schnittstelle ist über das AudioContext-Objekt audioWorklet verfügbar und ermöglicht es Ihnen, Module zur Audio-Worklet hinzuzufügen, die außerhalb des Hauptthreads ausgeführt werden.
AudioWorkletNode: Die AudioWorkletNode-Schnittstelle repräsentiert einen AudioNode, der in einen Audiographen eingebettet ist und Nachrichten an den entsprechenden AudioWorkletProcessor senden kann.
AudioWorkletProcessor: Die AudioWorkletProcessor-Schnittstelle repräsentiert Audiobearbeitungscode, der im AudioWorkletGlobalScope ausgeführt wird und Audio direkt generieren, bearbeiten oder analysieren 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 Audiobearbeitungsskript ausgeführt wird; sie ist dazu gedacht, die Erzeugung, Bearbeitung und Analyse von Audiodaten direkt mit JavaScript in einem Worklet-Thread statt im Haupt-Thread zu ermöglichen.

Veraltet: Script-Processor-Knoten

Bevor die Audio-Worklets definiert wurden, nutzte die Web Audio API den ScriptProcessorNode zur JavaScript-basierten Audiobearbeitung. Da der Code im Haupt-Thread ausgeführt wird, 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 das Generieren, Verarbeiten oder Analysieren von Audio mit JavaScript. Es handelt sich um ein AudioNode-Audioverarbeitungsmodul, das mit zwei Puffern verbunden ist, einem, der den aktuellen Eingang enthält, und einem, der den Ausgang 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 beendet sich, 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 bereit zur Verarbeitung ist.
AudioProcessingEvent Veraltet: Das AudioProcessingEvent repräsentiert Ereignisse, die auftreten, wenn ein ScriptProcessorNode-Eingabepuffer bereit zur Verarbeitung ist.

Offline-/Hintergrund-Audiobearbeitung

Es ist möglich, einen Audiografen sehr schnell im Hintergrund zu verarbeiten/rendern — ihn in einen AudioBuffer statt an die Lautsprecher des Geräts zu rendern — mit dem folgenden.

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

Leitfäden und Anleitungen

Beispiel und Tutorial: Einfache Synth-Keyboard: Dieser Artikel präsentiert den Code und eine funktionierende Demo eines Video-Keyboards, das Sie mit der Maus bespielen können. Das Keyboard ermöglicht es, zwischen den Standardwellenformen sowie einer benutzerdefinierten Wellenform zu wechseln, und Sie können die Hauptverstärkung mit einem 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 Sound sowie mit Timing und Planung befassen. Wir führen das Laden von Samples, Hüllkurven, Filter, Wavetables und Frequenzmodulation ein. Wenn Sie mit diesen Begriffen vertraut sind und eine Einführung in ihre Anwendung mit der Web Audio API suchen, sind Sie hier genau richtig.
Grundlagen der Web-Audio-Spatialisation: Als ob die Web Audio API nicht schon genug vielfältige Soundverarbeitungs- (und andere) Optionen bieten würde, gibt es auch Möglichkeiten, die Unterschiede im Klang zu simulieren, wenn ein Zuhörer sich um eine Schallquelle herum bewegt, z.B. das Panning, wenn Sie sich in einem 3D-Spiel um eine Schallquelle herum bewegen. Der offizielle Begriff hierfür ist Spatialisation, 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-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 anfängt. Wir werden kurz einige Konzepte betrachten und dann ein einfaches Boombox-Beispiel studieren, das es uns ermöglicht, einen Audiotrack zu laden, ihn abzuspielen und zu pausieren sowie Lautstärke und Stereo-Panning zu ändern.
Verwendung von IIR-Filtern: Die IIRFilterNode-Schnittstelle 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 verwendet werden. Die Filterantwort-Parameter können spezifiziert werden, sodass der Filter nach Bedarf eingestellt werden kann. Dieser Artikel zeigt, wie man einen solchen implementiert und ihn 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 keinen strikten richtigen oder falschen Weg beim Schreiben von kreativem Code. Solange Sie Sicherheit, Leistung und Barrierefreiheit 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 finden eine Reihe von Beispielen in unserem webaudio-examples repo auf GitHub.

Spezifikationen

Specification
Web Audio API # AudioContext

Tones: Eine einfache Bibliothek, um bestimmte Töne/Noten mit der Web Audio API abzuspielen.
Tone.js: Ein Framework zur Erstellung von interaktiver Musik im Browser.
howler.js: Eine JS-Audiobibliothek, die standardmäßig die Web Audio API verwendet und auf HTML Audio zurückfällt und auch andere nützliche Funktionen bietet.
Mooog: jQuery-Stil Ketten von AudioNodes, mixerartige Sends/Returns und mehr.
XSound: Web Audio API Bibliothek für Synthesizer, Effekte, Visualisierung, Aufnahme usw.
OpenLang: HTML-Video-Sprachlabor-Webanwendung mithilfe der Web Audio API zur Aufnahme und Kombination von Video und Audio aus verschiedenen Quellen zu einer einzigen Datei (Quelle auf GitHub)
Pts.js: Vereinfacht die Web-Audio-Visualisierung (Leitfaden)