Abo
  • Services:
Anzeige
Pedalboard.js: Kreischende Gitarren im Browser
(Bild: Nico Ernst/Golem.de)

Ab in die Praxis

Anzeige

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:

  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 

eye home zur Startseite
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...



Anzeige

Stellenmarkt
  1. Groz-Beckert KG, Albstadt
  2. Harvey Nash GmbH, Frankfurt am Main oder Berlin
  3. Ratbacher GmbH, München
  4. PHOENIX CONTACT GmbH & Co. KG, Blomberg


Anzeige
Hardware-Angebote
  1. 199,99€ statt 479,99€ - Ersparnis rund 58%
  2. 249,29€ (Vergleichspreis 305€)
  3. ab 453,17€

Folgen Sie uns
       


  1. Smartphone

    Neues Huawei Y6 für 150 Euro bei Aldi erhältlich

  2. Nahverkehr

    18 jähriger E-Ticket-Hacker in Ungarn verhaftet

  3. Bundesinnenministerium

    Neues Online-Bürgerportal kostet 500 Millionen Euro

  4. Linux-Kernel

    Android O filtert Apps großzügig mit Seccomp

  5. Computermuseum Stuttgart

    Als Computer noch ganze Räume füllten

  6. ZX-E

    Zhaoxin entwickelt x86-Chip mit 16-nm-Technik

  7. Microsoft

    Windows 10 Redstone 3 streicht einige Funktionen

  8. Smartphone

    LG stellt Q8 mit zweitem Display vor

  9. Francois Piednoël

    Principal Engineer verlässt Intel

  10. Surface Laptop im Test

    Microsofts Next Topmodel hat zu sehr abgespeckt



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Gaming-Monitor Viewsonic XG 2530 im Test: 240 Hertz, an die man sich gewöhnen kann
Gaming-Monitor Viewsonic XG 2530 im Test
240 Hertz, an die man sich gewöhnen kann
  1. LG 43UD79-B LG bringt Monitor mit 42,5-Zoll-Panel für vier Signalquellen
  2. SW271 Benq bringt HDR-Display mit 10-Bit-Panel
  3. Gaming-Bildschirme Freesync-Displays von Iiyama und Viewsonic

Moto Z2 Play im Test: Bessere Kamera entschädigt nicht für kürzere Akkulaufzeit
Moto Z2 Play im Test
Bessere Kamera entschädigt nicht für kürzere Akkulaufzeit
  1. Modulares Smartphone Moto Z2 Play kostet mit Lautsprecher-Mod 520 Euro
  2. Lenovo Hochleistungs-Akku-Mod für Moto Z
  3. Moto Z Schiebetastatur-Mod hat Finanzierungsziel erreicht

Neuer A8 vorgestellt: Audis Staupilot steckt noch im Zulassungsstau
Neuer A8 vorgestellt
Audis Staupilot steckt noch im Zulassungsstau
  1. Autonomes Fahren Continental will beim Kartendienst Here einsteigen
  2. Verbrenner Porsche denkt über Dieselausstieg nach
  3. Autonomes Fahren Audi lässt Kunden selbstfahrenden A7 testen

  1. Re: Wie die Arbeitsamtseiten kostet Million geht...

    _Pluto1010_ | 14:32

  2. Re: warum kann man die RTT nicht mehr messen?

    Andre_af | 14:32

  3. Re: Längster Tunnel der Welt:

    Eheran | 14:31

  4. Re: Sollte ihm eine Lehre sein

    Schattenwerk | 14:29

  5. Re: Apple-Clon

    nolonar | 14:28


  1. 14:30

  2. 14:00

  3. 13:29

  4. 13:13

  5. 11:59

  6. 11:58

  7. 10:51

  8. 10:30


  1. Themen
  2. A
  3. B
  4. C
  5. D
  6. E
  7. F
  8. G
  9. H
  10. I
  11. J
  12. K
  13. L
  14. M
  15. N
  16. O
  17. P
  18. Q
  19. R
  20. S
  21. T
  22. U
  23. V
  24. W
  25. X
  26. Y
  27. Z
  28. #
 
    •  / 
    Zum Artikel