Arduino – p5.js Keyboard

Arduino p5.js Musik-Keyboard

In diesem Tutorial zeige ich dir, wie du ein Musik-Keyboard mit einem Arduino und p5.js bauen kannst.

Im Gegensatz zu vielen anderen Projekten geben wir die Töne nicht über einen kleinen Arduino-Lautsprecher aus – sondern direkt über den Computerlautsprecher.

Das heißt: Der Arduino erkennt nur die Tastendrücke, der Computer erzeugt den Klang.

Was brauchst du dafür?

• 1x Arduino Uno (oder kompatibel)

• 8x Taster

• Jumper Kabel

• Breadboard

• USB-Kabel für Arduino

• Computer mit Internetzugang (für p5.js)

• Die Libraries: p5.js und p5.serialport

Schaltplan

Überblick über die Funktionsweise

Der Arduino erkennt, wenn eine Taste gedrückt oder losgelassen wird.

Er sendet über die serielle Schnittstelle (USB) ein kurzes Textsignal an den Computer (z.B. "C" oder "stop").

Die p5.serialport-Library öffnet einen seriellen Port im Browser und wartet auf die eingehenden Signale.

Der Browser empfängt die Signale mit Hilfe von p5.js.

Der Browser spielt die passende Frequenz über die Computerlautsprecher ab.

Arduino Code

Du brauchst folgenden Code im Arduino-Programm:

const int buttonPins[8] = {2, 3, 4, 5, 6, 7, 8, 9};
bool lastStates[8] = {HIGH, HIGH, HIGH, HIGH, HIGH, HIGH, HIGH, HIGH};
const char* tones[8] = {"C", "D", "E", "F", "G", "A", "H", "C2"};

void setup() {
  for (int i = 0; i < 8; i++) {
    pinMode(buttonPins[i], INPUT_PULLUP);
  }
  Serial.begin(9600);
}

void loop() {
  for (int i = 0; i < 8; i++) {
    bool currentState = digitalRead(buttonPins[i]);
    
    if (lastStates[i] == HIGH && currentState == LOW) {
      Serial.println(tones[i]); // Taste gedrückt
      delay(5);
    } else if (lastStates[i] == LOW && currentState == HIGH) {
      Serial.println("stop"); // Taste losgelassen
      delay(5);
    }

    lastStates[i] = currentState;
  }
}

Erklärung des Codes

• buttonPins enthält die Pins, an denen die Taster angeschlossen sind.

• lastStates speichert den letzten Zustand jeder Taste (wichtig, um Veränderungen zu erkennen).

• tones ordnet jedem Taster einen musikalischen Ton zu.

In setup():

• Alle Pins werden als Eingänge definiert, dabei wird der interne PullUp-Widerstand aktiviert. Das heißt: Die Pins sind standardmäßig HIGH und gehen auf LOW, wenn die Taste gedrückt wird.

• Die serielle Verbindung wird mit Serial.begin(9600) gestartet. Der Computer kann jetzt Text vom Arduino empfangen.

In loop():

• Jede Taste wird abgefragt.

• Wird eine Taste gedrückt (Übergang von HIGH zu LOW), wird der zugehörige Ton über Serial.println() gesendet.

• Wird eine Taste losgelassen (Übergang von LOW zu HIGH), wird das Signal stop gesendet.

• Ein kleines delay(5) verhindert Prellen der Kontakte.

p5.js-Programm

Jetzt kommen wir zur Visualisierung und zum Ton auf dem Computer.

let serial;
let latestData = "waiting for data";
let osc;
let noteFreqs = {
  "C": 261.63,
  "D": 293.66,
  "E": 329.63,
  "F": 349.23,
  "G": 392.00,
  "A": 440.00,
  "H": 493.88,
  "C2": 523.25
};

