Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

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. Entwickler können damit Audioquellen auswählen, Effekte hinzufügen, Audiovisualisierungen erstellen, räumliche Effekte wie Panning anwenden und vieles mehr.

Konzepte und Verwendung von Web Audio

Bei der Web Audio API werden Audiooperationen innerhalb eines Audiokontexts ausgeführt. Die API ist für ein modulares Routing ausgelegt. Grundlegende Audiooperationen werden von Audioknoten ausgeführt, die zu einem Audiorouting-Graphen verbunden sind. Selbst innerhalb eines einzelnen Kontexts werden mehrere Quellen mit unterschiedlichen Kanalanordnungen unterstützt. Dieser modulare Aufbau ermöglicht komplexe Audiofunktionen mit dynamischen Effekten.

Audioknoten werden über ihre Ein- und Ausgänge zu Ketten und einfachen Netzen verbunden. Am Anfang stehen in der Regel eine oder mehrere Quellen. Quellen liefern Folgen von Samples – Messwerte der Amplitude des Audiosignals zu aufeinanderfolgenden Zeitpunkten, oft mehrere Zehntausend pro Sekunde. Diese können mathematisch berechnet werden, wie bei OscillatorNode, oder aus Aufnahmen in Audio- oder Videodateien stammen, wie bei AudioBufferSourceNode und MediaElementAudioSourceNode, beziehungsweise aus Audiostreams, wie bei MediaStreamAudioSourceNode. Audiodateien sind letztlich Aufzeichnungen von Schallintensitäten, die von Mikrofonen oder elektrischen Instrumenten aufgenommen und zu einer einzigen komplexen Wellenform zusammengemischt wurden.

Die Ausgänge dieser Knoten können mit den Eingängen anderer Knoten verbunden werden, die die Ströme von Audiosamples mischen oder verändern. Eine häufige Veränderung besteht darin, die Samples mit einem Wert zu multiplizieren, um sie lauter oder leiser zu machen, wie bei GainNode. Sobald das Audiosignal für den gewünschten Effekt ausreichend verarbeitet wurde, kann es mit dem Eingang eines Ziels (BaseAudioContext.destination) verbunden werden, das den Ton an Lautsprecher oder Kopfhörer ausgibt. Diese letzte Verbindung ist nur erforderlich, wenn die Nutzer den Ton hören sollen.

Ein einfacher, typischer Arbeitsablauf für Web Audio sieht etwa so aus:

  1. Einen Audiokontext erstellen
  2. Innerhalb des Kontexts Quellen erstellen, beispielsweise <audio>, einen Oszillator oder einen Stream
  3. Effektknoten erstellen, beispielsweise für Hall, Biquad-Filter, Panning oder Kompression
  4. Das endgültige Ausgabeziel für das Audiosignal auswählen, beispielsweise die Systemlautsprecher
  5. Die Quellen mit den Effekten und die Effekte mit dem Ausgabeziel verbinden

Ein einfaches Kastendiagramm mit einem äußeren Kasten mit der Beschriftung „Audio context“ und drei inneren Kästen mit den Beschriftungen „Sources“, „Effects“ und „Destination“. Pfeile zwischen den inneren Kästen zeigen von links nach rechts und veranschaulichen den Fluss der Audioinformationen.

Die zeitliche Steuerung erfolgt mit hoher Präzision und geringer Latenz. Dadurch können Entwickler Code schreiben, der genau auf Ereignisse reagiert und selbst bei einer hohen Abtastrate bestimmte Samples gezielt anspricht. Anwendungen wie Drumcomputer und Sequenzer lassen sich damit gut umsetzen.

Mit der Web Audio API lässt sich auch steuern, wie Audio räumlich dargestellt wird. Auf Grundlage eines Quelle-Hörer-Modells ermöglicht sie die Steuerung des Panning-Modells und berücksichtigt die entfernungsbedingte Abschwächung, die durch eine sich bewegende Quelle oder einen sich bewegenden Hörer entsteht.

Hinweis: Eine ausführlichere Erklärung der Theorie hinter der Web Audio API finden Sie in unserem Artikel Grundlegende Konzepte hinter der Web Audio API.

Zielgruppe der Web Audio API

