Abo
  • IT-Karriere:

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.

Stellenmarkt
  1. VBL. Versorgungsanstalt des Bundes und der Länder, Karlsruhe
  2. Diehl Informatik GmbH, Nürnberg

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:

  1. function initBoard() {
  2. var stage = new pb.Stage();
  3. var ctx = stage.getContext();
  4. var board = new pb.Board(ctx);
  5.  
  6. reverb = new pb.stomp.Reverb(ctx);
  7. reverb.setLevel(0.5);
  8. board.addPedals([reverb]);
  9. stage.setBoard(board);
  10.  
  11. stage.input = new pb.io.StreamInput(stage.getContext());
  12. stage.input.addEventListener('loaded', function() {
  13. stage.route();
  14. });
  15. }

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:

  1. ...
  2. overdrive = new pb.stomp.Overdrive(ctx);
  3. reverb = new pb.stomp.Reverb(ctx);
  4.  
  5. overdrive.setTone(0.5);
  6. overdrive.setDrive(0.5);
  7. reverb.setLevel(0.5);
  8.  
  9. board.addPedals([overdrive, reverb]);
  10. ...

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.

 Pedalboard.js: Kreischende Gitarren im BrowserLärm aufgehübscht 
  1.  
  2. 1
  3. 2
  4. 3
  5. 4
  6.  


Anzeige
Top-Angebote
  1. (u. a. Nikon D5600 Kit 18-55 mm + Tasche + 16 GB für 444€ statt 525€ ohne Tasche und...
  2. (heute u. a. iRobot Roomba 960 für 399€ statt ca. 460€ im Vergleich)
  3. 399€ + Versand oder kostenlose Marktabholung (Vergleichspreis ab 443€)

Paykz0r 19. Dez 2013

ich Stimme dir bei Firefox leider absolut zu. aber ein html5 vide player Tag...

Crapple 19. Dez 2013

Man muss nur unter Develop->User Agent auf Chrome umstellen - zumindest bei pedals.io...

Realist_X 19. Dez 2013

Ja oder an einem PC :)

mw_blond 19. Dez 2013

... sagt alles.

Paykz0r 18. Dez 2013

eigentlich wären auch mod plug tracker ala s3m jetzt schon möglich. ist zwar nicht das...


Folgen Sie uns
       


Samsung Galaxy Note 10 und 10 Plus - Hands on

Samsung hat seine neuen Note-Modelle gezeigt und wir haben sie ausprobiert.

Samsung Galaxy Note 10 und 10 Plus - Hands on Video aufrufen
Google Game Builder ausprobiert: Spieldesign mit Karten statt Quellcode
Google Game Builder ausprobiert
Spieldesign mit Karten statt Quellcode

Bitte Bild wackeln lassen und dann eine Explosion: Solche Befehle als Reaktion auf Ereignisse lassen sich im Game Builder relativ einfach verketten. Der Spieleeditor des Google-Entwicklerteams Area 120 ist nicht nur für Einsteiger gedacht - sondern auch für Profis, etwa für die Erstellung von Prototypen.
Von Peter Steinlechner

  1. Spielebranche Immer weniger wollen Spiele in Deutschland entwickeln
  2. Aus dem Verlag Neue Herausforderungen für Spieler und Entwickler

Raspberry Pi 4B im Test: Nummer 4 lebt!
Raspberry Pi 4B im Test
Nummer 4 lebt!

Das Raspberry Pi kann endlich zur Konkurrenz aufschließen, aber richtig glücklich werden wir mit dem neuen Modell des Bastelrechners trotz bemerkenswerter Merkmale nicht.
Ein Test von Alexander Merz

  1. Eben Upton Raspberry-Pi-Initiator spielt USB-C-Fehler herunter
  2. 52PI Ice Tower Turmkühler für Raspberry Pi 4B halbiert Temperatur
  3. Kickstarter Lyra ist ein Gameboy Advance mit integriertem Raspberry Pi

Galaxy Note 10 im Hands on: Samsungs Stift-Smartphone kommt in zwei Größen
Galaxy Note 10 im Hands on
Samsungs Stift-Smartphone kommt in zwei Größen

Samsung hat sein neues Android-Smartphone Galaxy Note 10 präsentiert - erstmals in zwei Versionen: Die Plus-Variante hat ein größeres Display und einen größeren Akku sowie eine zusätzliche ToF-Kamera. Günstig sind sie nicht.
Ein Hands on von Tobias Költzsch

  1. Werbung Samsung bewirbt Galaxy Note 10 auf seinen Smartphones
  2. Smartphone Samsung präsentiert Kamerasensor mit 108 Megapixeln
  3. Galaxy Note 10 Samsung korrigiert Falschinformation zum Edelstahlgehäuse

    •  /