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, das es Entwicklern ermöglicht, 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 die Handhabung von Audiooperationen innerhalb eines Audio-Kontextes und wurde entwickelt, um modulares Routing zu ermöglichen. Grundlegende Audiooperationen werden mit Audio-Knoten durchgeführt, die miteinander verbunden sind, um einen Audio-Routing-Graph zu bilden. Mehrere Quellen — mit verschiedenen Arten von Kanal-Layouts — 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 zu Ketten und einfachen Netzen verbunden. Sie beginnen typischerweise mit einer oder mehreren Quellen. Quellen liefern Arrays von Samples — Messungen der Amplitude des Audiosignals zu aufeinanderfolgenden Zeitpunkten — oft Zehntausende pro Sekunde. Diese könnten entweder mathematisch berechnet werden (wie zum Beispiel OscillatorNode) oder sie können Aufnahmen aus Sound-/Videodateien (wie AudioBufferSourceNode und MediaElementAudioSourceNode) und Audio-Streams (MediaStreamAudioSourceNode) sein. Tatsächlich sind Sounddateien nur Aufnahmen von Klangintensitäten selbst, die von Mikrofonen oder elektrischen Instrumenten kommen und zu einer einzigen komplizierten Welle zusammengeführt werden.

Ausgänge dieser Knoten könnten mit Eingängen anderer Knoten verbunden werden, die diese Klangstrom-Samples in unterschiedliche Ströme mischen oder modifizieren. Eine gängige Modifikation ist das Multiplizieren der Samples mit einem Wert, um sie lauter oder leiser zu machen (wie es beim GainNode der Fall ist). Sobald der Klang ausreichend für den beabsichtigten Effekt verarbeitet ist, kann er mit dem Eingang eines Ziels (BaseAudioContext.destination) verbunden werden, das den Klang an Lautsprecher oder Kopfhörer sendet. Diese letzte Verbindung ist nur erforderlich, wenn der Benutzer das Audio hören soll.

Ein einfacher, typischer Workflow für Web-Audio könnte wie folgt aussehen:

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

Ein einfaches Blockdiagramm mit einem äußeren Kasten, der mit Audio-Kontext beschriftet ist, und drei inneren Kästen, die mit Quellen, Effekten und Ziel beschriftet sind. Die drei inneren Kästen haben Pfeile dazwischen, die von links nach rechts zeigen, um den Fluss der Audioinformationen anzuzeigen.

Die Zeitsteuerung 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, gezielt auf bestimmte Samples, sogar bei einer hohen Abtastrate, zuzugreifen. So sind Anwendungen wie Drumcomputer und Sequenzer in greifbarer Nähe.

Die Web Audio API ermöglicht es uns auch, zu kontrollieren, wie Audio räumlich verteilt wird. Mit einem System basierend auf einem Quell-Listener-Modell ermöglicht sie die Kontrolle des Panning-Modells und befasst sich mit abstandsbedingter Abschwächung, die durch eine sich bewegende Quelle (oder einen sich bewegenden Hörer) verursacht wird.

Hinweis: Sie können über die Theorie der Web Audio API in unserem Artikel Grundlegende Konzepte der Web Audio API ausführlicher lesen.

Zielgruppe der Web Audio API

Die Web Audio API kann für diejenigen einschüchternd wirken, die nicht mit Audio- oder Musikbegriffen vertraut sind, und da sie eine Fülle an Funktionen beinhaltet, kann es schwierig sein, als Entwickler den Einstieg zu finden.

Sie kann verwendet werden, um Audio in Ihre Website oder Anwendung zu integrieren, entweder indem eine Atmosphäre wie futurelibrary.no bereitgestellt wird oder auditive Rückmeldungen zu Formularen geben. Sie kann jedoch auch verwendet werden, um fortgeschrittene interaktive Instrumente zu erstellen. Mit diesem Hintergrund ist sie sowohl für Entwickler als auch Musiker geeignet.

Wir haben ein einfaches Einführungstutorial für diejenigen, die mit dem Programmieren 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 der Web Audio API, der Ihnen hilft, zu verstehen, wie digitale Audio im Bereich der API funktioniert. Dieser enthält 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 zu helfen, das Gelernte zu üben und einige fortgeschrittenere Techniken anzuwenden, um einen Schrittsequenzer aufzubauen.

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

Wenn Sie mit der musikalischen Seite der Dinge vertrauter sind, mit Konzepten der Musiktheorie vertraut sind und Instrumente zu bauen beginnen möchten, können Sie direkt mit dem fortgeschrittenen Tutorial und anderen als Leitfaden anfangen (das oben verlinkte Tutorial behandelt das Planen von Notizen, Erstellen von maßgeschneiderten Oszillatoren und Hüllkurven, sowie ein LFO unter anderem).

