1. Titel & Kurzbeschreibung

Sound Threads ist ein Audio-Visualizer im Browser. Viele leuchtende Fäden hängen von einer Kurve herunter und reagieren auf Musik: Bässe ziehen die Bälle am Fadenende nach unten, Mitten und Höhen bringen die Fäden zum Schwingen. Über eine Spotify-API übernimmt das Projekt die Farben des Album-Covers.

2. Idee

Musik soll nicht nur ein Balken-Equalizer sein, sondern etwas, das sich wie ein physikalisches Objekt verhält. Die Fäden haben Gewicht und Trägheit, hängen durch, schwingen nach und lassen sich mit der Maus wegstoßen.

3. Entwicklungen der Versionen

Vorgeschichte: Start mit ChatGPT

Ich wollte das Projekt zuerst mit ChatGPT umsetzen. Es hatte aber Schwierigkeiten, eine brauchbare Physik in den Visualizer zu bringen. Deshalb habe ich das Problem in der kostenlosen Browser-Version von Claude neu geschildert und von vorn begonnen.

Version 1: Grundgerüst mit Fadenphysik (Claude)

• Physikalisch simulierte Fäden und funktionierende Sounderkennung
• Die Fäden waren noch unruhig und bewegten sich von selbst.
• Die Farben waren fest.
• Die Fadenlänge ließ sich per Slider ändern.
• Es wirkte insgesamt starr.

Version 2: Ruhe und Gewicht

• Ohne Sound bleibt der Player still.
• Neuer Slider für das Gewicht der Bälle

Version 3: Mehr Kontrolle

• Slider „Wave-Intensität“ für die seitliche Bewegung (links/rechts)
• Slider „Beat-Intensität“ dafür, wie stark der Beat die Bälle nach unten zieht
• Ab hier habe ich mit Codex weiter verfeinert.

Version 4: Spotify-Anbindung

Ich wollte, dass der Visualizer den laufenden Song erkennt. Ich habe erst allgemein nach Erkennungs-APIs gesucht. Viele davon kosten nach wenigen Anfragen Geld. Ich benutze selbst Spotify, deshalb habe ich mich für die Spotify API entschieden. Sie ist kostenlos, und das Cover, der Titel und der Interpret lassen sich direkt abrufen.

Version 5 (backup 26-09): Farben aus dem Cover

Aus dem Cover werden die dominanten Farben berechnet. Fäden und Bälle färben sich passend zum aktuellen Song ein.

Finale Version (code-projekt): Feinschliff

• Platzhalterbild (Vinyl-Symbol), solange noch kein Song erkannt wurde
• Startdialog in zwei Schritten: erst Spotify verbinden, dann Audio teilen. Browser erlauben Ton und Mikrofon nur nach einem Klick, deshalb führt der Dialog durch diese Schritte.
• Einklappbares Steuerungspanel

4. Der Code erklärt

Das Projekt besteht aus drei Dateien:

• index.html (Aufbau der Seite: Canvas, Spotify-Karte, Dialog, Slider)
• style.css (Aussehen: Farben, Layout, Panels)
• visualizer.js (Die gesamte Logik (ca. 1200 Zeilen))

a) Ein Faden ist eine Kette aus Punkten (Klasse Thread)

Jeder der 42 Fäden besteht aus 19 Punkten. Der oberste Punkt ist an einer Kurve oben festgemacht, am untersten hängt der leuchtende Ball. Die Bewegung wird mit der Verlet-Integration berechnet. Dabei speichert jeder Punkt seine alte und seine neue Position, und die Geschwindigkeit ergibt sich aus dem Unterschied. Das ist einfach und stabil und wird oft für Seile und Stoffe genutzt. Danach sorgt constrain() dafür, dass benachbarte Punkte ihren Abstand behalten. Ohne diesen Schritt würde sich der Faden beliebig dehnen.

b) Kräfte auf jeden Punkt

• Schwerkraft: zieht nach unten, abhängig vom Slider „Ball-Gewicht“
• Wave: eine Sinuswelle schiebt die Punkte seitlich, gesteuert von Mitten und Höhen der Musik und vom Slider „Wave-Intensität“
• Beat: bei Bässen und Schlägen werden die Bälle nach unten gezogen, gesteuert vom Slider „Beat-Intensität“
• Maus: Punkte in der Nähe des Mauszeigers werden weggedrückt

c) Musik analysieren (getAverages())

Die Web Audio API zerlegt den Ton per Frequenzanalyse (FFT) in Tiefen, Mitten und Höhen. Daraus berechnet der Code Lautstärke und Bass-Energie, glättet sie und blendet leises Rauschen aus. Ein Beat wird erkannt, wenn die Bass-Energie plötzlich stark ansteigt. Der Effekt klingt dann über mehrere Bilder ab.

d) Spotify und Farben

