Original-URL des Artikels: https://www.golem.de/news/pedalboard-js-kreischende-gitarren-im-browser-1312-103411.html    Veröffentlicht: 18.12.2013 15:32    Kurz-URL: https://glm.io/103411

Pedalboard.js

Kreischende Gitarren im Browser

Bei HTML 5 denken viele vor allem an die Video- und Audio-Tags. Die Multimedia-API geht aber weit über das reine Abspielen hinaus. Eine kleine Javascript-Bibliothek lädt Musiker - und uns - zum Experimentieren ein.

Ein Stage Rider enthält die Anforderungen einer Band an den Veranstalter, zumeist stehen darin Angaben zur benötigten Mischpult- und Lichtausrüstung wie auch Catering-Ansprüche. In Zukunft könnte bei der einen oder anderen Band auch stehen: "Internetverbindung on stage".

Das Pedalboard.js-Projekt hat sich zum Ziel gesetzt, eine browserbasierte Javascript-Bibliothek für Gitarreneffekte umzusetzen. Eine Demo gibt es unter Pedals.io.

Die W3C Audio API wurde geschaffen, um Audioinhalte zur Laufzeit zu modulieren. Dabei kann es sich auch um das Audiosignal einer Tonquelle handeln, zum Beispiel das eingebaute Mikrofon des Rechners oder vom Eingang einer Soundkarte. Leider ist Chrome derzeit der einzige Browser, der die API vollständig unterstützt.

Pedalboard.js benutzt die Audio-API, um nun speziell ein abgegriffenes Gitarrensignal entsprechend bekannter Effektgeräte zu modulieren. Zwar muss ein Musiker seine E-Gitarre noch irgendwie an den Computer stöpseln, ansonsten benötigt er aber nur einen Browser, weitere Software ist nicht notwendig.

Die Bibliothek bietet aktuell noch nicht allzu viele Effekte, lädt aber zum Experimentieren ein - und eröffnet interessante Anwendungen: Ausgewählte Effekte und ihre Einstellungen können auf einem Server öffentlich gemacht werden; denkbar ist auch die Fernsteuerung der Einstellungen über Websockets. Wer auf Avantgarde und Postmoderne machen will, kann natürlich auch ein beliebig komplexes Skript bauen, das nach obskuren Parametern die Einstellungen automatisch regelt.

Bei unseren Tests haben wir festgestellt, dass es durch den Browser selbst nicht zu Latenzen kam - die eingesetzte Hardware entscheidet über Verzögerungen im Tonsignal.



Ab in die Praxis



Wer bereits einen Blick auf die Demo geworfen hat, hat ein stylisches Interface gesehen. Wer sie mit seiner E-Gitarre ausprobiert hat, wird sie unpraktisch gefunden haben. Doch das soll uns nicht weiter stören, für unsere eigene Demo wollen wir sowieso unser eigenes Skript schreiben.

Zuerst müssen dafür die Pedalboard-Dateien heruntergeladen werden, effektiv benötigt werden aber nur das dist- und das audio-Verzeichnis mit dem ir-Unterverzeichnis. Eine kleine HTML-Seite ist schnell aufgesetzt, in der per Script-Tag vorerst das compiled.js geladen wird.

In einem Script-Block wird dann der Reverb-Effekt zum Leben erweckt: function initBoard() { var stage = new pb.Stage(); var ctx = stage.getContext(); var board = new pb.Board(ctx); reverb = new pb.stomp.Reverb(ctx); reverb.setLevel(0.5); board.addPedals([reverb]); stage.setBoard(board); stage.input = new pb.io.StreamInput(stage.getContext()); stage.input.addEventListener('loaded', function() { stage.route(); }); }

Das Stage-Objekt ist ein übergeordnetes Verwaltungsobjekt, das uns einen Audio-Context der Audio-API liefert. Interessant wird es mit dem Board-Objekt. Ein Board nimmt eines oder mehrere Pedale auf (das sind die Effekte) und "verdrahtet" sie miteinander. In einem Skript können mehrere Boards definiert und zur Laufzeit jeweils abwechselnd aktiviert werden. Zum Schluss wird eine Audioeingabequelle angefordert - und wenn sie erfolgreich aktiviert werden konnte, wird das modulierte Audiosignal ausgegeben.

Die Stärke des Effektes beziehungsweise dessen Einfluss auf das Signal wird durch entsprechende objekt-spezifische Funktionen gesetzt. Im Falle des Reverb-Effektes ist es setLevel(), der die Dauer des Hall-Effektes bestimmt. Der Wertebereich der Funktionen liegt zwischen 0 und 1.

Soweit ist die Angelegenheit recht einfach. Aber es gibt einen Haken, gerade weil das Skript nur in Chrome läuft: Dessen Sicherheitseinstellungen erlauben den Zugriff auf eine Soundquelle nur, wenn das Skript von einem Server geladen wurde - allerdings ist auch localhost erlaubt. Zumindest ein lokaler Webserver ist also notwendig. Dieser muss aber lediglich die Dateien ausliefern, serverseitig muss keine Zeile Code laufen.

Weitere Effekte

Weitere verfügbare Effekte sind derzeit: Overdrive zur Simulation einer Übersteuerung und Cabinet, der eine bestimmte Art von Lautsprecher imitiert. Einen zusätzlichen Effekt können wir in den obigen Code analog dem Reverb-Effekt einfügen:

