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, das es Entwicklern ermöglicht, Audioquellen auszuwählen, Effekte hinzuzufügen, Audio-Visualisierungen zu erstellen, räumliche Effekte (wie Panning) anzuwenden und vieles mehr.

Konzepte und Nutzung der Web Audio API

Die Web Audio API umfasst die Verarbeitung von Audiooperationen in einem Audio-Kontext und wurde entwickelt, um eine modulare Weiterleitung zu ermöglichen. 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 selbst in einem einzelnen Kontext unterstützt. Dieses modulare Design bietet die Flexibilität, komplexe Audiofunktionen mit dynamischen Effekten zu erstellen.

Audio-Knoten sind durch ihre Eingänge und Ausgänge in Ketten und einfachen Netzwerken miteinander verbunden. Sie beginnen typischerweise mit einer oder mehreren Quellen. Quellen liefern Arrays von Schallintensitäten (Samples) in sehr kleinen Zeitintervallen, oft zehntausende pro Sekunde. Diese können entweder mathematisch berechnet werden (wie z.B. OscillatorNode), oder sie können Aufnahmen von Audio-/Videodateien sein (wie AudioBufferSourceNode und MediaElementAudioSourceNode) und Audiostreams (MediaStreamAudioSourceNode). Tatsächlich sind Audiodateien selbst nur Aufnahmen von Schallintensitäten, die von Mikrofonen oder elektrischen Instrumenten kommen und in eine einzige, komplizierte Welle gemischt werden.

Die Ausgänge dieser Knoten könnten mit den Eingängen anderer Knoten verbunden werden, die diese Streams von Audiosamples 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 (wie es bei GainNode der Fall ist). Sobald der Ton für den beabsichtigten Effekt ausreichend bearbeitet ist, kann er mit dem Eingang eines Ziels (BaseAudioContext.destination) verbunden werden, das den Ton an die Lautsprecher oder Kopfhörer sendet. Diese letzte Verbindung ist nur notwendig, wenn der Benutzer den Ton hören soll.

Ein einfacher, typischer Arbeitsfluss für Web-Audio könnte folgendermaßen aussehen:

  1. Erstellen Sie einen Audio-Kontext
  2. Erstellen Sie innerhalb des Kontexts Quellen — wie <audio>, Oszillator, Stream
  3. Erstellen Sie Effektknoten, wie Nachhall, Biquad-Filter, Panner, Kompressor
  4. Wählen Sie das endgültige Audioziel, zum Beispiel Ihre Systemlautsprecher
  5. Verbinden Sie die Quellen mit den Effekten und die Effekte mit dem Ziel.

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

Das Timing wird mit hoher Präzision und niedriger Latenz gesteuert, was es Entwicklern ermöglicht, Code zu schreiben, der präzise auf Ereignisse reagiert und in der Lage ist, bestimmte Samples selbst bei einer hohen Sample-Rate genau anzusprechen. Anwendungen wie Drum Machines und Sequencer sind daher leicht realisierbar.

Die Web Audio API erlaubt uns auch, wie Audio räumlich dargestellt wird, zu steuern. Durch ein System, das auf einem Quell-Listener-Modell basiert, erlaubt sie die Kontrolle des Panning-Modells und behandelt distanzbezogene Dämpfung, die durch eine bewegliche Quelle (oder einen beweglichen Zuhörer) verursacht wird.

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

Zielgruppe der Web Audio API

Die Web Audio API kann für diejenigen, die nicht mit Audio- oder Musikterminologie vertraut sind, einschüchternd wirken. Da sie einen großen Funktionsumfang bietet, kann es schwierig sein, als Entwickler den Einstieg zu finden.

Sie kann verwendet werden, um Audio in Ihre Website oder Anwendung zu integrieren, z.B. Stimmung wie bei futurelibrary.no Atmosphären zu schaffen oder akustisches Feedback in Formularen zu geben. Sie kann jedoch auch verwendet werden, um fortschrittliche interaktive Instrumente zu erstellen. In Anbetracht dessen 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 Grundlegende Konzepte hinter der Web Audio API, der Ihnen hilft zu verstehen, wie digitale Audioverarbeitung funktioniert, insbesondere im Rahmen der API. Dieser enthält auch eine gute Einführung in einige der Konzepte, auf denen die API basiert.

Das Erlernen der 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 Step Sequencer zu bauen.

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

