Zum Inhalt springen

Web Audio API

aus Wikipedia, der freien Enzyklopädie

Die Web Audio API ermöglicht es in Webbrowsern mittels JavaScript Audiosignale zu erzeugen und zu bearbeiten. Es handelt sich um eine leicht einsetzbare API mit großem Funktionsumfang und kommt beispielsweise in Browserspielen zum Einsatz. Sie kann als Audio-Analogon zum Canvas-Element gesehen werden.

Funktionsweise

Die Audiosignale werden innerhalb eines Audiokontextes erzeugt und bearbeitet. Die Verarbeitungsschritte werden durch einzelne Audioknoten des Kontexts durchgeführt, die untereinander verbunden sind. Es gibt einen Ausgabeknoten, der die Daten je nach Art des Kontexts an die Audioausgabe des Systems, also beispielsweise den Lautsprecher weiterleitet oder als Binärdaten speichert. Eingabeknoten können ein Audiosignal durch einen Oszillator produzieren oder diese aus anderen Quellen beziehen. Dies können Audiodateien sein, ein angeschlossenes Mikrofon oder WebRTC-Verbindungen. Schließlich gibt es Knoten, die Audiosignale bearbeiten. Hier reicht die Palette von einfachen Manipulationen der Lautstärke über die Anwendung verschiedener Filter bis hin zur Möglichkeit, den Raumklang (einschließlich Doppler-Effekt) für beliebige Positionen und Bewegungen des Zuhörers neu zu berechnen.[1] Mehrere Tonkanäle werden dabei automatisch angepasst, sofern Quelle und Ziel unterschiedliche Anordnungen verwenden, sie können aber auch über eigene Knoten bearbeitet werden. Es gibt auch Knoten, die das Audiosignal unverändert lassen, aber zur Analyse eine schnelle Fourier-Transformation durchführen.[2] Bei der Verknüpfung der Audioknoten sind Schleifen zulässig, sofern einer der enthaltenen Knoten die Ausgabe verzögert.

Die Audioknoten besitzen Parameter, die das genaue Verhalten beschreiben und während der Verarbeitung auch geändert werden können.

Beispiel

Grafische Darstellung der Audioknoten des Beispiels in der Debug-Ansicht in Firefox

Das folgende Beispiel erzeugt einen Sinuston.[3]

//Audiokontext erzeugen
var audioCtx = new AudioContext();

//Audioknoten erzeugen
var oscillatorNode = audioCtx.createOscillator();
var gainNode = audioCtx.createGain();

//Audioknoten verbinden
oscillatorNode.connect(gainNode);
gainNode.connect(audioCtx.destination);

//Audioknoten konfigurieren
oscillatorNode.type = 'sine';
oscillatorNode.frequency.value = 2500;
gainNode.gain.value = 0.5;

//Ausgabe starten
oscillatorNode.start();

Durch eine dynamische Anpassung von oscillatorNode.frequency.value (der Frequenz in Hertz) und gainNode.gain.value (der relativen Lautstärke) können so einfache Melodien erzeugt werden.

Browserunterstützung

Die Web Audio API wird von allen wichtigen aktuellen Browsern unterstützt: Mozilla Firefox seit Version 25, Google Chrome seit Version 14 (bis Version 33 nur mit webkit-Präfix), Microsoft Edge, Opera seit Version 15 (seit Version 22 ohne Präfix) und Safari seit Version 6 (mit Präfix). Auch die meisten mobilen Browser unterstützen die API.[4][5]

Da sich die Spezifikation aber noch in Entwicklung befindet, variiert der Grad der Unterstützung zwischen den verschiedenen Browsern und zwischen unterschiedlichen Version der Browser. Ebenfalls unterschiedlich ist die Performance[6] und die Debugging-Möglichkeiten.[7]

Einzelnachweise

  1. Web audio spatialization basics. In: Mozilla Developer Network. Abgerufen am 5. September 2016 (englisch).
  2. Visualizations with Web Audio API. In: Mozilla Developer Network. Abgerufen am 5. September 2016 (englisch).
  3. Using the Web Audio API. In: Mozilla Developer Network. Abgerufen am 5. September 2016 (englisch).
  4. Can I use: Web Audio API. Abgerufen am 5. September 2016.
  5. Unprefixed Web Audio API - Chrome Platform Status. Abgerufen am 5. September 2016.
  6. Soledad Penadés: What’s new in Web Audio? In: Mozilla Hacks. 15. August 2016, abgerufen am 5. September 2016 (englisch).
  7. Web Audio Editor. In: Mozilla Developer Network. Abgerufen am 5. September 2016 (englisch).