Für Personen, die mit Audio- oder Musikbegriffen nicht vertraut sind, kann die Web Audio API zunächst einschüchternd wirken. Wegen ihres großen Funktionsumfangs kann auch Entwicklern der Einstieg schwerfallen.

Sie können damit Audio in Ihre Website oder Anwendung einbinden, etwa um wie auf futurelibrary.no eine Atmosphäre zu schaffen oder akustisches Feedback für Formulare bereitzustellen. Sie können die API aber auch für fortgeschrittene interaktive Instrumente verwenden. Sie eignet sich daher sowohl für Entwickler als auch für Musiker.

Für Personen mit Programmiererfahrung, die eine Einführung in die Begriffe und den Aufbau der API benötigen, bieten wir ein einfaches Einführungstutorial.

Außerdem gibt es den Artikel Grundlegende Konzepte hinter der Web Audio API. Er erklärt, wie digitales Audio insbesondere im Rahmen der API funktioniert, und führt in einige der Konzepte ein, auf denen die API beruht.

Programmieren zu lernen ist wie Kartenspielen: Sie lernen die Regeln, spielen eine Runde, beschäftigen sich erneut mit den Regeln und spielen wieder. Falls nach dem ersten Tutorial und dem Artikel noch nicht alle theoretischen Grundlagen klar sind, können Sie mit einem fortgeschrittenen Tutorial weitermachen. Es baut auf dem ersten Tutorial auf und hilft Ihnen, das Gelernte anzuwenden und mit fortgeschritteneren Techniken einen Step-Sequenzer zu erstellen.

Weitere Tutorials und umfassendes Referenzmaterial zu allen Funktionen der API finden Sie in der Seitenleiste dieser Seite.

Wenn Sie mit der musikalischen Seite und musiktheoretischen Konzepten bereits vertraut sind und Instrumente entwickeln möchten, können Sie das fortgeschrittene Tutorial und die weiteren Materialien als Leitfaden verwenden. Das oben verlinkte Tutorial behandelt unter anderem die zeitliche Planung von Noten, die Erstellung eigener Oszillatoren und Hüllkurven sowie einen LFO.

Wenn Ihnen die Grundlagen der Programmierung noch nicht vertraut sind, sollten Sie sich zunächst einige JavaScript-Tutorials für Einsteiger ansehen und anschließend hierher zurückkehren. Einen guten Einstieg bietet unser JavaScript-Lernmodul für Einsteiger.

Schnittstellen der Web Audio API

Die Web Audio API umfasst zahlreiche Schnittstellen und zugehörige Ereignisse, die wir in neun Funktionsbereiche unterteilt haben.

Allgemeine Definition des Audiographen

Allgemeine Container und Definitionen, die Audiographen bei der Verwendung der Web Audio API strukturieren.

AudioContext

Die Schnittstelle AudioContext stellt einen Audiographen dar, der aus miteinander verbundenen Audiomodulen besteht, die jeweils durch einen AudioNode repräsentiert werden. Ein Audiokontext steuert die Erstellung der darin enthaltenen Knoten sowie die Ausführung der Audioverarbeitung oder -dekodierung. Sie müssen einen AudioContext erstellen, bevor Sie etwas anderes tun, da sämtliche Vorgänge innerhalb eines Kontexts stattfinden.

AudioNode

Die Schnittstelle AudioNode stellt ein Audioverarbeitungsmodul dar, beispielsweise eine Audioquelle wie ein HTML-Element <audio> oder <video>, ein Audioausgabeziel oder ein zwischengeschaltetes Verarbeitungsmodul wie einen Filter vom Typ BiquadFilterNode oder einen Lautstärkeregler vom Typ GainNode.

AudioParam

Die Schnittstelle AudioParam stellt einen audiobezogenen Parameter dar, beispielsweise einen Parameter eines AudioNode. Für ihn können ein bestimmter Wert oder eine Wertänderung festgelegt werden. Änderungen lassen sich für einen bestimmten Zeitpunkt und nach einem bestimmten Muster planen.

AudioParamMap

Stellt für eine Gruppe von AudioParam-Schnittstellen eine Map-ähnliche Schnittstelle bereit. Sie bietet die Methoden forEach(), get(), has(), keys() und values() sowie die Eigenschaft size.

BaseAudioContext

