Lukas Schönsgibl - Gitarrist & Webentwickler

Die Frustration als Ausgangspunkt

Im Musikschulalltag gibt es eine wiederkehrende Situation, die mich besonders frustrierte. Immer wieder fragten mich Schülerinnen und Schüler nach Metronom-App-Empfehlungen. Beziehungsweise will ich meinen Schützlingen eine App ohne schlechtes Gewissen empfehlen. Die Reise von kostenpflichtigen Apps bis hin zum vorherrschenden Abo-Modell erzeugte dann doch sehr viel Motivation in mir selbst etwas auf die Beine zu stellen. Es galt ein Gegenprogramm der verfügbaren Apps mit überladener Werbung oder Sammlung von Nutzerdaten auf die Beine zu stellen.

Als Pädagoge möchte ich meinen Schülerinnen und Schülern Tools an die Hand geben, die frei zugänglich, datenschutzfreundlich und ohne Ablenkungen nutzbar sind. Also fasste ich einen Entschluss: Ich würde selbst ein Metronom entwickeln – aufgrund meines beruflichen Alltags und Faszination für AI Tools wollte ich es gleich dazu nutzen, mich von KI unterstützen zu lassen.

Der Einstieg ins "Vibe Coding"

Meine erste echte KI-Programmiererfahrung begann mit einem Konzept, das ich „Vibe Coding" nenne. Statt mich durch endlose Tutorials zu quälen oder frustriert über Syntaxfehler zu brüten, nutzte ich KI-Tools als Assistenten. Ich weiß schon, die YouTube-Welt ist voll von Predigern, die gebetsmühlenartig verkünden, dass KI mittlerweile besser sei als die restliche Menschheit – vor allem beim Coden. Meiner Erfahrung nach sieht die Realität jedoch anders aus. Es bedarf einer präzisen Technik, um mit der KI zu arbeiten: genaues Prompting, Geduld und Beharrlichkeit – alles Eigenschaften, die mir durch meine Führungstätigkeit und als Instrumentalpädagoge nicht fremd sind.

Die Werkzeuge meiner Wahl

Visual Studio Code

wurde zu meiner primären Entwicklungsumgebung. Da ich schon einige Programmierprojekte realisieren konnte, kam mir zugute, dass ich schon reichlich Erfahrung mit diesem Editor vorweisen konnte. Die IDE bietet mittlerweile eine nahtlose Integration von KI-Assistenten direkt im Editor, was den Entwicklungsfluss erheblich beschleunigt. Ich konnte in natürlicher Sprache beschreiben, was ich erreichen wollte, und erhielt sofort funktionierenden Code.

Claude

nutzte ich für komplexere Architekturentscheidungen und um Best Practices zu verstehen. Die Fähigkeit, längere Kontexte zu verarbeiten, half mir besonders bei der Strukturierung des Projekts. Die Verwendung eines MCP Desktop Commander half mir ebenfalls, das Projekt lokal zu realisieren und zu debuggen.

ChatGPT und Gemini

waren meine Tools für spezifische Probleme und schnelle Lösungen. Wenn eine Funktion nicht wie erwartet funktionierte, konnte ich den Fehler beschreiben und erhielt meist innerhalb von Sekunden eine Lösung. Meistens über den Prozess Copy - Paste.

Der Entwicklungsprozess

Die Entwicklung von LibreMetronome verlief in mehreren Phasen:

Phase 1: Konzeption und Grundfunktionen

Zunächst definierte ich die Kernfunktionen, die ein gutes Metronom haben muss:

Präzise Zeitmessung
Variable BPM-Einstellungen (40-240 BPM)
Verschiedene Taktarten
Visuelle und akustische Rückmeldung
Responsive Design für alle Geräte

Mit Hilfe der KI-Tools erstellte ich ein erstes funktionierendes Grundgerüst in wenigen Stunden – etwas, was mir ohne diese Unterstützung Wochen gekostet hätte.

Phase 2: Das Web Audio API Abenteuer

Die größte technische Herausforderung war die Implementierung einer präzisen Zeitmessung. Browser-basierte Timer sind notorisch unzuverlässig für musikalische Anwendungen. Hier zeigte sich der wahre Wert der KI-Assistenz. Obwohl ich schon einige Projekte umsetzen konnte, bin ich kein Spezialist auf diesem wichtigen Gebiet. Für Musiker:innen ist ein ungenaues Metronom wertlos. Durch einen ausführlichen Prompt wird eine sample-genaue Präzision ermöglicht.

