KlangKreis – Ein Musik-Visualizer im Browser

8. Juni 2020
von

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.
(bae)

Kritik
von Bénédict Sandoz

Idee:

Musikvisualisierungen finde ich schon lange ein extrem interessantes Konzept, dessen Potenzial aus meiner Sicht noch nicht voll ausgeschöpft wurde. Der ultimative Musikvisualizer würde es dem Nutzer erlauben, mit allen Sinnen in einen Song einzutauchen. Mit meinem auf JavaScript basierenden Visualizer wollte ich die Basics dieser Technologie erlernen und gleichzeitig meine Kenntnisse in JavaScript vertiefen. Natürlich sollte das Endprodukt auch optisch ansprechend sein.

Prozess:

Meine ersten Nachforschungen zeigten, dass es gar nicht so kompliziert ist, einen simplen Visualizer zu programmieren, wie ich befürchtet hatte. Schon in relativ kurzer Zeit hatte ich einen einfachen Prototypen, der die Lautstärkenwerte in Frequenzbändern/-balken anzeigte. Optisch machte dieser allerdings noch keinen grossen Eindruck. Ich wollte einen Kreis oder Ring als zentrales Element der Visualisierung haben und mehr mit Farben arbeiten. Dies umzusetzen stellte sich dann schon als komplizierter heraus. Mit viel Trial&Error und googlen erreichte ich schliesslich aber ein Ergebnis, mit dem ich relativ zufrieden bin.

Fazit:

Wie erhofft konnte ich mit diesem Projekt meine JavaScript Kenntnisse erweitern und die Grundlagen der Audiovisualisierungen lernen. Das Endprodukt besteht aus einer funktionsfähigen und optisch ansprechenden Webseite. Verbesserungspotenzial ist aber noch vorhanden. Einerseits reagiert die Visualisierung noch nicht genug auf Änderungen in der Intensität der Musik. Ich würde auch gerne einzelne Frequenzbereiche optisch klarer unterscheidbar machen (Bass vs. Höhen). Technisch ist die Visualisierung noch abhängig von der Position des Lautstärkenreglers auf der Webseite, d.h. wenn der Nutzer die Lautstärke reduziert nimmt auch die Intensität der Visualisierung ab.

Keine Kommentare

Schreibe einen Kommentar