c't 4/2018
S. 170
Know-how
Web Audio API
Aufmacherbild
Bild: Albert Hulm

Web-Musik

Sound-Ausgabe auf Webseiten mit dem Web Audio API

Moderne Browser können Sound-Samples abspielen oder selbst Musik erzeugen, wie man es von Synthesizern kennt. Wer selbst Webseiten gestaltet, kann dies mit dem standardisierten JavaScript Audio API nutzen, um Klangeffekte zu erzeugen oder sogar eigene digitale Web-Musikinstrumente zu erstellen.

Vom akustischen Hinweisschild bis zum Browser-Game – tönende Webseiten können Nutzer glücklich machen. Deswegen arbeitet das Web-Standardisierungs-Gremium W3C schon seit vielen Jahren an einer einheitlichen Audio-Schnittstelle für alle Web-Browser, um mit JavaScript Klänge zu erzeugen, zu verändern und abzuspielen. Die aktuelle Version dieses Web Audio API vom 8. Dezember 2017 befindet sich nominal noch im Entwurfsstadium (Draft), aber einen Großteil davon haben die Hersteller der modernen Web-Browser bereits umgesetzt. In den aktuellen Versionen von Firefox, Safari, Edge und Chrome sind die in diesem Artikel verwendeten API-Aufrufe längst vorhanden.

Wir demonstrieren das API anhand eines simplen Synthesizers und eines Drum-Computers. Deren Oberflächen haben wir mit der quelloffenen Bibliothek NexusUI gestaltet, die Bedienelemente elektronischer Musikinstrumente vom Schieberegler bis hin zur Klaviertastatur nachbildet. Das Web Audio API an sich ist so konzipiert, dass es unabhängig von jeder Oberflächenbibliothek arbeitet, also auch mit Canvas 2D oder WebGL.