Interaktiver Sound im Web mit RNBO

Cycling ‘74 hat vor nicht allzu langer Zeit eine neue Technologie herausgebracht, über die ich heute ein bisschen schreiben möchte: RNBO. Es handelt sich dabei um ein Tool zur Entwicklung von interaktiver Software mit besonderem Fokus auf Sound.
Die Technologie ist für uns als UX-Agentur vor allem von Interesse, weil RNBO es unter anderem ermöglicht, diese interaktiven Sound-Anwendungen in das Web zu exportieren.

Wenn ihr sehen wollt, wie so etwas in der Praxis aussehen kann, möchte ich euch die Learning Synths-Seiten von Ableton sehr ans Herz legen, welche Cycling ‘74 zufolge mit RNBO entwickelt wurden. Man sieht dort denke ich sehr gut, wie viel Potential in dieser Technologie steckt und dass ihre Möglichkeiten jene von einschlägigen JS-Libraries wie Tone.js deutlich übersteigen. 

Das Ziel dieses Beitrags soll eine kleine Einführung in RNBO sein, die euch hoffentlich Lust macht, das Ganze selbst auszuprobieren. Doch bevor ich auf RNBO eingehen werde, möchte ich noch kurz auf Max/MSP zu sprechen kommen, da RNBO damit sehr eng verknüpft bzw. verwandt sind und es somit aus meiner Sicht sehr wichtig ist Max zu kennen um verstehen können was RNBO eigentlich ist und wo es herkommt.

Max/MSP

Max/MSP(kurz Max) ist eine visuelle Entwicklungsumgebung für Multimedia. Es wurde in den 80ern von Miller Puckette entwickelt und findet seither weite Verbreitung z.B. in der elektronischen Musik, oder bei Videokünstler:innen. Das Grundkonzept ist inspiriert von modularen Synthesizern: analog zu einem physischen Patch-Kabel lassen sich in Max Objekte mit jeweils verschiedenen Funktionen visuell miteinander verbinden. Die Objekte haben dabei verschiedene Patch-Points, die entweder in Echtzeit verschiedene Signale liefern, oder eben die andere Seite darstellen, welche diese Signale entgegennimmt und weiterverarbeitet. Die Eingänge sind dabei immer oben und die Ausgänge unten.

Ein einfaches Beispiel für eine Anwendung wäre z.B. die Lautstärke eines Tones. Möchte man die Lautstärke eines Tones im Zeitverlauf verändern, braucht man drei Komponenten: eine Klangquelle, einen regelbaren Verstärker, sowie ein Objekt, welches den Verlauf der Lautstärke abbildet. Das Signal der Klangquelle wird an das Verstärker-Modul gesendet und dieses erhält als zweiten Input das Signal des Lautstärkeverlaufs und kann nun als Output ein Signal des veränderten Tons ausgeben.

In Max würde das dann so aussehen:

Das cycle~-Objekt liefert dabei beständig einen simplen Sinuston mit 440 Hz, während das line~-Objekt eine Message bekommt, welche besagt “Gehe von 0 auf 0.5 in 2000 ms, danach auf 0 in 100 ms”. Daraus macht line~ ein Signal, welches dem *~-Objekt zu jedem Zeitpunkt sagt auf welche Lautstärke, das Signal von cycle~ verstärkt, bzw. (digital gesehen) multipliziert werden soll. Immer wenn nun die Message an line~ übergeben wird, bekommen wir am unteren Patch-Point von *~ einen Ton, der in 2 Sekunden auf die halbe Lautstärke anwächst und dann in 100 ms wieder auf 0 abfällt. 

RNBO Basics

Nachdem ihr nun hoffentlich ein vage Idee von Max gewinnen konntet, möchte ich auch schon zu RNBO übergehen. Das schöne dabei ist, dass, obwohl RNBO unter der Haube eine eigenständige Technologie ist, die Entwicklung von RNBO-Patches eigentlich sehr ähnlich zu der in Max sind. RNBO wird nämlich verkauft als ein Add-On für Max und es wird daher in demselben visuellen Environment gearbeitet. Das heißt auch, dass man dafür sowohl eine Lizenz für Max, wie auch für RNBO braucht. 

