Leistungsnachweis im Minor Webtech
Die Audio Visualisierung habe ich im Rahmen des Hackathons im Minor Webtech programmiert. Während den zwei Tagen des Hackathons habe ich mich lediglich auf die Funktionalität konzentriert, so dass ich die FFT Daten einer Audio Datei mithilfe der Web Audio API analysieren und als Punkte darstellen konnte, die sich um einen Kreismittelpunkt verteilen. Der Abstand zum Kreismittelpunkt und die Farbe der Punkte konnte ich abhängig von der Amplitude darstellen.
Der Rest der Webseite
Um die Visualisierung für Digezz zu verwenden, habe ich ausgehend von der Visualisierung die komplette Webseite konzipiert, gestylt und interaktiv gestaltet. Die Anwendung besteht nur aus html, css und reinem javascript (mithilfe der Web Audio API und css Animationen).
Idee, Konzept und Workflow
Der Kern der Webseite sollte klar aus der interaktiven Visualisierung von Audio Dateien bestehen. Alle restlichen Elemente habe ich rund um die Visualisierung herum gebaut. Wie immer (bis jetzt) habe ich mir vorher kein Konzept überlegt, sondern habe mehr drauflos programmiert. Währenddessen habe ich das Konzept ausgedacht. Für diesen eher ineffizienten Workflow gibt es eine Ausrede und zwei Kritikpunkte an mich:
Die Ausrede: Da sich meine Programmiererfahrung eher in Grenzen hält, fällt es mir schwer vorzustellen, was alles im Bereich des Möglichen liegt. Viele Ideen hätten sich später als zu utopisch herausgestellt und andererseits wäre ich auf viele Ideen nie gekommen. Dieser Workflow hat mir erlaubt, mich nicht einzuschränken, mich auf vieles einzulassen und einfach auszuprobieren.
Erste Kritik: Stellenweise habe ich mich total verzettelt, Stunden in Recherchen investiert und am Schluss den Fokus verloren. Zum Beispiel als ich mir überlegt habe, wie ich Soundfiles von Youtube oder Spotify abzapfen kann. Ich habe Stunden mit der Spotify, Soundcloud und Youtube API verbracht, nur um zu merken, dass diese mir nicht wirklich weiterhelfen (weil ein bisschen illegal). Eine strukturiertere Arbeitsweise hätte mir wahrscheinliche einige Recherchen erspart.
Zweite Kritik: Aus «mal schnell was ausprobieren» ist öfters ein Chaos im Code entstanden. Manchmal hätte ich liebsten ganz aufgehört zu programmieren. Gegen Ende habe ich das doch etwas ernster genommen und mir die Mühe gemacht, unbrauchbare Zeilen zu löschen und sauberer zu coden. Dieses Chaos ist auch die Folge davon, ohne Konzept und Idee eine Webseite aufzubauen.
Web Audio API
Die Web Audio API sollte mittlerweile auf den meisten Browsern funktionieren. Doch musste ich feststellen, dass es da grosse Unterschiede gib. Auf Chrome, Firefox, Brave und Opera läuft die Visualisierung. Safari hat manchmal Probleme. Edge und Internet Explorer unterstützen die API nicht. Hoffnungslos überfordert war ich, als ich auf iOS versucht habe, die Audio Wiedergabe über die API zum Laufen zu bringen. Auf Android Smartphones klappt die Anwendung, jedoch nicht wirklich zuverlässig. Ich habe mich jedoch entschieden, mich auf eine Desktop Version zu fokussieren und die Anwendung nicht für mobile Geräte zu optimieren. Das hat mir viel Aufwand erspart und einige Freiheiten in der Usability erlaubt.
Thema Usability und Interaction Design
Mir war wichtig, dass nur die allerwichtigsten Elemente im Viewport während der Visualisierung angezeigt werden. Doch ohne Menu kann man nicht navigieren und ohne Player kann man keinen Sound abspielen. Als mich diese Fragen beschäftigt haben, war mir schon klar, dass die Anwendung nicht optimal auf Smartphones laufen wird. Ich habe mich daher bewusst entschieden, hover Effekte einzubauen und den Play- und Pause-Button mit dem Cursor darzustellen. Ich habe bewusst auf einen Home Button verzichtet, da alle Informationen im Menu zu finden sind und um nicht von der Visualisierung abzulenken. Um den Player etwas intuitiver bedienen zu können, kann man auch die Leertaste brauchen, um Play und Pause auszulösen.
Effizienz
Meine Visualisierung verlangt einiges an Prozessorleistung. Ich bin überzeugt, dass es irgendeinen Weg gibt, die Anwendung so effizient zu programmieren, dass es einen «normalen» Computer nicht nach zwei Minuten zum Überhitzen bringt. Leider fehlt mir hier das technische Knowhow bzw. nur schon der Ansatz, dieses Problem anzugehen.
Fazit
Ich bin sehr zufrieden mit dem Endresultat und mit den ganzen Learnings, die ich durch dieses Projekt gewonnen habe. Ich kann mittlerweile flüssig mit javascript programmieren und weiss, wie ich im Internet nach Lösungen suchen muss. Overall ein wahnsinnig lehrreiches Projekt (oder besser gesagt: Experiment), dass zwar nicht viel kann ausser Audio Dateien zu visualisieren, mir aber viele Freiheiten in der Umsetzung erlaubt hat.