Wenn Sie mit der musikalischen Seite vertrauter sind, mit Konzepten der Musiktheorie vertraut sind und anfangen möchten, Instrumente zu bauen, dann können Sie mit dem fortgeschrittenen Tutorial und anderen als Leitfaden beginnen (das oben verlinkte Tutorial behandelt das Planen von Noten, das Erstellen von speziellen Oszillatoren und Hüllkurven sowie eines LFOs unter anderem).

Wenn Sie mit den Programmiergrundlagen nicht vertraut sind, möchten Sie vielleicht zuerst einige JavaScript-Anfängertutorials konsultieren und dann hierher zurückkehren — sehen Sie unser JavaScript-Lernmodul für Anfänger für einen großartigen Ausgangspunkt.

Web Audio API Schnittstellen

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

Allgemeine Definition des Audio-Graphen

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

AudioContext

Die AudioContext-Schnittstelle repräsentiert einen Audioverarbeitungsgraphen, der aus Audio-Modulen besteht, die miteinander verbunden sind, wobei jedes durch einen AudioNode repräsentiert wird. Ein Audiokontext steuert die Erstellung der Knoten, 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 geschieht.

AudioNode

Die AudioNode-Schnittstelle repräsentiert ein Audiomodul wie eine Audioquelle (z.B. ein HTML-<audio>- oder -<video>-Element), einen Audiosender, ein Zwischenverarbeitungsmodul (z.B. einen Filter wie BiquadFilterNode, oder eine Lautstärkeregelung wie GainNode).

AudioParam

Die AudioParam-Schnittstelle repräsentiert einen audiobezogenen Parameter, wie einen von einem AudioNode. Er kann auf einen bestimmten Wert festgelegt werden oder eine Änderung des Wertes darstellen und kann geplante Änderungen zu einem bestimmten Zeitpunkt und nach einem bestimmten Muster vornehmen.

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 bietet.

BaseAudioContext

Die BaseAudioContext-Schnittstelle fungiert als Basisdefinition für Online- und Offline-Audioverarbeitungsgraphen, wie sie durch AudioContext und OfflineAudioContext jeweils dargestellt werden. Sie würden BaseAudioContext nicht direkt verwenden - Sie würden seine Funktionen über eine dieser beiden erbenden Schnittstellen nutzen.

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 Elternschnittstelle für verschiedene Arten von Audioquellenknotenschnittstellen. Er ist ein AudioNode.

OscillatorNode

Die OscillatorNode-Schnittstelle repräsentiert eine periodische Wellenform, wie eine Sinus- oder Dreieckswelle. Es ist ein AudioNode-Audiomodul, das eine gegebene Frequenz einer Welle erzeugt.

AudioBuffer

Die AudioBuffer-Schnittstelle repräsentiert ein kurzes Audio-Asset, das im Arbeitsspeicher residiert und durch eine Audiodatei mit der Methode BaseAudioContext.decodeAudioData erstellt wurde oder durch rohe Daten mit BaseAudioContext.createBuffer erstellt wurde. Einmal in dieser Form decodiert, kann das Audio dann in einen AudioBufferSourceNode eingefügt werden.

AudioBufferSourceNode

Die AudioBufferSourceNode-Schnittstelle repräsentiert eine Audioquelle, die aus einem im Speicher befindlichen Audio besteht, das in einem AudioBuffer gespeichert ist. 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 repräsentiert eine Audioquelle, die aus einem MediaStream besteht (wie eine Webcam, ein Mikrofon oder ein Stream, der von einem externen Computer gesendet wird). Wenn mehrere 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 repräsentiert eine Audioquelle, deren Daten von einem MediaStreamTrack stammen. Beim Erstellen des Knotens mit der Methode createMediaStreamTrackSource() zur Erstellung des Knotens geben Sie an, welcher Track verwendet werden soll. Dies bietet mehr Kontrolle als MediaStreamAudioSourceNode.

Definition von Audioeffekt-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 ein AudioNode, das verschiedene Arten von Filtern, Klangsteuerungsgeräten oder graphischen 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 gegebenen AudioBuffer durchführt und häufig verwendet wird, um einen Halleffekt zu erreichen.

DelayNode

Die DelayNode-Schnittstelle repräsentiert eine Verzögerungsleitung; ein AudioNode-Audiomodul, das eine Verzögerung zwischen dem Eintreffen von Eingabedaten und ihrem Weiterleiten an den Ausgang bewirkt.

DynamicsCompressorNode

Die DynamicsCompressorNode-Schnittstelle bietet einen Kompressionseffekt, der die Lautstärke der lautesten Teile des Signals reduziert, um Clipping und Verzerrungen zu verhindern, die auftreten können, wenn mehrere Sounds gleichzeitig abgespielt und zusammengeführt werden.

