Portalyse - gateway to human acoustic perception

Beschreibung

Das hören von Musik befördert den ein oder anderen in eine andere Welt, zumindest gedanklich. Warum nicht auch visuell? Auf diese Frage hin, wurde dieses Projekt ins Leben gerufen. Der Gedanke war, ein visuelles Protal zum imaginären durchgehen und abtauchen zu erschaffen. Durch das Portal, dass beim abspielen der Musik entsteht, wird der akustische Klang in echtzeit visuell dargestellt. Je nach belieben kann der Benutzer das Protal individuell nach Farbe, Form, Kontur und Hintergrund gestalten. Dadurch kann der User einen persönlichen Bezug zur Anwendung herstellen. Das menschliche akustische Hörvermögen ist sehr komplex und umfangreich. Frequenzen in einem Spektrum von 16 bis 20.000 Hz kann der Mensch wahrnehmen und verarbeiten. Je älter ein Mensch wird desto geringer wird diese Bandbreite. Dennoch können gewisse Töne und deren Frequenz unser Gemüt beeinflussen. Daher bietet diese Applikation nicht nur ein Protal in eine andere imgaginäre Welt, sonder bietet dem User die Möglichkeit, sein eigenes Hörvermögen, mithilfe der Audiosynthese, experimentell untersuchen und analysieren zu können. Dabei werden zusätzlich Grundlagen der Synthese von Sound vermittelt.

Interface & Menüführung

Während der Umsetzung und Entwicklung des Projekts fiel auf, dass die Anwendung immer komplexer wurde. Dies stellt neben dem behandelten Thema ebenfalls einen Bezug zu unserem Dachthema Navigating Complexity her. Die Herausforderung dabei war, das Interface in Anbetracht der Usability so nutzbar wie möglich zu gestalten. Aus diesem Grund wurde entschieden, die Teilbereiche der Applikation auf separate Seiten aufzuteilen. Dadurch wird eine Überfüllung des Bildschirms vermieden und die Anwendung mit deren Einstellungsmöglichkeiten wirkt für den Benutzer nicht überfordernd. Somit wird sichergestellt, dass der Nutzer sich selbstständig im eigenen Tempo an die Thematik und Funktionsmöglichkeiten heranführen kann.

Menü

Für die Navigation wurde ein Menü-Button mittig am unteren Bildschirmrand implementiert, mit dem durch die jeweiligen Anwendungen navigiert werden kann.

Wird auf das Hamburger-Icon geklickt, wird dies durch ein X ersetzt und die Untermenüs erscheinen radial um den Menü-Button herum. Die Wahl der Icons fiel bewusst auf nicht konventionelle oder oft verwendete Piktogramme. Der Gedanke war, dass der User die Anwendung spielerisch erkunden und für sich neu erschließen soll. Das Piktogramm mit der Kreisform auf der linken, unteren Seite führt auf die Startseite zurück. Für den Musikplayer und die Einstellungsmöglichkeiten der Visualisierung wurde das Icon mit der Farbmischpalette gewählt, da sich dahinter eine eher gestalterische Anwendung befindet. Die Studiokopfhörer repräsentieren den Synthesizer. Zum Abschluss ist noch ein Fragezeichen vorzufinden, welches dazu dient, dem User mehr Informationen über die Soundsynthese zu liefern. Dafür soll er auf eine externe Seite weitergeleitet werden, auf der sich der Benutzer über die unterschiedlichen Themen einlesen und einarbeiten kann. Leider wurde diese Seite aus zeitlichen Gründen nicht in den Prototypen mit integriert. Um sicherzustellen, das die Icons nicht missinterpretiert werden, erscheint ein beschreibender Text beim hovern über die jeweiligen Buttons.

Ladebildschirm

Beim Aufrufen der Webapplikation muss diese zuerst die verwendeten Audiodatein für den Musikplayer laden. Dabei wird ein Ladebildschirm, mit einer zum Style der Visualisierung passenden Ladeanimation, gezeigt.

Startseite

Sobald die Anwendung bereit ist, erscheint die Startseite. Auf dieser ist das Canvas für die Visualisierung und der Menü-Button zu sehen. Ab hier kann durch einen Klick auf die Kreisbahnen die Audio abgespielt und angehört werden. Dies haucht der Visualisierung zum ersten mal leben ein. Gestoppt wird die Musik, indem erneut auf das Canvas geklickt wird.

Wenn auf den Menü-Button geklickt wird, öffnen sich, wie bereits oben beschrieben, die Untermenüs, die auf die weiteren Seiten verweisen. Um die Performance aufrecht zu erhalten, wird hier mit einfachen CSS- bzw. JS-Mitteln gearbeitet. HTML-Elemente die nicht angezeigt werden sollen, werden im Script selektiert und passend ausgeblendet.

Customize Visual

Diese Anwendung bietet dem Benutzer den Audioplayer und die Bearbeitungsmöglichkeiten der Darstellung der Visualisierung. Von Hintergrundtranzparenz zu Farbvariationen bis hin zur Wahl der Form ist alles dabei. Mithilfe des Reset-Buttons unter den Einstellungen, können die Werte wieder auf die Standardeinstellungen zurückgesetzt werden. Dabei wird ebenfalls der Player gestoppt.

Synthesizer

Der hier implementierte Synthesizer bietet einen guten und einfachen Start in die Audiosynthese. Um diesen testen zu können, muss zunächst der Oszillator eingeschalten werden. Dabei wird der Player, falls er aktiv ist, angehalten und für die weitere Nutzung deaktiviert. Zudem hören die Kreise auf zu rotieren, um die Auswirkungen des Synthesizer deutlicher darzustellen. Damit der Musikplayer wieder genutzt werden kann, muss der Oszillator wieder ausgeschalten werden.