... overdrive = new pb.stomp.Overdrive(ctx); reverb = new pb.stomp.Reverb(ctx); overdrive.setTone(0.5); overdrive.setDrive(0.5); reverb.setLevel(0.5); board.addPedals([overdrive, reverb]); ...

Je nach Effekt variieren die Namen der Methode, um einen spezifischen Parameter zu setzen. Der Methode addPedals werden nun beide Effekte übergeben.

Die Reihenfolge ist dabei signifikant. Wie oben bereits angesprochen, werden die Effekte miteinander kombiniert. Die Ausgabe des Overdrive-Effektes wird zur Eingabe für den Reverb-Effekt.



Lärm aufgehübscht



Unter golem.de/projekte/pedal/index.html haben wir das einfache Beispiel vom Anfang ausgebaut.

Pedalboard.js enthält neben weiteren Effektklassen auch noch Funktionen für Bedienungselemente und die Steuerung. Aber schon die Pedal.js-Demo zeigt, dass diese nicht unbedingt praktisch sind, erst recht für diejenigen, die dabei auch noch eine Gitarre in der Hand halten.

Deshalb haben wir in unserem Experiment komplett darauf verzichtet und eine einfachere UI entworfen. Die Bedienung kann per Maus und Tastatur erfolgen - oder per Gestensteuerung, doch dazu später mehr.

Die UI ist zweigeteilt, im unteren Teil werden die Effekte angezeigt: Reverb und Overdrive. Da der Overdrive zwei Einstellungen unterstützt, taucht er zweimal jeweils mit dem Namen der Einstellung auf. Um den Wert einer Einstellung zu ändern, wird er per Mausklick oder Leertaste angewählt. Im oberen Bereich wird der aktuelle Wert über einen Balken angezeigt. Die Änderung erfolgt per Pfeil-Taste oder indem zum Verringern mit der Maus in den linken Bereich geklickt wird, oder in den rechten zum Erhöhen.



Gestensteuerung



So ganz hat uns aber auch die Tastatur- und Maussteuerung nicht überzeugt, wir mussten immer noch zu genau mit dem Finger "zielen".

Die Leap Motion hat trotz ihres moderaten Preises keinen Durchbruch für die Gestensteuerung am PC bedeutet. Trotzdem - oder deshalb - arbeitet das Unternehmen recht rührig an der Softwareunterstützung. So bietet die Leap Motion inzwischen eine Javascript-API für den Einsatz im Browser.

Und genau darauf wollen wir aufsetzen. Die Umsetzung einer Gestensteuerung ist darüber recht einfach. Dazu laden wir in unserem Skript zusätzlich noch die Leap-Motion-API. Die Aktivierung beschränkt sich auf wenige Zeilen Code:

var leapController = new Leap.Controller({ enableGestures: true }); leapController.on( 'animationFrame' , function(frame) { // reagiere auf Gesten }); leapController.connect();

Viel komplizierter ist es festzulegen, welche Hand-Interaktion wir benutzen wollen. Für die Umschaltung zwischen den Effekten ist ein Key- oder Screen-Tap geeignet. Für das Verringern und Erhöhen eines Parameterwertes wird es schwieriger.

Intuitiv liegt es nahe, Wischgesten nach links und rechts einzusetzen. In der Praxis erweist sich das aber als unpraktisch und zu ungenau, um einen bestimmten Wert festzulegen, insbesondere, wenn wir dabei eine Gitarre in der Hand halten. Zwar wäre es möglich, über die Low-Level-Methoden des Leap Motion und eigene Berechnungen Wischgesten genauer zu interpretieren, aber wir überlegten, ob es auch einfacher ginge.

Schließlich kamen wir tatsächlich auf eine einfache Lösung: Um einen Wert zu verringern, werden drei Finger gezeigt, zum Erhöhen fünf Finger. Damit umfasst die Gestenerkennung nur 13 Zeilen Code:

if(frame.gestures.length) { var gesture = frame.gestures[0]; if('keyTap' == gesture.type || 'screenTap' == gesture.type) { nextPedal(); } } else { var finger = frame.fingers.length; if(3 == finger) { decrease(); } else if(5 == finger) { increase(); } }

Eine musikalische Revolution werden Pedalboard.js und Leap Motion vermutlich nicht auslösen. Aber es ist eine kleine Andeutung dessen, was heute schon mit nur wenigen Codezeilen in einem Browser möglich ist.  (am)


Verwandte Artikel:
Monero: Werbeanzeigen mit verstecktem Kryptomining auch auf Youtube   
(29.01.2018, https://glm.io/132449 )
Encrypted Media Extensions: Web-DRM ist ein Standard für Nutzer   
(19.09.2017, https://glm.io/130132 )
Leap Motion und Qualcomm: Drahtloses VR-Headset mit Hand-Tracking ausprobiert   
(28.02.2017, https://glm.io/126433 )
Google: Chrome wird künftig mit Clang statt Visual C++ entwickelt   
(06.03.2018, https://glm.io/133171 )
Qualcomm: Bluetooth-Sound wird stromsparender und reaktionsschneller   
(22.02.2018, https://glm.io/132917 )

© 1997–2019 Golem.de, https://www.golem.de/