• Login per OAuth mit PKCE. So läuft die Anmeldung sicher ohne geheimes Passwort im Code.
• Der Code fragt regelmäßig „Was läuft gerade?“ ab und lädt das Cover.
• extractPaletteFromImage() verkleinert das Cover, zählt die häufigsten Farben und wählt zwei passende aus. Die Farben werden in HSL (Farbton, Sättigung, Helligkeit) umgerechnet, weil sich damit Glow und Helligkeit einfacher steuern lassen.

e) Der Zeichenzyklus (animate())

Etwa 60-mal pro Sekunde: Audio auslesen, alle Fäden berechnen, Hintergrund und Fäden zeichnen. Jede Linie wird doppelt gezeichnet, einmal breit und transparent für den Glow, einmal schmal für den Kern.
Das war für mich relevant um ein flüssiges Erlebnis zu haben.

5. Verwendete Technologien

Ich habe keine externe JavaScript-Bibliothek wie p5.js oder Three.js benutzt. Alles ist mit reinem Browser-JavaScript umgesetzt:

• Canvas 2D API zum Zeichnen
• Web Audio API (AnalyserNode) zur Frequenzanalyse
• Spotify Web API für den aktuellen Song und das Cover
• Google Fonts (Inter) als Schrift

Zur Client-ID im Code: In visualizer.js steht eine Spotify-Client-ID. Das ist kein Passwort. Das verwendete Login-Verfahren (OAuth mit PKCE) ist dafür gemacht, dass die Kennung im Browser-Code sichtbar ist. Ein geheimer Schlüssel wird nicht benötigt und ist nicht im Projekt enthalten.

6. Arbeiten mit KI (Vibe Coding)

Start erfolgete mit ChatGPT (Fehlschlag):
Erste Versuche, Physik im Visualizer klappte nicht gut

Grundgerüst mit Claude neu aufgebaut:
(Browser, kostenlos) Fadenphysik, Sounderkennung, Slider

Verfeinerung anschließend mit Codex:
Spotify, Farbextraktion, Dialog, Feinschliff

Was ich gelernt habe:

• Ein Tool zu wechseln kann sich lohnen, wenn man festhängt.
• Ein klar beschriebenes Problem bringt bessere Ergebnisse als „mach mir einen Visualizer“.
• In kleinen Schritten vorzugehen hilft. Deshalb habe ich die Backups gemacht.
• Ich muss den Code verstehen, um sinnvoll nachzubessern. Darum gibt es Abschnitt 4.

7. Bedienung

1. Seite öffnen (lokal per Live Server, wegen Spotify-Login)
2. Schritt 1: Mit Spotify verbinden oder überspringen
3. Schritt 2: Bildschirm-/Tab-Audio teilen oder Mikrofon aktivieren
4. Musik abspielen. Mit den Slidern lassen sich Länge, Gewicht, Wave und Beat einstellen.

Hinweis zum Ausprobieren: Die Seite sollte über einen lokalen Server geöffnet werden (z. B. die VS-Code-Erweiterung „Live Server“), nicht per Doppelklick auf die Datei, weil der Spotify-Login eine Web-Adresse braucht. Der Spotify-Login funktioniert nur mit einer Adresse, die in meiner Spotify-App eingetragen ist, und nur für Nutzer, die ich dort freigegeben habe. Wer das Projekt ohne Spotify ausprobieren möchte, klickt im Startdialog auf „Ohne Spotify“. Die Fäden reagieren dann trotzdem auf Musik, nur ohne Cover und Cover-Farben.

8. Fazit

Mit dem Endergebnis bin ich sehr zufrieden. Aus einem starren Anfang mit unruhigen Fäden ist ein Visualizer geworden, der sich lebendig anfühlt. Die Fäden haben Gewicht, schwingen nach und reagieren spürbar auf Bass, Beat und Klangfarbe. Dass sich die Farben nach dem Album-Cover richten, macht jeden Song optisch einzigartig.

Besonders gut finde ich die Audioquellen. Der Ton lässt sich über den Bildschirm oder Tab abgreifen. Alternativ hört das Mikrofon mit, falls die Musik von einem anderen Gerät kommt, etwa vom Handy, von Lautsprechern oder von einer Party. Zusammen mit der Spotify-Anbindung lässt sich der Visualizer nutzen, ohne dass die Musik im Visualizer selbst abgespielt werden muss. Er läuft nebenher und zeigt an, was gerade läuft.

Schwierig war der Start, weil ChatGPT die Physik nicht sauber hinbekam, und später der Spotify-Login mit seinen Sicherheitsvorgaben. Das Projekt hat mir gezeigt, wie wichtig es ist, in kleinen Schritten zu arbeiten, ein Problem klar zu beschreiben und das Werkzeug zu wechseln, wenn man nicht weiterkommt. Außerdem musste ich den Code grundlegend verstehen, um gezielt nachbessern zu können. Deshalb ist er in dieser Doku erklärt.

Für die Zukunft wären diese Erweiterungen denkbar:

• weitere Farbmodi
• Speichern von Slider-Einstellungen als Presets
• Anzeige des Songtitels direkt im Visualizer
• eine Handy-Ansicht