// Minimale Latenz für präzises Timing
function schedulePlay({ buffer, audioCtx, when, nodeRefs, debugInfo = {} }) {
    const now = audioCtx.currentTime;

    // Drastisch reduzierte Latenz auf ~1ms
    if (when <= now) {
        when = now + 0.001; // Nur 1ms Verzögerung statt 5-10ms
    }

    const source = audioCtx.createBufferSource();
    source.buffer = buffer;

    const gainNode = audioCtx.createGain();
    gainNode.gain.setValueAtTime(volumeRef.current, when);

    source.connect(gainNode).connect(audioCtx.destination);
    source.start(when);

    // Automatisches Cleanup nach Wiedergabe
    source.onended = () => {
        try {
            source.disconnect();
            gainNode.disconnect();
        } catch (err) {
            // ignore
        }
    };
}

Phase 3: User Interface und Accessibility

Moodboard - Design via Adobe Illustrator

Als Instrumentalpädagoge war mir besonders wichtig, dass das Interface intuitiv und ablenkungsfrei ist. Als Webentwickler, der mit Frontend begonnen hatte, war es mir wichtig, ein vielseitiges und ansprechendes Design zu entwickeln. Besonders stolz bin ich auf die verschiedenen Modi, um für jede Anwendung das richtige Metronom parat zu haben.

Analog/Pendelmodus - klassisch und vertraut

Grid Modus - modern und übersichtlich

Circle Modus - visuell ansprechend

Multicircle Modus - für komplexe Rhythmen (Bspw.: /: 4/4 und 7/8 :/) - für polyrhythmische Übungen

Phase 4: Progressive Web App

Um das Metronom auch offline nutzbar zu machen, implementierte ich PWA-Funktionalität. Schülerinnen und Schüler können die App auf ihrem Smartphone installieren und wie eine native App nutzen – ohne App Store, ohne Tracking, ohne Werbung.

Erkenntnisse

Dieses Projekt bildet einen weiteren Aufzeig von Perspektiven, wie wir mit KI in der Bildung arbeiten können. KI-Tools sind nicht nur Hilfsmittel für Profis, sondern ermöglichen es auch Quereinsteigern, ihre Ideen umzusetzen. Als Musikschuldirektor sehe ich enormes Potenzial für den Einsatz solcher Tools im Unterricht – nicht um das Lernen zu ersetzen, sondern um Kreativität zu fördern und Barrieren abzubauen.

Open Source als pädagogisches Prinzip

Die Entscheidung, LibreMetronome als Open-Source-Projekt zu veröffentlichen, war bewusst. Als Instrumentalpädagoge glaube ich an den freien Zugang zu Bildungsressourcen. Der Quellcode ist auf GitHub verfügbar, und ich würde mich sehr freuen, wenn Schülerinnen und Schüler das Projekt erkunden und eigene Verbesserungen beitragen:

Github Link

Technische Details für Interessierte

Für diejenigen, die es genauer wissen wollen, hier die technische Zusammenfassung:

Audio Engine: Web Audio API für präzises Timing
UI: Mobile-first, responsive Layout
Performance: Optimiert für niedrige Latenz
Hosting: Statische Website auf libremetronome.com via Nginx, Gunicorn und Certbot

Fazit und Ausblick

LibreMetronome ist mehr als nur ein Metronom – es ist ein weiterer Wink mit dem Zaunpfahl, dass KI-gestützte Entwicklung neue Möglichkeiten für Programmierer:innen eröffnet. Als Kulturmanager, Developer und Instrumentalpädagoge kann ich nun digitale Tools entwickeln, die genau auf die Bedürfnisse meiner Schüler:innen, Kund:innen oder auch meine eigenen zugeschnitten sind.

Die Erfahrung hat mich motiviert, weitere Projekte anzugehen. Der Weg ist das Ziel, und mit KI als Co-Pilot macht die Reise nicht nur mehr Spaß, sondern führt auch schneller zu brauchbaren Ergebnissen. Vorausgesetzt, es besteht ein Grundwissen über den Bereich. Diese App wurde von mir nicht in einer Stunde geschrieben, sondern ist das Ergebnis eines Prozesses, der sich über drei Monate – zwar nicht am Stück – hingezogen hat. Dieser umfasste unzähliges Debuggen und erforderte oft, selbst zu programmieren oder zu designen, weil die KI-Vorschläge unnötig komplex waren oder zu viele Zeilen sowie Codedateien ausgaben.

Doch der Traum von nützlichen Tools für Musiker:innen durch die Entwicklung mit KI-Assistenz lebt. LibreMetronome soll von der Community leben. Ob Bug-Reports, Feature-Vorschläge oder Code-Beiträge – jede Form der Unterstützung ist willkommen.