Um nun mit der Entwicklung von RNBO starten zu können, legt ihr in einem Max-Patcher ein rnbo~-Objekt an und sogleich öffnet sich ein neues Fenster, in welchem ihr alle in RNBO verfügbaren Objekte verwenden könnt, anstelle der Max-Objekte.
Wichtig ist dabei zu verstehen, dass dieses rnbo~-Objekt in einem Max-Patcher läuft, um also während der Entwicklung des RNBO-Patches etwas zu hören, müsst ihr den Output des Signals also auch in dem Max-Patcher hörbar machen(etwa über das dac~-Objekt).

Unser vorheriges Beispiel mit der Lautstärke in Max könnte in RNBO in etwa so aussehen:

Wir sehen, dass wir die aus Max bekannten Objekte cycle~, *~ und line~ alle in RNBO wiederfinden. Da RNBO mit Messages aber etwas anders umgeht, müssen wir das line~-Objekt etwas anders triggern, als in Max.
Außerdem hab ich das RNBO-Patch noch über das param-Objekt um einen Parameter erweitert, mit dem wir die Zeit zum Anschwellen des Tons von außerhalb, also in unserem Fall von dem übergeordneten Max-Patcher, an das RNBO-Patch übergeben können. Immer wenn dieser Parameter geändert wird, wird nun die Zeit über den oberen rechten Eingang im line~-Objekt gesetzt und eine Message mit dem Zielwert 0.5 an den linken Eingang gesendet. Hat line~ den Zielwert erreicht, so stößt es über den unteren rechten Ausgang die Message mit dem Wert 0 an, welche line~ anschließend noch einmal in derselben Zeit wieder zu null zurückkehren lässt. 
Das resultierende Audiosignal wird über das out~-Objekt in den Kanälen 1 und 2 an das übergeordnete Patch zurückgeschickt.

Bild

In unserem Max-Patcher sieht das ganze nun so aus:

Über dac~ können wir, wie bereits erwähnt, das Ergebnis der beiden Kanäle links und rechts hören und über das attrui-Objekt können wir den Parameter unseres RNBO-Patches verändern. Super, wir haben nun unser erstes simples RNBO-Patch fertig, jetzt können wir uns endlich daran machen, es im Browser hörbar zu machen!

RNBO im Browser

Um das RNBO in das Web zu bekommen, wird im Patcher-Fenster innerhalb des rnbo~-Objekts eine Export-Funktion bereitgestellt. Hier kann man “Web Export” auswählen und bekommt so ein JSON-File, welches nun in jedes Web-Projekt eingebaut werden kann. Um das JSON-Objekt zu verarbeiten, wird die @rnbo/js library bereitgestellt, mit welcher das RNBO Patch in einen AudioWorkletNode, einer Komponente der Web Audio API, verwandelt wird.

Wie ihr diese Komponente genau verwendet, hängt natürlich sehr von dem jeweiligen Projekt ab und eine Schritt-für-Schritt-Anleitung würde den Rahmen dieses Blogs wohl etwas sprengen, deshalb möchte ich euch an dieser Stelle empfehlen, einen Blick in das offizielle Example-Projekt zu werfen, damit ihr sehen könnt wie das in der Praxis aussehen könnte. Wenn ihr in diesem Projekt das exportierte JSON-File einfach in dem /export-Folder ablegt, solltet ihr bereits ein lauffähige App als Ausgangsbasis haben.

Weitere Infos findet ihr auch in der Working with JavaScript-Serie von Cycling 74’. Wenn ihr noch neu in der Entwicklung in der JS-Entwicklung seid, werft gern auch einmal einen Blick in unseren Blog, hier finden sich viele spannende und einführende Beiträge in das Thema.

Fazit

Ich hoffe ihr seid nach dieser kleinen Einführung ebenso begeistert von RNBO wie ich und nun in der Lage eure ersten Schritte damit zu machen. Wenn ihr noch tiefer in die Materie eintauchen wollt, seht euch unbedingt die offizielle Dokumentation an, hier sind alle Grundlagen sehr gut beschrieben. Wie bei Max sind auch in RNBO die Help-Funktionen, die für jedes Objekt direkt im Patcher verfügbar sind, extrem hilfreich, da sie immer lauffähige Beispiele enthalten, anhand deren man sofort versteht, wie ein Objekt funktioniert. 

Zu guter Letzt möchte ich noch die Frage in den Raum stellen, ob RNBO in einem professionellen Umfeld auch zu einer verbesserten UX auf Webseiten und Apps verhelfen kann, oder ob die Sache doch eher was für Künstler, oder einfach ein Gimmick ist. Was meint ihr? Habt ihr Ideen für Projekte, in denen RNBO Sinn macht?