Logo Portfolio Bénédict

Juni 2020

Klangkreis – Ein Musik-Visualizer im Browser

Man kennt sie vielleicht noch aus der Zeit, wo man Musik nicht auf Spotify oder Youtube, sondern mit dem Windows Media Player oder iTunes gehört hat: Die Musik-Visualizer. Anhand der Audiodaten der abgespielten Musik werden in Echtzeit optische Effekte, Farben und Formen generiert, die sich passend zur Musik bewegen.

Doch wie funktioniert so ein Musik-Visualizer überhaupt und wie lässt sich so was programmieren? Wie sich herausstellt, ist dieses Vorhaben nicht ganz so kompliziert, wie man vielleicht denken könnte. In JavaScript ist es möglich, die Audiodaten einer Datei mithilfe der schnellen Fourier-Transformation (FFT) auszulesen. Mit den resultierenden Werten kann man grafische Elemente einer Webseite manipulieren. Wie das aussehen kann, kannst Du auf folgender Webseite selbst ausprobieren. Alles, was Du dazu brauchst, ist eine Audiodatei im .mp3 oder .wav-Format. (Achtung! Die Visualisierung enthält flackernde/blitzende Lichteffekte)

KlangKreis – Musik-Visualizer

Gerade keine Audiodatei auf dem PC? Kein Problem, hier ist ein Demovideo:

Doch wofür kann so ein Musik-Visualizer gebraucht werden? Ein möglicher Einsatzzweck sind Konzerte, Live-Events, Clubs und Bars, wo die gespielte Musik mithilfe der Visualisierung noch eine weitere Dimension erhält und so zu einem intensiveren Erlebnis beiträgt. Aber auch Musik-Streamingdienste bieten ihren Nutzern teilweise solche Visualizer an. Gerade im Bereich der Virtual Reality steckt viel Potenzial für solche Verbindungen von Bild und Ton.

Link zum Projekt