Wenn Sie nicht mit den Grundlagen der Programmierung vertraut sind, sollten Sie vielleicht zuerst einige JavaScript-Tutorials für Anfänger konsultieren und dann hierher zurückkehren — unser JavaScript-Lernmodul für Anfänger ist ein guter Anfangspunkt.

Schnittstellen der Web Audio API

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

Allgemeine Definition von Audio-Graphen

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

AudioContext: Die AudioContext-Schnittstelle repräsentiert einen Audio-Verarbeitungsgraphen, der aus miteinander verknüpften Audio-Modulen besteht, die jeweils durch einen AudioNode dargestellt werden. Ein Audio-Kontext steuert die Erstellung der darin enthaltenen Knoten und die Ausführung der Audiobearbeitung oder Dekodierung. Sie müssen ein AudioContext erstellen, bevor Sie etwas anderes tun, da alles innerhalb eines Kontextes passiert.
AudioNode: Die AudioNode-Schnittstelle repräsentiert ein Audio-Verarbeitungsmodul wie eine Audioquelle (z.B. ein HTML <audio> oder <video> Element), Audioziel, Zwischenverarbeitungsmodul (z.B. ein Filter wie BiquadFilterNode) oder Lautstärkeregelung wie GainNode).
AudioParam: Die AudioParam-Schnittstelle repräsentiert einen audio-bezogenen Parameter, wie einen von einem AudioNode. Sie kann auf einen bestimmten Wert oder eine Wertänderung gesetzt werden und kann programmiert werden, um zu einem bestimmten Zeitpunkt und einem bestimmten Muster zu erfolgen.
AudioParamMap: Bietet eine kartenä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 fungiert als Basisdefinition für Online- und Offline-Audioverarbeitungsgraphen, die jeweils durch AudioContext und OfflineAudioContext dargestellt werden. Sie würden BaseAudioContext nicht direkt verwenden — Sie würden seine Funktionen über eine dieser 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.

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 Audioquellenknotenschnittstellen. Es ist ein AudioNode.
OscillatorNode: Die OscillatorNode-Schnittstelle repräsentiert eine periodische Wellenform, wie eine Sinus- oder Dreieckswelle. Es ist ein AudioNode Audio-Verarbeitungsmodul, das eine bestimmte Frequenz der Welle erzeugt.
AudioBuffer: Die AudioBuffer-Schnittstelle stellt ein kurzes Audio-Asset dar, das im Speicher residiert, erstellt aus einer Audiodatei mithilfe der Methode BaseAudioContext.decodeAudioData oder erstellt mit Rohdaten mithilfe von BaseAudioContext.createBuffer. Sobald es in diese Form dekodiert 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. Es ist ein AudioNode, das als Audioquelle fungiert.
MediaElementAudioSourceNode: Die MediaElementAudioSourceNode-Schnittstelle stellt eine Audioquelle dar, bestehend aus einem HTML <audio> oder <video> Element. Es ist ein AudioNode, das als Audioquelle fungiert.
MediaStreamAudioSourceNode: Die MediaStreamAudioSourceNode-Schnittstelle stellt eine Audioquelle dar, die aus einem MediaStream besteht (wie eine Webcam, ein Mikrofon oder ein Stream, der von einem entfernten Computer gesendet wird). Wenn mehrfach Audiotracks im Stream vorhanden sind, wird der Track verwendet, dessen id lexikographisch (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. Bei der Erstellung des Knotens mithilfe der createMediaStreamTrackSource() Methode geben Sie an, welcher Track verwendet werden soll. Dies bietet mehr Kontrolle als MediaStreamAudioSourceNode.

Definition von Audioeffektfiltern

Schnittstellen für die Definition von Effekten, die Sie auf Ihre Audioquellen anwenden möchten.

BiquadFilterNode: Die BiquadFilterNode-Schnittstelle repräsentiert einen einfachen Tiefordnungsfilter. Es 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 angegebenen AudioBuffer durchführt und häufig verwendet wird, um einen Hall-Effekt zu erzielen.
DelayNode: Die DelayNode-Schnittstelle repräsentiert eine Verzögerungsleitung; ein AudioNode Audio-Verarbeitungsmodul, das eine Verzögerung zwischen dem Empfang von Eingangsdaten und deren Propagation zum Ausgang verursacht.
DynamicsCompressorNode: Die DynamicsCompressorNode-Schnittstelle bietet einen Kompressionseffekt, der die Lautstärke der lautesten Teile des Signals senkt, um das Schneiden und Verzerrungen zu verhindern, die auftreten können, wenn mehrere Sounds gleichzeitig gespielt und multiplexiert werden.
GainNode: Die GainNode-Schnittstelle stellt eine Lautstärkenänderung dar. Es ist ein AudioNode Audio-Verarbeitungsmodul, das eine bestimmte Verstärkung auf die Eingangsdaten anwendet, bevor sie an den Ausgang weitergeleitet werden.
WaveShaperNode: Die WaveShaperNode-Schnittstelle stellt einen nichtlinearen Verzerrer dar. Es ist ein AudioNode, das eine Kurve verwendet, um eine Wellenshaping-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 die Ausgabe eines OscillatorNode zu formen.
IIRFilterNode: Implementiert einen allgemeinen Infinite Impulse Response (IIR) Filter; dieser Filtertyp kann verwendet werden, um Klangregelsysteme und grafische Equalizer zu implementieren.

Definition von Audiozielen

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 ein Audioziel, das aus einem WebRTC MediaStream mit einem einzigen AudioMediaStreamTrack besteht, das auf ähnliche Weise wie ein MediaStream verwendet werden kann, das von getUserMedia() erhalten wird. Es ist ein AudioNode, das als Audioziel fungiert.

Datenanalyse und Visualisierung

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

AnalyserNode: Die AnalyserNode-Schnittstelle repräsentiert einen Knoten, der in der Lage ist, Echtzeit-Frequenz- und Zeitbereichsanalyseinformationen bereitzustellen, zum Zweck 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 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-Räumlichkeit

Diese Schnittstellen ermöglichen es Ihnen, Audio-Raumklangeffekte zu Ihren Audioquellen hinzuzufügen.

AudioListener: Die AudioListener-Schnittstelle repräsentiert die Position und Orientierung der einzigartigen Person, die die Audioszene hört, die in der Audio-Räumlichkeit verwendet wird.
PannerNode: Die PannerNode-Schnittstelle repräsentiert die Position und das Verhalten eines Audiosignals im 3D-Raum, wodurch komplexe Panning-Effekte erstellt werden können.
StereoPannerNode: Die StereoPannerNode-Schnittstelle repräsentiert einen einfachen Stereo-Panner-Knoten, der verwendet werden kann, um einen Audiostream nach links oder rechts zu schwenken.

Audioverarbeitung in JavaScript

Mithilfe von Audio-Worklets können Sie benutzerdefinierte Audionoten schreiben, die in JavaScript oder WebAssembly ausgeführt werden. 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 zum 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 in einem 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 vom WorkletGlobalScope abgeleitetes Objekt, das einen Worker-Kontext darstellt, in dem ein Audiobearbeitungsskript ausgeführt wird. Sie ist so konzipiert, dass die Generierung, Verarbeitung und Analyse von Audiodaten direkt mit JavaScript in einem Worklet-Thread und nicht im Haupt-Thread ermöglicht wird.

Veraltet: Skriptprozessor-Knoten

Bevor Audio-Worklets definiert wurden, nutzte die Web Audio API den ScriptProcessorNode für JavaScript-basierte Audiobearbeitung. Da der Code im Haupt-Thread läuft, haben sie eine schlechte Leistung. Der ScriptProcessorNode wird aus historischen Gründen beibehalten, ist jedoch als veraltet markiert.

ScriptProcessorNode: Die ScriptProcessorNode-Schnittstelle ermöglicht die Generierung, Verarbeitung oder Analyse von Audio mithilfe von JavaScript. Es ist ein AudioNode Audio-Verarbeitungsmodul, das mit zwei Puffern verbunden ist, einer enthält den aktuellen Eingang, einer enthält den Ausgang. Ein Ereignis, das die AudioProcessingEvent Schnittstelle implementiert, wird an das Objekt gesendet, wenn der Eingabepuffer neue Daten enthält, und der Ereignishandler beendet sich, wenn er den Ausgabepuffer mit Daten gefüllt hat.
audioprocess (Ereignis): Das audioprocess Ereignis wird gefeuert, wenn ein Eingabepuffer eines Web Audio API ScriptProcessorNode bereit zur Verarbeitung ist.
AudioProcessingEvent: Das AudioProcessingEvent stellt Ereignisse dar, die auftreten, wenn ein ScriptProcessorNode Eingabepuffer bereit zur Verarbeitung ist.

Offline-/Hintergrund-Audiobearbeitung

Es ist möglich, einen Audio-Graphen sehr schnell im Hintergrund zu verarbeiten/rendern — ihn in einen AudioBuffer zu rendern, anstatt auf die Lautsprecher des Geräts — mit folgendem.

OfflineAudioContext: Die OfflineAudioContext-Schnittstelle ist ein AudioContext Schnittstelle, die einen Audiographen darstellt, der aus miteinander verbundenen AudioNodes aufgebaut ist. Im Gegensatz zu einem standardmäßigen AudioContext rendert ein OfflineAudioContext das Audio nicht wirklich, sondern generiert es in einem Puffer so schnell wie möglich.
complete (Ereignis): Das complete Ereignis wird ausgelöst, wenn die Verarbeitung eines OfflineAudioContext beendet ist.
OfflineAudioCompletionEvent: Das OfflineAudioCompletionEvent repräsentiert Ereignisse, 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 präsentiert den Code und eine funktionierende Demo eines Video-Keyboards, das Sie mit der Maus spielen können. Das Keyboard ermöglicht das Umschalten zwischen den Standard-Wellenformen sowie einer benutzerdefinierten Wellenform. Sie können die Hauptverstärkung mit einem Lautstärkeregler unter dem Keyboard steuern. Dieses Beispiel nutzt die folgenden Web-API-Schnittstellen: AudioContext, OscillatorNode, PeriodicWave und GainNode.
Best Practices für die Web Audio API: Es gibt keine strikt richtige oder falsche Methode, wenn es um das Schreiben von kreativem Code geht. 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.
Fortgeschrittene Techniken: Erstellen und Sequenzieren von Audio: In diesem Tutorial werden wir die Erstellung und Modifikation von Sound sowie Timing und Planung behandeln. Wir werden Probenladen, Hüllkurven, Filter, Wavetables und Frequenzmodulation einführen. Wenn Sie mit diesen Begriffen vertraut sind und nach einer Einführung in ihre Anwendung mit der Web Audio API suchen, sind Sie hier genau richtig.
Grundlagen der Audio-Räumlichkeit im Web: Als ob die umfangreiche Bandbreite an Klangverarbeitungs- (und anderen) Optionen noch nicht genug wäre, enthält die Web Audio API auch Möglichkeiten, um die Unterschiede im Klang zu emulieren, wenn ein Zuhörer sich um eine Schallquelle herum bewegt, zum Beispiel ein Panning, wenn Sie sich innerhalb eines 3D-Spiels um eine Schallquelle bewegen. Der offizielle Begriff hierfü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-Audiobearbeitung mit AudioWorklet: Dieser Artikel erklärt, wie Sie einen Audio-Worklet-Prozessor erstellen und in einer Web-Audio-Anwendung verwenden können.
Steuerung mehrerer Parameter mit ConstantSourceNode: Dieser Artikel demonstriert, wie Sie einen ConstantSourceNode verwenden können, um mehrere Parameter so zu verknüpfen, dass sie denselben Wert teilen, welcher durch das Setzen 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 beginnt. Wir werden kurz einige Konzepte betrachten und dann ein einfaches Boombox-Beispiel studieren, das es uns ermöglicht, einen Audiotrack zu laden, abzuspielen und anzuhalten sowie die Lautstärke und die Stereoverteilung 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. Dieser Filtertyp kann zur Implementierung von Tonsteuergeräten und grafischen Equalizern genutzt werden, und die Filterantwortparameter können spezifiziert werden, sodass er nach Bedarf angepasst werden kann. Dieser Artikel beschreibt, 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.

Beispiele

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

Spezifikationen

Spezifikation
Web Audio API # AudioContext

Tone.js: Ein Framework für die Erstellung interaktiver Musik im Browser.
howler.js: Eine JS-Audiobibliothek, die standardmäßig die Web Audio API verwendet und bei Bedarf auf HTML Audio zurückfällt sowie weitere nützliche Funktionen bietet.
Mooog: jQuery-ähnliches Ketten von AudioNodes, Mischpult-ähnliche Sends/Returns und mehr.
XSound: Web Audio API-Bibliothek für Synthesizer, Effekte, Visualisierung, Aufnahme usw.
OpenLang: HTML-Video-Sprachlabor-Webanwendung, die die Web Audio API verwendet, um Video und Audio von verschiedenen Quellen in einer Datei zusammenzuführen und aufzunehmen (Quelle auf GitHub)
Pts.js: Vereinfacht die Web-Audio-Visualisierung (Leitfaden)

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden