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.
* Some parts of this feature may have varying levels of support.
Die Web Audio API bietet ein leistungsstarkes und vielseitiges System zur Steuerung von Audio im Web und ermöglicht es Entwicklern, Audioquellen auszuwählen, Effekte hinzuzufügen, Audio-Visualisierungen zu erstellen, räumliche Effekte (wie Panning) anzuwenden und vieles mehr.
Web-Audio-Konzepte und -Verwendung
Die Web Audio API umfasst das Verarbeiten von Audiooperationen innerhalb eines Audio-Kontexts und wurde so gestaltet, dass sie modulares Routing ermöglicht. Grundlegende Audiooperationen werden mit Audio-Knoten durchgeführt, die miteinander verbunden sind, um einen Audio-Routing-Graphen zu bilden. Mehrere Quellen — mit unterschiedlichen Kanal-Layouts — werden sogar in einem einzigen Kontext unterstützt. Dieses modulare Design bietet die Flexibilität, komplexe Audiofunktionen mit dynamischen Effekten zu erstellen.
Audio-Knoten werden durch ihre Eingänge und Ausgänge zu Ketten und einfachen Netzen verbunden. Sie beginnen typischerweise mit einer oder mehreren Quellen. Quellen liefern Arrays von Schallintensitäten (Samples) in sehr kleinen Zeitabschnitten, oft Zehntausende davon pro Sekunde. Diese können entweder mathematisch berechnet werden (wie z.B. der OscillatorNode
) oder es können Aufnahmen von Sound-/Videodateien sein (wie AudioBufferSourceNode
und MediaElementAudioSourceNode
) sowie Audiostreams (MediaStreamAudioSourceNode
). Tatsächlich sind Sounddateien nur Aufnahmen der Schallintensitäten selbst, die von Mikrofonen oder elektrischen Instrumenten kommen und zu einer einzigen, komplizierten Welle gemischt werden.
Ausgänge dieser Knoten können mit Eingängen anderer verbunden werden, die diese Ströme von Schallsamples mischen oder ändern, um verschiedene Ströme zu erzeugen. Eine häufige Modifikation besteht darin, die Samples mit einem Wert zu multiplizieren, um sie lauter oder leiser zu machen (wie im Fall von GainNode
). Sobald der Klang für den beabsichtigten Effekt ausreichend verarbeitet wurde, kann er mit dem Eingang eines Ziels (BaseAudioContext.destination
) verbunden werden, das den Klang an die Lautsprecher oder Kopfhörer sendet. Diese letzte Verbindung ist nur notwendig, wenn der Benutzer das Audio hören soll.
Ein einfacher, typischer Arbeitsablauf für Web-Audio sieht etwa so aus:
- Audio-Kontext erstellen
- Innerhalb des Kontexts Quellen erstellen — wie
<audio>
, Oszillator, Stream - Effekt-Knoten erstellen, wie Hall, Biquad-Filter, Panner, Kompressor
- Endziel des Audios wählen, beispielsweise Ihre Systemlautsprecher
- Quellen mit den Effekten und die Effekte mit dem Ziel verbinden.
Das Timing wird mit hoher Präzision und niedriger Latenz kontrolliert, sodass Entwickler Code schreiben können, der genau auf Ereignisse reagiert und in der Lage ist, auf spezifische Samples zu zielen, selbst bei einer hohen Abtastrate. Anwendungen wie Drum Machines und Sequenzer sind damit durchaus erreichbar.
Die Web Audio API ermöglicht es uns auch, die Spatialisation von Audio zu steuern. Basierend auf einem Modell von Quelle und Zuhörer erlaubt es die Kontrolle des Panning-Modells und behandelt die durch Entfernung induzierte Abschwächung, die durch eine sich bewegende Quelle (oder einen sich bewegenden Zuhörer) verursacht wird.
Hinweis: Sie können mehr über die Theorie der Web Audio API in unserem Artikel Grundkonzepte der Web Audio API erfahren.
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 Funktionalitäten enthält, kann es schwer sein, als Entwickler damit zu beginnen.
Sie kann verwendet werden, um Audio in Ihre Website oder Anwendung einzufügen, etwa durch Bereitstellung von Atmosphäre wie futurelibrary.no oder akustisches Feedback bei Formularen. Sie kann jedoch auch verwendet werden, um fortgeschrittene interaktive Instrumente zu erstellen. In diesem Sinne ist sie sowohl für Entwickler als auch für Musiker geeignet.
Für diejenigen, die mit Programmieren vertraut sind, aber eine gute Einführung in einige der Begriffe und die Struktur der API benötigen, haben wir ein einfaches Einführungstutorial.
Es gibt auch einen Artikel Grundlegende Konzepte der Web Audio API, der Ihnen hilft, zu verstehen, wie digitale Audioverarbeitung speziell im Bereich der API funktioniert. Dieser enthält auch eine gute Einführung in einige der Konzepte, auf denen die API aufgebaut ist.
Das Lernen von Programmierung ist wie das Erlernen von Kartenspielen — man lernt die Regeln, spielt, lernt die Regeln nochmal, spielt 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 fortgeschrittene Techniken anzuwenden, um einen Step-Sequencer zu erstellen.
Wir haben auch andere Tutorials und umfassendes Referenzmaterial, das alle Funktionen der API abdeckt. Weitere Informationen finden Sie in der Seitenleiste auf dieser Seite.
Wenn Sie mit den musikalischen Aspekten vertraut sind, mit Musikkonzepten vertraut sind, Instrumente erstellen möchten, können Sie direkt 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).
Wenn Sie mit den Programmiergrundlagen nicht vertraut sind, möchten Sie vielleicht zuerst einige JavaScript-Tutorials für Anfänger konsultieren und dann hierher zurückkehren — unser Lernmodul JavaScript für Anfänger ist ein guter Ausgangspunkt.
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 aufgeteilt haben.
Allgemeine Definition des Audio-Graphen
Allgemeine Container und Definitionen, die Audio-Graphen in der Verwendung der Web Audio API formen.
AudioContext
-
Die
AudioContext
-Schnittstelle repräsentiert einen Audioprozess-Graphen, der aus verbundenen Audiomodulen besteht, von denen jedes durch einenAudioNode
dargestellt wird. Ein Audiokontext steuert die Erstellung der Knoten, die er enthält, und die Ausführung der Audioverarbeitung oder -decodierung. Sie müssen einenAudioContext
erstellen, bevor Sie irgendetwas anderes tun, da alles innerhalb eines Kontexts passiert. AudioNode
-
Die
AudioNode
-Schnittstelle repräsentiert ein Audioprozessmodul wie eine Audioquelle (z.B. ein HTML<audio>
- oder<video>
-Element), ein Audiodestination, ein Zwischenverarbeitungsmodul (z.B. ein Filter wieBiquadFilterNode
oder eine Lautstärkeregelung wieGainNode
). AudioParam
-
Die
AudioParam
-Schnittstelle repräsentiert einen audiobezogenen Parameter, wie einen einesAudioNode
. Er kann auf einen bestimmten Wert oder eine Wertänderung gesetzt werden und kann so geplant werden, dass er zu einer bestimmten Zeit und einem bestimmten Muster erfolgt. AudioParamMap
-
Bietet eine map-ähnliche Schnittstelle zu einer Gruppe von
AudioParam
-Schnittstellen, was bedeutet, dass die MethodenforEach()
,get()
,has()
,keys()
undvalues()
sowie einesize
-Eigenschaft bereitgestellt werden. BaseAudioContext
-
Die
BaseAudioContext
-Schnittstelle fungiert als Basismedium für Online- und Offline-Audioprozessgraphen, die jeweils durchAudioContext
undOfflineAudioContext
dargestellt werden. Sie würdenBaseAudioContext
nicht direkt verwenden — Sie würden dessen Funktionen über eine dieser beiden ererbenden Schnittstellen verwenden. - 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 mehrere Arten von Audioquellen-Knoten-Schnittstellen. Es ist einAudioNode
. OscillatorNode
-
Die
OscillatorNode
-Schnittstelle repräsentiert eine periodische Wellenform, wie eine Sinus- oder Dreieckswelle. Es ist einAudioNode
-Audioprozessmodul, das eine gegebene Frequenz einer Welle erzeugt. AudioBuffer
-
Die
AudioBuffer
-Schnittstelle repräsentiert ein kurzes Audiodatei-Asset im Speicher, das aus einer Audiodatei mit der MethodeBaseAudioContext.decodeAudioData
erstellt wurde oder mit Rohdaten unter Verwendung vonBaseAudioContext.createBuffer
erstellt wurde. Nachdem es in diese Form decodiert wurde, kann das Audio dann in einenAudioBufferSourceNode
eingefügt werden. AudioBufferSourceNode
-
Die
AudioBufferSourceNode
-Schnittstelle repräsentiert eine Audioquelle, die aus im Speicher befindlichen Audiodaten besteht, die in einemAudioBuffer
gespeichert sind. Es ist einAudioNode
, das als Audioquelle fungiert. MediaElementAudioSourceNode
-
Die
MediaElementAudioSourceNode
-Schnittstelle repräsentiert eine Audioquelle, die aus einem HTML<audio>
oder<video>
-Element besteht. Es ist einAudioNode
, das als Audioquelle fungiert. MediaStreamAudioSourceNode
-
Die
MediaStreamAudioSourceNode
-Schnittstelle repräsentiert eine Audioquelle, die aus einemMediaStream
besteht (wie einer Webcam, einem Mikrofon oder einem Stream, der von einem entfernten Computer gesendet wird). Wenn mehrere Audiotracks im Stream vorhanden sind, wird der Track verwendet, dessenid
lexikografisch (alphabetisch) zuerst kommt. Es ist einAudioNode
, das als Audioquelle fungiert. MediaStreamTrackAudioSourceNode
-
Ein Knoten vom Typ
MediaStreamTrackAudioSourceNode
repräsentiert eine Audioquelle, deren Daten von einemMediaStreamTrack
stammen. Wenn Sie den Knoten mit der MethodecreateMediaStreamTrackSource()
erstellen, geben Sie an, welchen Track Sie verwenden möchten. Dies bietet mehr Kontrolle alsMediaStreamAudioSourceNode
.
Definition von Audio-Effekten und Filtern
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 einAudioNode
, das verschiedene Arten von Filtern, Tonregelsystemen oder grafischen Equalizern darstellen kann. EinBiquadFilterNode
hat immer genau einen Eingang und einen Ausgang. ConvolverNode
-
Die
ConvolverNode
-Schnittstelle ist einAudioNode
, das eine lineare Faltung auf einem gegebenenAudioBuffer
ausführt und oft verwendet wird, um einen Hall-Effekt zu erreichen. DelayNode
-
Die
DelayNode
-Schnittstelle repräsentiert eine Verzögerungsleitung; einAudioNode
-Audioprozessmodul, das eine Verzögerung zwischen dem Eintreffen von Eingangsdaten 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 das Clipping und die Verzerrung zu verhindern, die auftreten können, wenn mehrere Sounds gleichzeitig abgespielt und miteinander gemischt werden. GainNode
-
Die
GainNode
-Schnittstelle repräsentiert eine Änderung der Lautstärke. Es ist einAudioNode
-Audioprozessmodul, das eine gegebene Verstärkung auf die Eingangsdaten anwendet, bevor sie zum Ausgang weitergeleitet werden. WaveShaperNode
-
Die
WaveShaperNode
-Schnittstelle repräsentiert einen nichtlinearen Verzerrer. Es ist einAudioNode
, das eine Kurve verwendet, um eine Wellenformungs-Verzerrung auf das Signal anzuwenden. Neben offensichtlichen Verzerrungseffekten wird es häufig verwendet, um dem Signal ein warmes Gefühl zu verleihen. PeriodicWave
-
Beschreibt eine periodische Wellenform, die verwendet werden kann, um den Ausgang eines
OscillatorNode
zu formen. IIRFilterNode
-
Implementiert einen allgemeinen infinite impulse response (IIR)-Filter; dieser Filtertyp kann verwendet werden, um Tonregelgeräte und grafische Equalizer zu implementieren.
Definition von Audio-Destinationen
Sobald 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 – normalerweise die Lautsprecher Ihres Geräts. MediaStreamAudioDestinationNode
-
Die
MediaStreamAudioDestinationNode
-Schnittstelle repräsentiert eine Audio-Destination, bestehend aus einem WebRTCMediaStream
mit einem einzelnenAudioMediaStreamTrack
, der ähnlich verwendet werden kann wie einMediaStream
, der vongetUserMedia()
erhalten wurde. Es ist einAudioNode
, 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, Echtzeitfrequenz- und Zeitbereichsanalyseinformationen bereitzustellen, für Datenanalyse- und Visualisierungszwecke.
Aufteilung und Zusammenführung von Audiokanälen
Um Audiokanäle zu trennen 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 auf. ChannelMergerNode
-
Die
ChannelMergerNode
-Schnittstelle vereint verschiedene Mono-Eingänge zu einem einzigen Ausgang. Jeder Eingang wird verwendet, um einen Kanal des Ausgangs zu füllen.
Audio-Spatialisation
Diese Schnittstellen ermöglichen es Ihnen, Ihren Audioquellen Audio-Spatialisation und Panning-Effekte hinzuzufügen.
AudioListener
-
Die
AudioListener
-Schnittstelle repräsentiert die Position und Ausrichtung der einzigartigen Person, die das Audioszenario hört, das bei der Audiospatialisation verwendet wird. PannerNode
-
Die
PannerNode
-Schnittstelle repräsentiert die Position und das Verhalten eines Audiosignalquelle im 3D-Raum, das Ihnen ermöglicht, komplexe Panning-Effekte zu erstellen. StereoPannerNode
-
Die
StereoPannerNode
-Schnittstelle repräsentiert einen einfachen Stereopanner-Knoten, der verwendet werden kann, um einen Audiostream nach links oder rechts zu pannen.
Audioprozessierung in JavaScript
Mit Audio-Worklets können Sie benutzerdefinierte Audioknoten in JavaScript oder WebAssembly definieren. Audio-Worklets implementieren die Worklet
-Schnittstelle, eine leichtgewichtige Version der Worker
-Schnittstelle.
AudioWorklet
-
Die
AudioWorklet
-Schnittstelle ist über dasAudioContext
-ObjektsaudioWorklet
verfügbar und ermöglicht es Ihnen, Module zum Audio-Worklet hinzuzufügen, die abseits des Haupt-Threads ausgeführt werden. AudioWorkletNode
-
Die
AudioWorkletNode
-Schnittstelle repräsentiert einenAudioNode
, der in einem Audiograph eingebettet ist und Nachrichten an den entsprechendenAudioWorkletProcessor
senden kann. AudioWorkletProcessor
-
Die
AudioWorkletProcessor
-Schnittstelle repräsentiert Audioprozesscode, der in einemAudioWorkletGlobalScope
läuft, und Nachrichten an den entsprechendenAudioWorkletNode
senden kann. AudioWorkletGlobalScope
-
Die
AudioWorkletGlobalScope
-Schnittstelle ist einWorkletGlobalScope
-abgeleitetes Objekt, das einen Worker-Kontext darstellt, in dem ein Audioprozess-Skript ausgeführt wird; es ist darauf ausgelegt, die Erzeugung, Verarbeitung und Analyse von Audiodaten direkt mittels JavaScript in einem Worklet-Thread anstelle des Haupt-Threads zu ermöglichen.
Veraltet: Scriptprozessor-Knoten
Bevor Audioworklets definiert wurden, verwendete die Web Audio API den ScriptProcessorNode
für die JavaScript-basierte Audioprozessierung. Da der Code im Haupt-Thread ausgeführt wird, haben sie schlechte Leistung. Der ScriptProcessorNode
wird aus historischen Gründen beibehalten, ist aber als veraltet markiert.
ScriptProcessorNode
Veraltet-
Die
ScriptProcessorNode
-Schnittstelle ermöglicht die Erzeugung, Verarbeitung oder Analyse von Audio mittels JavaScript. Es ist einAudioNode
-Audioprozessmodul, das mit zwei Puffern verbunden ist, einem, der den aktuellen Eingang enthält, und einem, der den Ausgang enthält. Ein Ereignis, das dieAudioProcessingEvent
-Schnittstelle implementiert, wird an das Objekt gesendet, jedes Mal, wenn der Eingabepuffer neue Daten enthält, und der Ereignis-Handler wird 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 APIScriptProcessorNode
bereit zur Verarbeitung ist. AudioProcessingEvent
Veraltet-
Das
AudioProcessingEvent
repräsentiert Ereignisse, die auftreten, wenn einScriptProcessorNode
-Eingabepuffer bereit zur Verarbeitung ist.
Offline/Hintergrund-Audioprozessierung
Es ist möglich, einen Audiographen sehr schnell im Hintergrund zu verarbeiten/rendern – und dabei in einen AudioBuffer
zu rendern, anstatt ihn auf den Geräten der Nutzer abzuspielen – mit dem Folgenden.
OfflineAudioContext
-
Die
OfflineAudioContext
-Schnittstelle ist eineAudioContext
-Schnittstelle, die einen Audioprozessgraphen darstellt, der aus miteinander verbundenenAudioNode
s besteht. 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 einesOfflineAudioContext
abgeschlossen ist. OfflineAudioCompletionEvent
-
Das
OfflineAudioCompletionEvent
repräsentiert Ereignisse, die auftreten, wenn die Verarbeitung einesOfflineAudioContext
abgeschlossen ist. Dascomplete
-Ereignis verwendet diese Schnittstelle.
Leitfäden und Tutorials
- Beispiel und Tutorial: Einfaches Synthesizer-Keyboard
Dieser Artikel präsentiert den Code und ein funktionierendes Demo eines Videokeyboards, das Sie mit der Maus spielen können. Das Keyboard ermöglicht es Ihnen, zwischen den Standard-Wellenformen sowie einer benutzerdefinierten Wellenform umzuschalten. Sie können den Hauptverstärker mit einem Lautstärkeregler unter dem Keyboard steuern. Dieses Beispiel nutzt die folgenden Web-API-Schnittstellen:
AudioContext
,OscillatorNode
,PeriodicWave
undGainNode
.- Fortgeschrittene Techniken: Erstellen und Sequenzieren von Audio
In diesem Tutorial werden wir die Klangerschaffung und -modifikation sowie Timing und Planung behandeln. Wir werden das Laden von Samples, Hüllkurven, Filter, Wavetables und Frequenzmodulation einführen. Wenn Ihnen diese Begriffe vertraut sind und Sie nach einer Einführung in deren Anwendung mit der Web Audio API suchen, sind Sie hier genau richtig.
- Grundlagen der Webaudio-Räumlichkeit
Als ob das umfangreiche Angebot an Klangverarbeitung (und anderen) Optionen nicht schon genug wäre, bietet die Web Audio API auch Funktionalitäten, mit denen Sie den Unterschied im Klang simulieren können, wenn sich ein Zuhörer um eine Klangquelle bewegt, z.B. das Panning, wenn Sie sich in einem 3D-Spiel um eine Klangquelle bewegen. Der offizielle Begriff dafü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-Audiodatenverarbeitung mit AudioWorklet
Dieser Artikel erklärt, wie man einen Audio Worklet Prozessor erstellt und in einer Web Audio-Anwendung verwendet.
- Steuerung mehrerer Parameter mit ConstantSourceNode
Dieser Artikel demonstriert, wie Sie einen
ConstantSourceNode
verwenden, um mehrere Parameter miteinander zu verknüpfen, sodass sie denselben Wert teilen können, der durch Setzen des Werts des ParametersConstantSourceNode.offset
geändert werden kann.- Verwenden von IIR-Filtern
Das
IIRFilterNode
-Interface der Web Audio API ist einAudioNode
-Prozessor, der einen allgemeinen Infinite Impulse Response (IIR)-Filter implementiert; dieser Filtertyp kann zur Implementierung von Klangregelgeräten und grafischen Equalizern verwendet werden, und die Filterantwortparameter können spezifiziert werden, sodass er nach Bedarf abgestimmt werden kann. Dieser Artikel erklärt, wie man einen solchen implementiert und an einem einfachen Beispiel verwendet.- Verwendung der Web Audio API
Schauen wir uns an, wie man mit der Web Audio API beginnt. Wir werden kurz einige Konzepte betrachten und dann ein einfaches Boombox-Beispiel untersuchen, das es uns ermöglicht, einen Audiotrack zu laden, abzuspielen und zu pausieren sowie die Lautstärke und das Stereo-Panning zu ändern.
- Visualisierungen mit Web Audio API
Eines der interessantesten Merkmale 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 Anwendungsfälle.
- Web Audio API Best Practices
Es gibt keine strikt richtige oder falsche Methode beim Schreiben von kreativem Code. Solange Sie Sicherheit, Leistung und Barrierefreiheit berücksichtigen, können Sie Ihren eigenen Stil adaptieren. 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 können eine Reihe von Beispielen in unserem webaudio-examples Repo auf GitHub finden.
Spezifikationen
Specification |
---|
Web Audio API # AudioContext |
Browser-Kompatibilität
Loading…
Siehe auch
Tutorials/Leitfäden
- Grundkonzepte der Web Audio API
- Verwendung der Web Audio API
- Fortgeschrittene Techniken: Klangerzeugung, Sequenzierung, Timing, Planung
- Autoplay-Leitfaden für Medien- und Web-Audio-APIs
- Verwendung von IIR-Filtern
- Visualisierungen mit der Web Audio API
- Grundlagen der Web-Audio-Spatialisation
- Steuerung mehrerer Parameter mit ConstantSourceNode
- Mischung von Positionsaudio und WebGL (2012)
- Entwicklung von Spieleanwendungen mit der Web Audio API (2012)
Bibliotheken
- Tone.js: ein Framework zur Erstellung interaktiver Musik im Browser.
- howler.js: eine JS-Audiobibliothek, die standardmäßig auf der Web Audio API basiert und auf HTML Audio zurückfällt, sowie andere nützliche Funktionen bietet.
- Mooog: jQuery-artige Verkettung von AudioNodes, mixerähnliche Send/Return und mehr.
- XSound: Web Audio API-Bibliothek für Synthesizer, Effekte, Visualisierung, Aufnahme usw.
- OpenLang: HTML-Videosprachlabor-Webanwendung unter Verwendung der Web Audio API, um Video und Audio aus verschiedenen Quellen aufzunehmen und zu einem einzigen File zu kombinieren (Quelle auf GitHub)
- Pts.js: Vereinfacht die Audio-Visualisierung im Web (Leitfaden)