Die Schnittstelle BaseAudioContext dient als Basisdefinition für Audiographen zur Echtzeit- und Offlineverarbeitung, die durch AudioContext beziehungsweise OfflineAudioContext repräsentiert werden. BaseAudioContext verwenden Sie nicht direkt, sondern greifen über eine dieser beiden abgeleiteten Schnittstellen auf seine Funktionen zu.

Das Ereignis ended

Das Ereignis ended wird ausgelöst, wenn die Wiedergabe stoppt, weil das Ende des Mediums erreicht wurde.

Audioquellen definieren

Schnittstellen zur Definition von Audioquellen für die Verwendung mit der Web Audio API.

AudioScheduledSourceNode

AudioScheduledSourceNode ist eine übergeordnete Schnittstelle für verschiedene Arten von Audioquellenknoten. Sie ist ein AudioNode.

OscillatorNode

Die Schnittstelle OscillatorNode stellt eine periodische Wellenform dar, die sinus-, rechteck-, sägezahn- oder dreieckförmig oder benutzerdefiniert sein kann. Sie ist ein Audioverarbeitungsmodul vom Typ AudioNode, das eine Welle mit einer bestimmten Frequenz erzeugt.

AudioBuffer

Die Schnittstelle AudioBuffer stellt ein kurzes, im Arbeitsspeicher befindliches Audiomaterial dar. Es kann mithilfe der Methode BaseAudioContext.decodeAudioData aus einer Audiodatei oder mithilfe von BaseAudioContext.createBuffer aus Rohdaten erstellt werden. Nachdem das Audio in diese Form dekodiert wurde, kann es in einem AudioBufferSourceNode verwendet werden.

AudioBufferSourceNode

Die Schnittstelle AudioBufferSourceNode stellt eine Audioquelle dar, deren Audiodaten im Arbeitsspeicher in einem AudioBuffer gespeichert sind. Sie ist ein AudioNode, der als Audioquelle dient.

MediaElementAudioSourceNode

Die Schnittstelle MediaElementAudioSourceNode stellt eine Audioquelle dar, die aus einem HTML-Element <audio> oder <video> besteht. Sie ist ein AudioNode, der als Audioquelle dient.

MediaStreamAudioSourceNode

Die Schnittstelle MediaStreamAudioSourceNode stellt eine Audioquelle dar, die aus einem MediaStream besteht, beispielsweise aus einer Webcam, einem Mikrofon oder einem von einem entfernten Computer gesendeten Stream. Enthält der Stream mehrere Audiospuren, wird die Spur verwendet, deren id lexikografisch (alphabetisch) an erster Stelle steht. Sie ist ein AudioNode, der als Audioquelle dient.

MediaStreamTrackAudioSourceNode

Ein Knoten vom Typ MediaStreamTrackAudioSourceNode stellt eine Audioquelle dar, deren Daten aus einem MediaStreamTrack stammen. Wenn Sie den Knoten mit der Methode createMediaStreamTrackSource() erstellen, geben Sie die zu verwendende Spur an. Dadurch haben Sie mehr Kontrolle als mit MediaStreamAudioSourceNode.

Filter für Audioeffekte definieren

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

BiquadFilterNode

Die Schnittstelle BiquadFilterNode stellt einen einfachen Filter niedriger Ordnung dar. Sie ist ein AudioNode, der verschiedene Filterarten, Klangregler oder grafische Equalizer darstellen kann. Ein BiquadFilterNode hat immer genau einen Eingang und einen Ausgang.

ConvolverNode

Die Schnittstelle ConvolverNode ist ein AudioNode, der eine lineare Faltung auf einen bestimmten AudioBuffer anwendet und häufig zur Erzeugung eines Halleffekts verwendet wird.

DelayNode

Die Schnittstelle DelayNode stellt eine Verzögerungsleitung dar: ein Audioverarbeitungsmodul vom Typ AudioNode, das die Weitergabe eingehender Daten an den Ausgang verzögert.

DynamicsCompressorNode

Die Schnittstelle DynamicsCompressorNode bietet einen Kompressionseffekt, der die Lautstärke der lautesten Signalanteile verringert. So lassen sich Clipping und Verzerrungen vermeiden, die auftreten können, wenn mehrere Klänge gleichzeitig wiedergegeben und zusammengemischt werden.

GainNode