GainNode

Die GainNode-Schnittstelle repräsentiert eine Lautstärkeänderung. Es ist ein AudioNode-Audiomodul, das einen gegebenen Gain auf die Eingabedaten anwendet, bevor sie weitergeleitet werden.

WaveShaperNode

Die WaveShaperNode-Schnittstelle repräsentiert einen nichtlinearen Verzerrer. Es ist ein AudioNode, das eine Kurve verwendet, um eine Waveshaping-Verzerrung auf das Signal anzuwenden. Neben offensichtlichen Verzerrungseffekten wird es oft verwendet, um dem Signal ein warmes Gefühl hinzuzufügen.

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 Klangregelungsgeräte und grafische Equalizer wie auch andere Soundsysteme zu implementieren.

Definition von Audio-Zielen

Nachdem Sie Ihre Audiosignale verarbeitet haben, definieren diese Schnittstellen, wohin sie ausgegeben werden.

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 und ähnlich verwendet werden kann wie ein MediaStream, 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 Zeit-Domain-Analyseinformationen zur Verfügung zu stellen, um Datenanalyse und Visualisierung zu ermöglichen.

Aufteilen und Zusammenführen von Audiokanälen

Zum Aufteilen und Zusammenführen von Audiokanälen verwenden Sie diese Schnittstellen.

ChannelSplitterNode

Die ChannelSplitterNode-Schnittstelle trennt die verschiedenen Kanäle einer Audioquelle in eine Reihe von Mono-Ausgängen.

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äumlichkeitssteuerung

Diese Schnittstellen ermöglichen es Ihnen, Panning-Effekte der Audio-Räumlichkeit auf Ihre Audioquellen anzuwenden.

AudioListener

Die AudioListener-Schnittstelle repräsentiert die Position und Orientierung der einzigartigen Person, die die Audioszene hört, wie sie in der Audiogeografie verwendet wird.

PannerNode

Die PannerNode-Schnittstelle repräsentiert die Position und das Verhalten eines Audiosignals in 3D-Raum und ermöglicht es Ihnen, 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 bewegen.

Audiobearbeitung in JavaScript

Mit Audio-Worklets können Sie benutzerdefinierte Audioknoten schreiben, die in JavaScript oder WebAssembly definiert sind. Audio-Worklets implementieren die Worklet-Schnittstelle, eine leichtgewichtige Version der Worker-Schnittstelle.

AudioWorklet

Die AudioWorklet-Schnittstelle ist über das AudioContext-Objekt verfügbar, dessen audioWorklet es ermöglicht, Module dem Audio-Worklet hinzuzufügen, um außerhalb des Haupt-Threads ausgeführt zu werden.

AudioWorkletNode

Die AudioWorkletNode-Schnittstelle repräsentiert einen AudioNode, der in einen Audio-Graphen eingebettet ist und Nachrichten an den entsprechenden AudioWorkletProcessor weiterleiten kann.

AudioWorkletProcessor

Die AudioWorkletProcessor-Schnittstelle repräsentiert Audiobearbeitungscode, der in einem AudioWorkletGlobalScope ausgeführt wird, das audio generiert, verarbeitet oder direkt analysiert und Nachrichten mit dem entsprechenden AudioWorkletNode austauschen kann.

AudioWorkletGlobalScope

Die AudioWorkletGlobalScope-Schnittstelle ist ein WorkletGlobalScope-basiertes Objekt, das einen Worker-Kontext repräsentiert, in dem ein Audiobearbeitungsskript ausgeführt wird; es ist darauf ausgelegt, die Erzeugung, Verarbeitung und Analyse von Audiodaten direkt mithilfe von JavaScript in einem Worklet-Thread statt im Hauptthread zu ermöglichen.

Veraltet: Skriptprozessor-Knoten

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

ScriptProcessorNode Veraltet

Die ScriptProcessorNode-Schnittstelle ermöglicht die Erzeugung, Verarbeitung oder Analyse von Audio mithilfe von JavaScript. Es ist ein AudioNode-Audiobearbeitungsmodul, das mit zwei Puffern verbunden ist, wobei ein Puffer die aktuellen Eingabedaten enthält und der andere die Ausgabe. Ein Ereignis, das die AudioProcessingEvent-Schnittstelle implementiert, wird an das Objekt jedes Mal gesendet, wenn der Eingabepuffer neue Daten enthält, und der Ereignis-Handler endet, 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 ist, verarbeitet zu werden.