Oszillator

Ein Oszillator (OSC) ist ein elektrisches Gerät, das eine sinusförmige Wechselspannung erzeugt, wodurch ein Ton hörbar wird. Je nach Einstellung der Amplitude dieser Sinuskurve, wird der erzeugte Ton lauter oder leiser. Neben der Amplitude kann die Frequenz, oder auch die Wiederholungsrate des Klangs, angepasst werden. Allerdings gibt es nicht nur sinusförmige Amplituden. Die anderen Typen wie triangle, sawtooth und square können ebenfalls eingestellt werden.

Envelope

Abgekürzt mit ENV, wird in der Soundsynthese verwendet, um das Signal des OSC´s zu verändern. Dadurch können viele Unterschiedliche Töne und Klänge erzeugt werden. In der Audiosynthese wird dieser hauptsächlich als Amplitudenmodulation verwendet. Als Beispiel wurden in der Anwendung die ADSR-Werte implementiert. Die attack time, decay time, sustain und release time sorgen für die Länge eines Tons. Sobald der ENV aktiviert wird, hört der durchgehende Ton des OSC auf und die ADSR-Werte sowie die Frequenz können eingestellt werden. Mit dem unten positionierten Play-Button wird der Ton je nach Einstellung abgespielt. Ebenfalls wie auf der vorherigen Seite gibt es hier einen Reset-Button, mit dem die Werte wieder zurückgesetzt werden.

Interaktionsmöglichkeiten & Farbschema

Es gibt drei unterschiedliche Möglichkeiten zur Interaktion. Die Erste wäre das anklicken der Buttons, als zweites gibt es Slider zum verändern der Werte und zu letzt die Toggle. Die Herausforderung war, die Gestaltung der Inputs so anzupassen, damit sie zur Interaktion anregen. Zur Signalisierung in welcher Interaktionsphase sich die Inputs befinden, wurde folgendes Konzept entwickelt:

Buttons

Beim hovern über einen Button invertiert die Hintergrundfarbe und das Icon wird in einer kontrastreichen Farbe dargestellt.

Slider

Phase 1:
- Ruhezustand

Phase 2:
Der Cursor fährt über die Sliderbahn:
- Hintergrundfarbe invertiert, wie bei Buttons

Phase 3:
Der Cursor hovert über den Regler:
- Hintergrundfarbe des Sliders bleibt verändert
- Regler ändert ebenfalls die Farbe und bekommt eine Kontur

Phase 4:
Durch Klick wird Regler aktiv:
- Hintergrundfarbe des Sliders bleibt verändert
- Regler behält geänderte Farbe und Kontur bei
- Durchmesser des Reglers wird erhöht, um zu signalisieren, dass dieser aktiv ist

Toggle

Phase 1:
- Ruhezustand

Phase 2 & 3:
Cursor hovert über Toggle und betätigt diesen:
- Hintergrundfarbe invertiert
- Kreisfarbe ändert sich
- Kreis bekommt eine Kontur
- Toggle verschiebt die Position auf die andere Seite

Phase 4:
- Ruhezustand

Sobald über eine der Interaktionsmöglichkeiten gehovert wird, verändert sich die Farbe der Unterüberschrift des jeweiligen Teilbereichs. Dadurch wird verdeutlicht, zu welcher Kategorie dieser Slider oder Toggle gehört.

Die Farbwahl viel auf sehr dezente und zurückhaltende Farben, da die Visualisirung und dessen Erscheinung im Vordergrund steht. Um die Interaktionsmöglichkeiten für den User eindeutiger zu gestalten, werden hier dennoch Farben mit hohem Kontrast verwendet. Für die Hover-Funktionen wird ein auffälliges Pink genutzt.

Weiterentwicklung & Vision

Da es sich bei dieser Anwendung um einen Prototypen handelt, ist dieser noch nicht komplett ausgereift. Neben der Informationsseite für die Audiosynthese, die noch eingebaut werden muss, gibt es weitere Punkte die die Applikation optimieren könnten. Ein sehr wichtiger Punkt wäre eine Anzeige für die Werte der Slider. Dadurch würde der User leichter nachvollziehen können, was er eingestellt hat. Desweiteren war die Überlegung, mehr Piktogramme anstelle von Text zu verwenden, um das Interface simpler zu gestalten. Zusätzlich könnten Informationstexte zu einem jeweiligen Begriff erscheinen, wenn über diesen gehovert wird. Das erleichtert das Verständnis, was gerade eingestellt wird.

Technische Umsetzung

Das Projekt wurde mithilfe der p5.js und der p5.sound.js Library umgesetzt. Programmiert wurde in VS Code. Das Programm wurde in HTML, CSS, SCSS und JavaScript geschrieben. Die verwendeten Audiodateien stammen aus der YouTube Audio Library.

Disclaimer

Vorsicht ist bei der Nutzung dieser Anwendung geboten. User mit Hörschädigung und/oder mit Hörgeräten sollten die Lautstärkeeinstellungen vor Nutzung überprüfen und diese anpassen. Bei falscher Anwendung und durch das Einstellen von zu hohen Frequenzen kann es zu Schädigungen im Gehörgang kommen. Der Entwickler André Grosser sowie die Hochschule für angewandte Wissenschaften Augsburg übernimmt keine Haftung für Schädigungen und Folgebeschwerden.