Die Schnittstelle GainNode stellt eine Lautstärkeänderung dar. Sie ist ein Audioverarbeitungsmodul vom Typ AudioNode, das die Eingangsdaten mit einem bestimmten Verstärkungsfaktor multipliziert, bevor es sie an den Ausgang weitergibt.

WaveShaperNode

Die Schnittstelle WaveShaperNode stellt einen nichtlinearen Verzerrer dar. Sie ist ein AudioNode, der mithilfe einer Kurve eine Waveshaping-Verzerrung auf das Signal anwendet. Neben deutlich hörbaren Verzerrungseffekten wird er häufig verwendet, um dem Signal einen wärmeren Klang zu verleihen.

PeriodicWave

Beschreibt eine periodische Wellenform, mit der sich die Ausgabe eines OscillatorNode formen lässt.

IIRFilterNode

Implementiert einen allgemeinen Filter mit unendlicher Impulsantwort (IIR). Dieser Filtertyp kann auch für Klangregler und grafische Equalizer verwendet werden.

Audioausgabeziele definieren

Nach der Verarbeitung Ihres Audios legen diese Schnittstellen fest, wo es ausgegeben wird.

AudioDestinationNode

Die Schnittstelle AudioDestinationNode stellt das endgültige Ausgabeziel einer Audioquelle in einem bestimmten Kontext dar – normalerweise die Lautsprecher Ihres Geräts.

MediaStreamAudioDestinationNode

Die Schnittstelle MediaStreamAudioDestinationNode stellt ein Audioausgabeziel dar, das aus einem WebRTC-MediaStream mit einem einzelnen AudioMediaStreamTrack besteht. Dieser kann ähnlich wie ein über getUserMedia() erhaltener MediaStream verwendet werden. Sie ist ein AudioNode, der als Audioausgabeziel dient.

Datenanalyse und Visualisierung

Schnittstellen zum Abrufen von Statistiken aus dem Audiographen für die Datenanalyse und Visualisierung.

AnalyserNode

Stellt einen Knoten dar, der Informationen zur Frequenz- und Zeitbereichsanalyse in Echtzeit bereitstellen kann.

AudioPlaybackStats

Ermöglicht den Zugriff auf Statistiken zu Dauer, Pufferunterläufen und Latenz des zugehörigen AudioContext. Anhand dieser Statistiken können Sie Audioverzögerungen und Wiedergabestörungen messen.

Audiokanäle aufteilen und zusammenführen

Mit diesen Schnittstellen können Sie Audiokanäle aufteilen und zusammenführen.

ChannelSplitterNode

Die Schnittstelle ChannelSplitterNode trennt die verschiedenen Kanäle einer Audioquelle in mehrere Mono-Ausgänge auf.

ChannelMergerNode

Die Schnittstelle ChannelMergerNode führt verschiedene Mono-Eingänge zu einem einzigen Ausgang zusammen. Jeder Eingang belegt dabei einen Kanal des Ausgangs.

Räumliche Audiowiedergabe

Mit diesen Schnittstellen können Sie Ihren Audioquellen räumliche Panning-Effekte hinzufügen.

AudioListener

Die Schnittstelle AudioListener stellt die Position und Ausrichtung der einzelnen hörenden Person in der räumlichen Audioszene dar.

PannerNode

Die Schnittstelle PannerNode stellt die Position und das Verhalten eines Audioquellensignals im dreidimensionalen Raum dar und ermöglicht komplexe Panning-Effekte.

StereoPannerNode

Die Schnittstelle StereoPannerNode stellt einen einfachen Stereo-Panning-Knoten dar, mit dem ein Audiostream nach links oder rechts verschoben werden kann.

Audioverarbeitung in JavaScript

Mit Audio-Worklets können Sie eigene Audioknoten definieren, die in JavaScript oder WebAssembly geschrieben sind. Audio-Worklets implementieren die Schnittstelle Worklet, eine schlankere Variante der Schnittstelle Worker.

AudioWorklet

Die Schnittstelle AudioWorklet ist über die Eigenschaft audioWorklet eines AudioContext-Objekts verfügbar. Mit ihr können Sie dem Audio-Worklet Module hinzufügen, die außerhalb des Haupt-Threads ausgeführt werden.

AudioWorkletNode

