November 2015

Web Audio API

Vorwort

Vor HTML5 gab es keine Möglichkeit, Audio-Files nativ auf der Web-Plattform abzuspielen. Anwendungen, die fähig sein sollten, Audio wiederzugeben, waren stets auf Drittanbieter-Plugins angewiesen, wie z.B. Flash oder Silverlight. Diese Lösungen, die schon immer eine Quelle von Sicherheitslücken waren, mussten vom Benutzer explizit installiert werden und sind spätestens seit dem Boom der Smartphones, die keine Plugins erlauben, überholt. Die Einführung von HTML5 brachte ein neues Element namens '<audio>' mit sich, welches erstmals im Jahr 2009 von Mozilla im Firefox Browser implementiert wurde. Das Audio-Element hat jedoch nur relativ eingeschränkte Funktionalität wie play und pause, und bietet keine Möglichkeit zur Beeinflussung der Audio-Rohdaten. Dieser Blogeintrag liefert einen kurzen Überblick über die Web Audio API, eine JavaScript API, welche das dynamische Laden, Erzeugen, Bearbeiten und Mixen von Audio-Daten in hochperformanter hardwarenaher Art und Weise erlaubt und erstmals 2011 implementiert wurde.

Überblick

Grundlage der Web Audio API (kurz WAAPI) ist der sogenannte AudioContext. Über diesen Kontext werden alle Objekte erzeugt, die zur Bearbeitung der Sounds genutzt werden. Sie ist auch das einzige Objekt der WAAPI, welches instanziiert werden kann. Alle anderen Objekte werden zwangsläufig darüber erzeugt. Es empfiehlt sich dabei, immer nur einen Kontext pro Anwendung zu erzeugen.

                                    var context = new AudioContext();
var sourceNode = context.createBufferSource();
var delayNode = context.createDelay();
var gainNode = context.createGain();
                                

Um nun Audio abzuspielen oder zu beeinflussen, werden aus diesem Kontext Nodes erzeugt, die zu einem Node graph verbunden werden. Jede dieser Nodes ist dabei für genau eine Funktion zuständig, um die Audio-Daten zu mutieren, beispielsweise Lautstärkeveränderungen. Die Nodes müssen hierfür in der richtigen Reihenfolge verknüpft werden. Die Audio-Daten können hierbei aus verschiedenen Quellen kommen. Beispielsweise eine Datei, die auf dem Server liegt und erst geladen werden muss, das Mikrofon des Benutzers, eine E-Gitarre, die an den PC angeschlossen wurde, ein Fremdrechner, der über WebRTC übers Internet verbunden wurde, oder komplett per JavaScript dynamisch generierte Daten.

                                    var gainNode = context.createGain();
gainNode.gain.value = 0.5;
source.connect(gainNode);
gainNode.connect(context.destination);
                                

Es gibt dabei kein Limit, wie viele Nodes hintereinander geschaltet werden können. Da die Nodes nativ erzeugt werden, ist dieser Vorgang sehr performant. Jede Node kann nur einmal benutzt werden und muss für jeden Abspiel- oder Bearbeitungsschritt neu generiert werden. Zur Auswahl stehen dabei eine Vielzahl an Nodes, die verschiedenste Funktionalität bieten. Sollen die veränderten Sound-Daten nun gespeichert werden, kann der OfflineAudioContext benutzt werden. Dieser gibt die Daten im Gegensatz zum normalen AudioContext nicht direkt an die Ausgabe weiter, sondern rendert sie in einen ArrayBuffer, der dann vom Benutzer runtergeladen oder an den Server geschickt werden kann.

Komplikationen

Eine Schwierigkeit der WAAPI ist jedoch, dass sie keine klassische Timeline bietet, d.h. der Zeitpunkt, wann was abgespielt wird, muss vom Programmierer selbst gemanagt werden. Die einzigen Funktionen, die die WAAPI hierbei liefert, ist ein genauer Timestamp und ein Event, welches signalisiert, wann ein Abspielvorgang beendet ist.

Des Weiteren wird die WAAPI nicht von Microsofts Internet Explorer unterstützt. Es existiert hierfür zwar ein Polyfill, der im Hintergrund Flash benutzt, jedoch wird dieser nicht mehr weiter entwickelt, deckt nicht die komplette Funktionalität ab, unterstützt nur unkomprimierte Wave-Dateien und produziert eine erkennbare Verzögerung beim Abspielen. Microsofts Edge Browser und alle aktuellen Versionen jedes gängigen Browser bieten jedoch die volle Unterstützung.

Einsatzmöglichkeiten

Einsatzmöglichkeiten der WAAPI sind beispielsweise Spiele-Engines, kollaborative Musikprojekte, Voice Messenger, Gitarren-Tuner oder Webseiten, die über User-Interaktion Sound abspielen wollen. Als herausragendes Beispiel ist hierbei www.soundtrap.com zu nennen.

Pro

  • hochperformant
  • bietet eine hohe Anzahl an Variationsmöglichkeiten
  • einfache/übersichtliche API
  • Downloadbarkeit der erstellten Audio-Daten
  • viele Input-/Output-Möglichkeiten

Kontra

  • keine Unterstützung im Internet Explorer
  • keine eingebaute Timeline-Funktionalität

Fazit

Abschließend ist zu sagen, dass die Web Audio API eine einfache und performante Möglichkeit ist, um Audio auf der Web-Plattform wiederzugeben und zu bearbeiten. Falls das Projekt nicht den Internet Explorer als Zielplattform anvisiert, gibt es keinen Grund, auf irgendwelche Alternativen zurückzugreifen. Eine Demo mit den grundlegendsten Funktionen findet sich auf: http://lab.netzbewegung.com/web-audio-api

Benjamin