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.

Vollständige Kompatibilität anzeigen
Mehr erfahren

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

Web-Audio-Konzepte und Nutzung

Die Web Audio API umfasst die Handhabung von Audiooperationen innerhalb eines Audiokontexts und wurde so konzipiert, dass sie modulares Routing ermöglicht. Grundlegende Audiooperationen werden mit Audionodes durchgeführt, die miteinander verbunden sind, um einen Audio-Routing-Graphen zu bilden. Mehrere Quellen — mit unterschiedlichen Arten von Kanal-Layouts — werden sogar innerhalb eines einzigen Kontexts unterstützt. Dieses modulare Design bietet die Flexibilität, komplexe Audiofunktionen mit dynamischen Effekten zu erstellen.

Audionodes sind über ihre Ein- und Ausgänge in Ketten und einfachen Netzen miteinander verbunden. Sie starten typischerweise mit einer oder mehreren Quellen. Quellen liefern Arrays von Samples — Messwerte 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 Ton-/Videodateien sein (wie AudioBufferSourceNode und MediaElementAudioSourceNode) und Audiostreams (MediaStreamAudioSourceNode). Tatsächlich sind Audiodateien nur Aufnahmen von Schallintensitäten selbst, die von Mikrofonen oder elektrischen Instrumenten aufgenommen werden und zu einer einzigen, komplizierten Welle gemischt werden.

Ausgaben dieser Nodes können mit Eingängen anderer Nodes verknüpft werden, die diese Streams von Tonsamples in verschiedene Streams mischen oder modifizieren. Eine häufige Modifikation ist das Multiplizieren der Samples mit einem Wert, um sie lauter oder leiser zu machen (so wie beim GainNode). Sobald der Ton ausreichend für den beabsichtigten Effekt bearbeitet wurde, kann er mit dem Eingang eines Ziels (BaseAudioContext.destination) verbunden werden, welches den Ton an die Lautsprecher oder Kopfhörer sendet. Diese letzte Verbindung ist nur notwendig, wenn der Benutzer das Audio hören soll.

Ein einfaches, typisches Workflow für Web-Audio könnte folgendermaßen aussehen:

Erstellen eines Audiokontexts
Innerhalb des Kontexts Quellen erstellen — wie <audio>, Oszillator, Stream
Erstellen von Effekt-Nodes, wie Hall, Biquad-Filter, Panner, Kompressor
Bestimmen des endgültigen Ziels des Audios, beispielsweise Ihre Systemlautsprecher
Verbinden der Quellen mit den Effekten und der Effekte mit dem Ziel

Ein einfaches Blockdiagramm mit einem äußeren Kasten mit der Bezeichnung Audiokontext und drei inneren Kästen mit der Bezeichnung Quellen, Effekte und Ziel. Die drei inneren Kästen haben Pfeile zwischen sich, die von links nach rechts zeigen und den Fluss von Audioinformationen anzeigen.

Das Timing wird mit hoher Präzision und geringer Latenz gesteuert, sodass Entwickler Code schreiben können, der genau auf Ereignisse reagiert und in der Lage ist, bestimmte Samples anzusprechen, auch bei einer hohen Samplerate. Anwendungen wie Drum Machines und Sequenzer sind daher sehr gut machbar.

Die Web Audio API ermöglicht es uns auch, zu steuern, wie Audio räumlich verteilt wird. Mit einem auf einem Quellen-Hörer-Modell basierenden System ermöglicht sie die Steuerung des Panning-Modells und behandelt die Entfernungsbedingte Abschwächung, die durch eine bewegte Quelle (oder einen bewegten Hörer) verursacht wird.

Hinweis: Details zur Theorie der Web Audio API finden Sie ausführlich in unserem Artikel Grundlegende Konzepte hinter der Web Audio API.

Zielgruppe der Web Audio API

Die Web Audio API kann einschüchternd wirken für diejenigen, die mit Audio- oder Musikbegriffen nicht vertraut sind. Da sie eine Vielzahl von Funktionen umfasst, 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 Sie beispielsweise Atmosphäre schaffen wie futurelibrary.no oder akustische Rückmeldungen zu Formularen. Aber sie kann auch verwendet werden, um fortgeschrittene interaktive Instrumente zu erstellen. In diesem Sinne ist sie sowohl für Entwickler als auch Musiker gleichermaßen geeignet.

Wir haben ein einfaches einführendes Tutorial für diejenigen, die mit Programmierung vertraut sind, aber eine gute Einführung in einige der Begriffe und Strukturen der API benötigen.

Es gibt auch einen Artikel über die grundlegenden Konzepte hinter der Web Audio API, der Ihnen hilft zu verstehen, wie digitale Audioarbeiten speziell im Bereich der API funktionieren. Dieser enthält auch eine gute Einführung in einige der Konzepte, auf denen die API basiert.

Programmieren lernen ist wie Karten spielen — man lernt die Regeln, dann spielt man, dann lernt man die Regeln erneut, dann spielt man erneut. 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 fortgeschrittene Techniken anzuwenden, um einen Step-Sequenzer aufzubauen.

Wir haben auch andere Tutorials und umfassendes Referenzmaterial verfügbar, das alle Funktionen der API abdeckt. Siehe die Sidebar auf dieser Seite für mehr.

Wenn Sie mehr mit der musikalischen Seite vertraut sind und musikalische Theorie-Konzepte kennen und Instrumente bauen möchten, dann können Sie mit dem fortgeschrittenen Tutorial und anderen als Leitfaden beginnen (das oben verlinkte Tutorial deckt das Planen von Noten, das Erstellen maßgeschneiderter Oszillatoren und Hüllkurven sowie eines LFO unter anderem ab.)

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

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-Graphs

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

AudioContext: Die AudioContext-Schnittstelle repräsentiert einen Audio-Verarbeitungsgrafen, der aus Audio-Modulen besteht, die miteinander verbunden sind, wobei jedes durch eine AudioNode dargestellt wird. Ein Audiokontext steuert die Erstellung der Nodes, die er enthält und die Ausführung der Audioverarbeitung 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 Audiomodul wie eine Audioquelle (z.B. ein HTML <audio> oder <video> Element), Audiouziel, Zwischenverarbeitungsmodul (z.B. ein Filter wie BiquadFilterNode oder Lautstärkeregler wie GainNode).
AudioParam: Die AudioParam-Schnittstelle repräsentiert einen Audio-bezogenen Parameter, wie einer von einem AudioNode. Er kann auf einen spezifischen Wert oder eine Wertänderung gesetzt werden und kann so geplant 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 dient als Basisdefinition für Online- und Offline-Audio-Verarbeitungsgrafen, wie sie durch AudioContext und OfflineAudioContext dargestellt werden. Sie würden BaseAudioContext nicht direkt verwenden, sondern seine Funktionen über eine der beiden vererbenden Schnittstellen nutzen.
Das ended-Ereignis: Das ended-Ereignis wird ausgelöst, wenn die Wiedergabe gestoppt wurde, weil das Ende der Medien erreicht wurde.

Definition von Audioquellen

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

AudioScheduledSourceNode: Der AudioScheduledSourceNode ist eine übergeordnete Schnittstelle für verschiedene Arten von Audioquellknoten-Schnittstellen. Er ist ein AudioNode.
OscillatorNode: Die OscillatorNode-Schnittstelle repräsentiert eine periodische Wellenform, die Sinus, Rechteck, Sägezahn, Dreieck oder benutzerdefiniert sein kann. Es ist ein AudioNode-Audiomodul, das eine gegebene Frequenz von Wellen 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 mit rohen Daten erstellt mit BaseAudioContext.createBuffer. Einmal in dieser Form dekodiert, kann das Audio dann in einen AudioBufferSourceNode eingefügt werden.
AudioBufferSourceNode: Die AudioBufferSourceNode-Schnittstelle stellt eine Audioquelle dar, die aus im Arbeitsspeicher 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-Element <audio> oder <video> besteht. Es ist ein AudioNode, der als Audioquelle fungiert.
MediaStreamAudioSourceNode: Die MediaStreamAudioSourceNode-Schnittstelle repräsentiert eine Audioquelle, die aus einem MediaStream besteht (wie eine Webcam, Mikrofon oder ein Stream, der von einem Remote-Computer gesendet wird). Wenn mehrere Audiotracks im Stream vorhanden sind, wird der Track, dessen id lexikografisch (alphabetisch) zuerst kommt, verwendet. Es ist ein AudioNode, das als Audioquelle fungiert.
MediaStreamTrackAudioSourceNode: Ein Knoten des Typs MediaStreamTrackAudioSourceNode repräsentiert eine Audioquelle, deren Daten von einem MediaStreamTrack stammen. Beim Erstellen des Knotens mit der Methode createMediaStreamTrackSource(), um den Knoten zu erstellen, geben Sie an, welcher Track verwendet werden soll. 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 repräsentiert einen einfachen Filter niedriger Ordnung. Es ist ein