Die Schnittstelle AudioWorkletNode stellt einen AudioNode dar, der in einen Audiographen eingebunden ist und Nachrichten mit dem zugehörigen AudioWorkletProcessor austauschen kann.

AudioWorkletProcessor

Die Schnittstelle AudioWorkletProcessor stellt Audioverarbeitungscode dar, der in einem AudioWorkletGlobalScope ausgeführt wird, Audio direkt erzeugt, verarbeitet oder analysiert und Nachrichten mit dem zugehörigen AudioWorkletNode austauschen kann.

AudioWorkletGlobalScope

Die Schnittstelle AudioWorkletGlobalScope ist ein von WorkletGlobalScope abgeleitetes Objekt, das einen Worker-Kontext für die Ausführung eines Audioverarbeitungsskripts darstellt. Sie ermöglicht es, Audiodaten mit JavaScript direkt in einem Worklet-Thread statt im Haupt-Thread zu erzeugen, zu verarbeiten und zu analysieren.

Veraltet: Script-Processor-Knoten

Bevor Audio-Worklets definiert wurden, verwendete die Web Audio API ScriptProcessorNode für die Audioverarbeitung mit JavaScript. Da der Code im Haupt-Thread ausgeführt wird, ist die Leistung schlecht. ScriptProcessorNode bleibt aus historischen Gründen erhalten, ist aber als veraltet gekennzeichnet.

ScriptProcessorNode

Die Schnittstelle ScriptProcessorNode ermöglicht es, Audio mit JavaScript zu erzeugen, zu verarbeiten oder zu analysieren. Sie ist ein Audioverarbeitungsmodul vom Typ AudioNode, das mit zwei Puffern verbunden ist: einem für die aktuellen Eingangsdaten und einem für die Ausgangsdaten. Jedes Mal, wenn der Eingangspuffer neue Daten enthält, wird ein Ereignis an das Objekt gesendet, das die Schnittstelle AudioProcessingEvent implementiert. Der Event-Handler endet, sobald er den Ausgangspuffer mit Daten gefüllt hat.

audioprocess (Ereignis)

Das Ereignis audioprocess wird ausgelöst, wenn ein Eingangspuffer eines ScriptProcessorNode der Web Audio API zur Verarbeitung bereit ist.

AudioProcessingEvent

AudioProcessingEvent stellt Ereignisse dar, die auftreten, wenn ein Eingangspuffer eines ScriptProcessorNode zur Verarbeitung bereit ist.

Offline- und Hintergrundverarbeitung von Audio

Mit den folgenden Schnittstellen können Sie einen Audiographen im Hintergrund sehr schnell verarbeiten beziehungsweise rendern – in einen AudioBuffer statt über die Lautsprecher des Geräts.

OfflineAudioContext

Die Schnittstelle OfflineAudioContext ist eine AudioContext-Schnittstelle, die einen Audiographen aus miteinander verbundenen AudioNode-Knoten darstellt. Im Gegensatz zu einem normalen AudioContext gibt ein OfflineAudioContext das Audio nicht in Echtzeit wieder, sondern erzeugt es so schnell wie möglich in einem Puffer.

complete (Ereignis)

Das Ereignis complete wird ausgelöst, wenn das Rendering eines OfflineAudioContext abgeschlossen ist.

OfflineAudioCompletionEvent

OfflineAudioCompletionEvent stellt Ereignisse dar, die auftreten, wenn die Verarbeitung eines OfflineAudioContext abgeschlossen ist. Das Ereignis complete verwendet diese Schnittstelle.

Leitfäden und Tutorials

Beispiel und Tutorial: Einfaches Synthesizer-Keyboard

Dieser Artikel zeigt den Code und eine funktionsfähige Demo einer virtuellen Klaviatur, die Sie mit der Maus spielen können. Sie können zwischen den Standardwellenformen und einer benutzerdefinierten Wellenform wechseln. Die Gesamtlautstärke lässt sich über einen Schieberegler unterhalb der Klaviatur einstellen. In diesem Beispiel werden die folgenden Web-API-Schnittstellen verwendet: AudioContext, OscillatorNode, PeriodicWave und GainNode.

Fortgeschrittene Techniken: Audio erzeugen und zeitlich steuern