function setup() {
  createCanvas(400, 200);
  textSize(16);
  background(220);
  text("Warte auf Tasten...", 10, 30);

  osc = new p5.Oscillator('sine');
  osc.amp(0);
  osc.start();

  serial = new p5.SerialPort();
  serial.list();
  serial.open('/dev/tty.usbmodem1301'); // Hier  deinen Port anpassen!
  serial.on('connected', () => print("Verbunden"));
  serial.on('list', gotList);
  serial.on('data', gotData);
  serial.on('error', print);
  serial.on('open', () => print("Port geöffnet"));
  serial.on('close', () => print("Port geschlossen"));
}

function gotList(thelist) {
  for (let i = 0; i < thelist.length; i++) {
    print(i + ": " + thelist[i]);
  }
}

function gotData() {
  let currentString = serial.readLine().trim();
  if (!currentString) return;

  latestData = currentString;
  console.log("Empfangen:", latestData);

  if (noteFreqs.hasOwnProperty(latestData)) {
    osc.freq(noteFreqs[latestData]);
    osc.amp(0.5, 0.05);
  } else if (latestData === "stop") {
    osc.amp(0, 0.05);
  }
}

function draw() {
  background(255);
  fill(0);
  text("Letzte Eingabe: " + latestData, 10, 20);
}

function mousePressed() {
  userStartAudio();
}

Erklärung des Code

• noteFreqs ist ein Objekt, das jedem Ton den richtigen Frequenzwert (in Hertz) zuordnet.

• osc ist ein Oszillator mit dem in p5.js Töne über Frequenten erzeugt werden können.

• serial ist das Objekt, mit dem wir den seriellen Port steuern.

In setup():

• Ein Fenster (Canvas) wird erstellt.

• Ein Oszillator wird initialisiert, aber die Lautstärke auf 0 gesetzt.

• Die serielle Verbindung wird gestartet:

  • serial.list() zeigt alle verfügbaren Ports an (hilfreich, wenn du deinen Port suchst).

  • serial.open() öffnet den Port – hier musst du deinen eigenen Portnamen eintragen!

  • Verschiedene Events (connected, list, data, etc.) sorgen dafür, dass wir auf Verbindungsstatus und eingehende Daten reagieren können.

In gotData():

• Eingehende Zeilen werden gelesen und gespeichert.

• Wenn eine bekannte Taste (C, D, etc.) empfangen wird, wird der Oszillator auf die richtige Frequenz eingestellt und hörbar gemacht.

• Wenn stop empfangen wird, wird der Ton leise gestellt.

In draw():

• Der Bildschirm wird bei jedem Frame neu gezeichnet und zeigt den aktuell empfangenen Text an.

In mousePressed():

• Um Sicherheitsvorgaben moderner Browser zu erfüllen, muss der Nutzer einmal klicken, um Audio zu aktivieren.

Anpassung des HTML-Code

In den <script>-Tags binden wir externe Bibliotheken ein, die unser Projekt braucht:

• p5.js ist die Hauptbibliothek für kreatives Programmieren im Browser (z.B. für Zeichnungen und Animationen).

• p5.sound erweitert p5.js, damit wir ganz einfach Töne und Klänge erzeugen können.

• p5.serialport ermöglicht die Verbindung zwischen Arduino und p5.js über die serielle Schnittstelle (USB), damit wir Tastenanschläge vom Arduino im Browser nutzen können.

Am Ende wird mit einem weiteren <script> unser eigener p5.js Code eingebunden.

Fertig!

Und so einfach gehts! Jetzt hast du dein eigenes digitales Musik-Keyboard gebaut!

Du kannst die Töne einfach spielen, indem du die Tasten auf deinem Arduino-Board drückst – und dein Computer erzeugt die Musik.

Wie das ganze sich dann anhört kannst du im Video unten anschauen.

Quelle:

Für unser Projekt haben wir uns hier inspireieren Lassen: https://diyelectromusic.com/2020/06/01/simple-arduino-music-keyboard/