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. IT Baden-Württemberg (BITBW), Stuttgart-Feuerbach
  2. Trebing & Himstedt Prozeßautomation GmbH & Co. KG, verschiedene Einsatzorte (Home-Office)
  3. AKDB Anstalt für kommunale Datenverarbeitung in Bayern, München
  4. Made in Office GmbH, Köln


Anzeige
Blu-ray-Angebote
  1. (u. a. The Revenant, Batman v Superman, James Bond Spectre, Legend of Tarzan)
  2. (u. a. Fast & Furious 1-7 Blu-ray 24,29€, Indiana Jones Complete Blu-ray 14,76€, The Complete...
  3. 39,99€ (Vorbesteller-Preisgarantie)

Folgen Sie uns
       


  1. Internet

    Cloudflare macht IPv6 parallel zu IPv4 jetzt Pflicht

  2. Square Enix

    Neustart für das Final Fantasy 7 Remake

  3. Agesa 1006

    Ryzen unterstützt DDR4-4000

  4. Telekom Austria

    Nokia erreicht 850 MBit/s im LTE-Netz

  5. Star Trek Bridge Crew im Test

    Festgetackert im Holodeck

  6. Quantenalgorithmen

    "Morgen könnte ein Physiker die Quantenmechanik widerlegen"

  7. Astra

    ZDF bleibt bis zum Jahr 2020 per Satellit in SD verfügbar

  8. Kubic

    Opensuse startet Projekt für Container-Plattform

  9. Frühstart

    Kabelnetzbetreiber findet keine Modems für Docsis 3.1

  10. Displayweek 2017

    Die Display-Welt wird rund und durchsichtig



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Matebook X und E im Hands on: Huawei kann auch Notebooks
Matebook X und E im Hands on
Huawei kann auch Notebooks
  1. Matebook X Huawei stellt erstes Notebook vor
  2. Trotz eigener Geräte Huawei-Chef sieht keinen Sinn in Smartwatches
  3. Huawei Matebook Erste Infos zu kommenden Huawei-Notebooks aufgetaucht

Debatte nach Wanna Cry: Sicherheitslücken veröffentlichen oder zurückhacken?
Debatte nach Wanna Cry
Sicherheitslücken veröffentlichen oder zurückhacken?
  1. Android-Apps Rechtemissbrauch ermöglicht unsichtbare Tastaturmitschnitte
  2. Sicherheitslücke Fehlerhaft konfiguriertes Git-Verzeichnis bei Redcoon
  3. Hotelketten Buchungssystem Sabre kompromittiert Zahlungsdaten

Sphero Lightning McQueen: Erst macht es Brummbrumm, dann verdreht es die Augen
Sphero Lightning McQueen
Erst macht es Brummbrumm, dann verdreht es die Augen

  1. Re: Nicht nur O2. ALLE haben aktuell Probleme...

    Maximilian_XCV | 17:33

  2. Re: Jetzt kann ich endlich mein Datenvolumen in...

    NaruHina | 17:30

  3. Re: Störende Kabel?

    HubertHans | 17:26

  4. Re: Gibt es noch Menschen die Analog schauen

    hansjoerg | 17:22

  5. Re: FF Remakes für Switch

    kayozz | 17:20


  1. 17:37

  2. 16:55

  3. 16:46

  4. 16:06

  5. 16:00

  6. 14:21

  7. 13:56

  8. 12:54


  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