In diesem Tutorial behandeln wir die Erzeugung und Veränderung von Klängen sowie deren zeitliche Steuerung und Planung. Wir stellen das Laden von Samples, Hüllkurven, Filter, Wavetables und Frequenzmodulation vor. Wenn Ihnen diese Begriffe bereits vertraut sind und Sie erfahren möchten, wie Sie sie mit der Web Audio API einsetzen, sind Sie hier richtig.

Grundlagen der räumlichen Audiowiedergabe im Web

Als wäre die umfangreiche Vielfalt an Klangbearbeitungsoptionen der Web Audio API nicht schon genug, bietet sie auch Einrichtungen, um die Veränderung des Klangs zu simulieren, wenn ein Hörer sich um eine Tonquelle bewegt, zum Beispiel das Panning, wenn Sie sich in einem 3D-Spiel um eine Tonquelle bewegen. Der offizielle Begriff dafür ist räumliche Audioverarbeitung, und dieser Artikel behandelt die Grundlagen der Implementierung eines solchen Systems.

Grundlegende Konzepte der Web Audio API

Dieser Artikel erläutert einige Grundlagen der Audiotechnik, die erklären, wie die Funktionen der Web Audio API arbeiten. So können Sie fundierte Entscheidungen treffen, wenn Sie festlegen, wie Ihre App Audiosignale weiterleitet. Wenn Sie noch keine Erfahrung in der Tontechnik haben, erhalten Sie hier genügend Hintergrundwissen, um zu verstehen, warum die Web Audio API so funktioniert, wie sie funktioniert.

Hintergrund-Audiobearbeitung mit AudioWorklet

Dieser Artikel erklärt, wie Sie einen Audio-Worklet-Prozessor erstellen und in einer Web-Audio-Anwendung verwenden können.

Mehrere Parameter mit ConstantSourceNode steuern

Dieser Artikel zeigt, wie Sie mit einem ConstantSourceNode mehrere Parameter miteinander verknüpfen, sodass sie denselben Wert haben. Diesen Wert können Sie ändern, indem Sie den Parameter ConstantSourceNode.offset setzen.

Verwendung der Web Audio API

Werfen wir einen Blick darauf, wie man mit der Web Audio API beginnt. Wir werden kurz einige Konzepte untersuchen und dann ein einfaches Boombox-Beispiel studieren, das uns ermöglicht, einen Audiotrack zu laden, abzuspielen, zu pausieren und dessen Lautstärke sowie Stereo-Panorama 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 Klangregelgeräten und grafischen Equalizern verwendet werden. Die Filterantwortparameter können spezifiziert werden, sodass er nach Bedarf abgestimmt werden kann. Dieser Artikel erklärt, 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.

Web Audio API Best Practices

Es gibt kein strikt richtiges oder falsches Vorgehen beim Schreiben von kreativem Code. Solange Sie Sicherheit, Leistung und Zugänglichkeit berücksichtigen, können Sie sich Ihren eigenen Stil aneignen. In diesem Artikel teilen wir eine Reihe von Best Practices — Richtlinien, Tipps und Tricks für die Arbeit mit der Web Audio API.

Bibliotheken

  • Tone.js: ein Framework zur Erstellung interaktiver Musik im Browser.
  • howler.js: eine JavaScript-Audiobibliothek, die standardmäßig die Web Audio API nutzt und andernfalls auf HTML Audio zurückgreift. Sie bietet außerdem weitere nützliche Funktionen.
  • Mooog: jQuery-artige Verkettung von AudioNodes, Sends und Returns nach dem Vorbild eines Mischpults und mehr.
  • XSound: eine Bibliothek für die Web Audio API für Synthesizer, Effekte, Visualisierung, Aufnahmen und mehr.
  • OpenLang: eine Webanwendung für ein HTML-Video-Sprachlabor, die mit der Web Audio API Video und Audio aus verschiedenen Quellen aufzeichnet und in einer einzigen Datei zusammenführt (Quellcode auf GitHub).
  • Pts.js: vereinfacht die Visualisierung von Web Audio (Leitfaden).

Beispiele

Eine Reihe von Beispielen finden Sie in unserem Repository webaudio-examples auf GitHub.

Spezifikationen

Spezifikation
Web Audio API
# AudioContext

Browser-Kompatibilität

Siehe auch