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:
- Erstellen Sie einen Audio-Kontext
- Erstellen Sie innerhalb des Kontexts Quellen — wie
<audio>
, Oszillator, Stream - Erstellen Sie Effektknoten, wie Nachhall, Biquad-Filter, Panner, Kompressor
- Wählen Sie das endgültige Audioziel, zum Beispiel Ihre Systemlautsprecher
- Verbinden Sie die Quellen mit den Effekten und die Effekte mit dem Ziel.
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 einenAudioNode
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 einenAudioContext
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 wieBiquadFilterNode
, oder eine Lautstärkeregelung wieGainNode
). AudioParam
-
Die
AudioParam
-Schnittstelle repräsentiert einen audiobezogenen Parameter, wie einen von einemAudioNode
. 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 MethodenforEach()
,get()
,has()
,keys()
undvalues()
sowie einesize
-Eigenschaft bietet. BaseAudioContext
-
Die
BaseAudioContext
-Schnittstelle fungiert als Basisdefinition für Online- und Offline-Audioverarbeitungsgraphen, wie sie durchAudioContext
undOfflineAudioContext
jeweils dargestellt werden. Sie würdenBaseAudioContext
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 einAudioNode
. OscillatorNode
-
Die
OscillatorNode
-Schnittstelle repräsentiert eine periodische Wellenform, wie eine Sinus- oder Dreieckswelle. Es ist einAudioNode
-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 MethodeBaseAudioContext.decodeAudioData
erstellt wurde oder durch rohe Daten mitBaseAudioContext.createBuffer
erstellt wurde. Einmal in dieser Form decodiert, kann das Audio dann in einenAudioBufferSourceNode
eingefügt werden. AudioBufferSourceNode
-
Die
AudioBufferSourceNode
-Schnittstelle repräsentiert eine Audioquelle, die aus einem im Speicher befindlichen Audio besteht, das in einemAudioBuffer
gespeichert ist. 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 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, dessenid
lexikographisch (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. Beim Erstellen des Knotens mit der MethodecreateMediaStreamTrackSource()
zur Erstellung des Knotens geben Sie an, welcher Track verwendet werden soll. Dies bietet mehr Kontrolle alsMediaStreamAudioSourceNode
.
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 einAudioNode
, das verschiedene Arten von Filtern, Klangsteuerungsgeräten oder graphischen 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
durchführt und häufig verwendet wird, um einen Halleffekt zu erreichen. DelayNode
-
Die
DelayNode
-Schnittstelle repräsentiert eine Verzögerungsleitung; einAudioNode
-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 einAudioNode
-Audiomodul, das einen gegebenen Gain auf die Eingabedaten anwendet, bevor sie weitergeleitet werden. WaveShaperNode
-
Die
WaveShaperNode
-Schnittstelle repräsentiert einen nichtlinearen Verzerrer. Es ist einAudioNode
, 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 einzigenAudioMediaStreamTrack
besteht und ähnlich verwendet werden kann wie einMediaStream
, das vongetUserMedia()
erhalten wird. Es ist einAudioNode
, 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 dasAudioContext
-Objekt verfügbar, dessenaudioWorklet
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 einenAudioNode
, der in einen Audio-Graphen eingebettet ist und Nachrichten an den entsprechendenAudioWorkletProcessor
weiterleiten kann. AudioWorkletProcessor
-
Die
AudioWorkletProcessor
-Schnittstelle repräsentiert Audiobearbeitungscode, der in einemAudioWorkletGlobalScope
ausgeführt wird, das audio generiert, verarbeitet oder direkt analysiert und Nachrichten mit dem entsprechendenAudioWorkletNode
austauschen kann. AudioWorkletGlobalScope
-
Die
AudioWorkletGlobalScope
-Schnittstelle ist einWorkletGlobalScope
-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 einAudioNode
-Audiobearbeitungsmodul, das mit zwei Puffern verbunden ist, wobei ein Puffer die aktuellen Eingabedaten enthält und der andere die Ausgabe. Ein Ereignis, das dieAudioProcessingEvent
-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 APIScriptProcessorNode
bereit ist, verarbeitet zu werden. AudioProcessingEvent
Veraltet-
Das
AudioProcessingEvent
repräsentiert Ereignisse, die auftreten, wenn ein Eingabepuffer einesScriptProcessorNode
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 eineAudioContext
-Schnittstelle, die einen Audiographen darstellt, der aus verkettetenAudioNode
s besteht. Im Gegensatz zu einem Standard-AudioContext
rendert einOfflineAudioContext
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 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 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
undGainNode
.- 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 desConstantSourceNode.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 einAudioNode
-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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
AudioContext | ||||||||||||
AudioContext() constructor | ||||||||||||
options.latencyHint parameter | ||||||||||||
options.sampleRate parameter | ||||||||||||
options.sinkId parameter | ||||||||||||
baseLatency | ||||||||||||
close | ||||||||||||
createMediaElementSource | ||||||||||||
createMediaStreamDestination | ||||||||||||
createMediaStreamSource | ||||||||||||
createMediaStreamTrackSource | ||||||||||||
error event | ||||||||||||
getOutputTimestamp | ||||||||||||
outputLatency | ||||||||||||
resume | ||||||||||||
setSinkId | ||||||||||||
sinkId | ||||||||||||
sinkchange event | ||||||||||||
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
- Grundlegende Konzepte hinter der Web Audio API
- Verwendung der Web Audio API
- Fortgeschrittene Techniken: Erstellung von Klängen, 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-Räumlichkeitssteuerung
- Steuerung mehrerer Parameter mit ConstantSourceNode
- Mischen von positionalem Audio und WebGL (2012)
- Entwicklung von Spiel-Sound mit der Web Audio API (2012)
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)