Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

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:

  1. Audio-Kontext erstellen
  2. Innerhalb des Kontexts Quellen erstellen — wie <audio>, Oszillator, Stream
  3. Effekt-Knoten erstellen, wie Hall, Biquad-Filter, Panner, Kompressor
  4. Endziel des Audios wählen, beispielsweise Ihre Systemlautsprecher
  5. Quellen mit den Effekten und die Effekte mit dem Ziel verbinden.

Ein einfaches Blockdiagramm mit einem äußeren Kasten, der als Audio-Kontext bezeichnet ist, und drei inneren Kästen, die als Quellen, Effekte und Zielmarkiert sind. Die drei inneren Kästen haben Pfeile zwischen sich, die von links nach rechts zeigen und den Fluss von Audioinformationen anzeigen.

Das Timing wird mit hoher Präzision und 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 einen AudioNode dargestellt wird. Ein Audiokontext steuert die Erstellung der Knoten, die er enthält, und die Ausführung der Audioverarbeitung oder -decodierung. Sie müssen einen AudioContext 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 wie BiquadFilterNode oder eine Lautstärkeregelung wie GainNode).

AudioParam

Die AudioParam-Schnittstelle repräsentiert einen audiobezogenen Parameter, wie einen eines AudioNode. 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 Methoden forEach(), get(), has(), keys() und values() sowie eine size-Eigenschaft bereitgestellt werden.

BaseAudioContext

Die BaseAudioContext-Schnittstelle fungiert als Basismedium für Online- und Offline-Audioprozessgraphen, die jeweils durch AudioContext und OfflineAudioContext dargestellt werden. Sie würden BaseAudioContext 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 ein AudioNode.

OscillatorNode

Die OscillatorNode-Schnittstelle repräsentiert eine periodische Wellenform, wie eine Sinus- oder Dreieckswelle. Es ist ein AudioNode-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 Methode BaseAudioContext.decodeAudioData erstellt wurde oder mit Rohdaten unter Verwendung von BaseAudioContext.createBuffer erstellt wurde. Nachdem es in diese Form decodiert wurde, kann das Audio dann in einen AudioBufferSourceNode eingefügt werden.

AudioBufferSourceNode

Die AudioBufferSourceNode-Schnittstelle repräsentiert eine Audioquelle, 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 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 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, dessen id lexikografisch (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. Wenn Sie den Knoten mit der Methode createMediaStreamTrackSource() erstellen, geben Sie an, welchen Track Sie verwenden möchten. Dies bietet mehr Kontrolle als MediaStreamAudioSourceNode.

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 ein AudioNode, das verschiedene Arten von Filtern, Tonregelsystemen 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 gegebenen AudioBuffer ausführt und oft verwendet wird, um einen Hall-Effekt zu erreichen.

DelayNode

Die DelayNode-Schnittstelle repräsentiert eine Verzögerungsleitung; ein AudioNode-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 ein AudioNode-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 ein AudioNode, 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 WebRTC MediaStream mit einem einzelnen AudioMediaStreamTrack, der ähnlich verwendet werden kann wie ein MediaStream, der von getUserMedia() erhalten wurde. Es ist ein AudioNode, 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 das AudioContext-Objekts audioWorklet 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 einen AudioNode, der in einem Audiograph eingebettet ist und Nachrichten an den entsprechenden AudioWorkletProcessor senden kann.

AudioWorkletProcessor

Die AudioWorkletProcessor-Schnittstelle repräsentiert Audioprozesscode, der in einem AudioWorkletGlobalScope läuft, und Nachrichten an den entsprechenden AudioWorkletNode senden kann.

AudioWorkletGlobalScope

Die AudioWorkletGlobalScope-Schnittstelle ist ein WorkletGlobalScope-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 ein AudioNode-Audioprozessmodul, das mit zwei Puffern verbunden ist, einem, der den aktuellen Eingang enthält, und einem, der den Ausgang enthält. Ein Ereignis, das die AudioProcessingEvent-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 API ScriptProcessorNode bereit zur Verarbeitung ist.

AudioProcessingEvent Veraltet

Das AudioProcessingEvent repräsentiert Ereignisse, die auftreten, wenn ein ScriptProcessorNode-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 eine AudioContext-Schnittstelle, die einen Audioprozessgraphen darstellt, der aus miteinander verbundenen AudioNodes 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 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 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 und GainNode.

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 Parameters ConstantSourceNode.offset geändert werden kann.

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

Siehe auch

Tutorials/Leitfäden

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)

Verwandte Themen