AudioProcessingEvent Veraltet

Das AudioProcessingEvent repräsentiert Ereignisse, die auftreten, wenn ein Eingabepuffer eines ScriptProcessorNode bereit ist, verarbeitet zu werden.

Offline-/Hintergrund-Audiobearbeitung

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

OfflineAudioContext

Die OfflineAudioContext-Schnittstelle ist eine AudioContext-Schnittstelle, die einen Audiographen darstellt, der aus verketteten 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 abgeschlossen 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 Tutorials

Beispiel und Tutorial: Einfaches Synthesizer-Keyboard

Dieser Artikel stellt den Code und eine funktionsfähige Demo eines Video-Keyboards vor, das Sie mit der Maus spielen können. Das Keyboard ermöglicht es Ihnen, zwischen den standardmäßigen Wellenformen sowie einer benutzerdefinierten Wellenform zu wechseln, und Sie können die Hauptverstärkung über einen Lautstärkeregler unterhalb des Keyboards steuern. Dieses Beispiel nutzt die folgenden Web-API-Schnittstellen: AudioContext, OscillatorNode, PeriodicWave und GainNode.

Best Practices für die Web Audio API

Es gibt keinen strikt richtigen oder falschen Weg bei der Erstellung von kreativem Code. 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.

Erweiterte Techniken: Erstellen und Sequenzieren von Audio

In diesem Tutorial werden wir uns mit der Erstellung und Modifikation von Klängen sowie mit dem Timing und der Planung beschäftigen. Wir werden das Laden von Samples, Hüllkurven, Filter, Wavetables und Frequenzmodulation einführen. Wenn Sie mit diesen Begriffen vertraut sind und nach einer Einführung in deren Anwendung mit der Web Audio API suchen, sind Sie hier genau richtig.

Grundlagen der räumlichen Audiowiedergabe im Web

Neben einer Vielzahl von Optionen zur Klangverarbeitung (und anderen Möglichkeiten) bietet die Web Audio API auch Funktionen, um Unterschiede im Klang zu emulieren, wenn sich ein Hörer um eine Klangquelle herum bewegt, beispielsweise durch Schwenken, während Sie sich innerhalb eines 3D-Spiels um eine Klangquelle bewegen. Der offizielle Begriff dafür ist Spatialization, und dieser Artikel behandelt die Grundlagen zur 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 beginnt. Wir werden kurz einige Konzepte betrachten und dann ein einfaches Boombox-Beispiel studieren, das es uns ermöglicht, eine Audiospur zu laden, abzuspielen und zu pausieren sowie die Lautstärke und das Stereo-Panning 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. Diese Art von Filter kann zur Implementierung von Tonsteuerungsgeräten und grafischen Equalizern verwendet werden, und die Filterantwortparameter können spezifisch angegeben werden, sodass der Filter nach Bedarf abgestimmt werden kann. Dieser Artikel zeigt, 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 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.

Beispiele

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

Spezifikationen

Specification
Web Audio API
# AudioContext

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
AudioContext
AudioContext() constructor
options.latencyHint parameter
options.sampleRate parameter
options.sinkId parameter
Experimental
baseLatency
close
createMediaElementSource
createMediaStreamDestination
createMediaStreamSource
createMediaStreamTrackSource
error event
Experimental
getOutputTimestamp
outputLatency
resume
setSinkId
Experimental
sinkId
Experimental
sinkchange event
Experimental
suspend

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch

Tutorials/Leitfäden

Bibliotheken

  • Tones: eine einfache Bibliothek zum Abspielen bestimmter Töne/Noten mithilfe der Web Audio API.
  • Tone.js: ein Framework zur Erstellung interaktiver Musik im Browser.
  • howler.js: eine JS-Audio-Bibliothek, die standardmäßig auf Web Audio API zurückgreift und als Fallback auf HTML Audio setzt, sowie andere nützliche Funktionen bietet.
  • Mooog: jQuery-ähnliches Ketten von AudioNodes, Mixer-ähnliche Sends/Returns und mehr.
  • XSound: Web Audio API Bibliothek für Synthesizer, Effekte, Visualisierung, Aufnahme, etc.
  • OpenLang: HTML-Video-Sprachlabor-Webanwendung, die die Web Audio API verwendet, um Audio und Video von verschiedenen Quellen zu einer Datei zusammenzuführen (Quellcode auf GitHub)
  • Pts.js: Vereinfacht die Web-Audio-Visualisierung (Leitfaden)

Verwandte Themen