GIF-Logik
Die GIFs im Tutorial-Bereich dienen der Veranschaulichung
zum Öffnen von Getränken. Dafür haben alle GIFs die Klasse tutorial-gif,
sowie
Dateipfade als HTML-Dataattribute. Dieses wird benötigt, um zwischen einem Standbild
(Thumbnail) und dem tatsächlichen GIF zu wechseln, sobald der Benutzer mit der Maus über
das Bild fährt.
Jedem GIF werden dabei 4 EventListener hinzugefügt:
mouseenter, mouseleave, click sowie
keydown. Wird dieses Event durch den Benutzer hervorgerufen, wird das
src-Attribut des Bilds getauscht.
Audiogeräte
Um den Zugriff auf das Mikrofon zu ermöglichen, muss der Benutzer einer Aufnahme
einwilligen. Diese Logik findet sich in der Datei audiogeraete.js wieder.
Dabei werden
die MediaDevices durch die Funktion getUserMedia abgefragt. Diesen Schritt
muss der
Benutzer akzeptieren.
Dabei kommen die Audiogeräte aus dem globalen Objekt Navigator, welches
Informationen sowie Methoden über den Benutzer-Agent enthält.
Anschließend sammelt die Funktion enumerateDevices sämtliche Audioquellen.
Diese werden
daraufhin nach dem Typ gefilert, sodass aussließlich Audioquellen zur Verfügung stehen.
Wurde in der Vergangenheit bereits ein Audiogerät gewählt, wird dieses aus dem
SessionStorage geladen und vorausgewählt. Dabei bildet die DeviceID den
eindeutigen
Faktor des Mikrofons.
Alle Mikrofone werden anschließend als Optionen im Dropdown zur Auswahl angezeigt.
Messlogik
Die Messlogik stellt das Herzstück des Projektes dar. Dafür wird zu Beginn der
Mikrofonzugriff angefragt, diesmal jedoch mit bestimmten Optionen um einen einheitlichen
Messwert zu erhalten.
Die Audiodaten des Mikrofons fließen in eine MediaStreamSource, die als
Adapter zwischen
der MediaSource und dem AnalyserNode existiert. Der
AnalyserNode sammelt die Audiodaten
und stellt diese zur Analyse bereit. Unter anderem kann dadurch die Lautstärke des
Streams erfragt werden.
Dies wird durch die Funktion getFloatTimeDomainData realisiert, die sich in
der
messen-Funktion befindet, welche mit jedem AnimationFrame vom
Browser
ausgeführt wird.
Dabei wird ständig geprüft, ob der aktuelle Messwert bereits der neue Höchstwert ist.
Weiterhin wird der gemessene Wert noch in einen Lautstärke-Kontext gesetzt. Die
getFloatTimeDomainData-Funktion liefert einen Wert zwischen -1 und +1.
Dieser wird
quadriert, gemittelt, und anschließend wird die Wurzel gezogen. Dieser Wert wird dann in
eine logarithmische-Skala umgerechnet, da das menschliche Ohr Lautstärke logarithmisch
wahrnimmt. Abschließend wird ein fester Offset von +100 auf den Wert addiert, der eine
Annährung an das db(A)-Konzept darstellen soll.
Formularlogik
Zum Versenden der Daten für die Anzeige auf dem Leaderboard wird eine
HTTP-POST-Anfrage
an den Webservice gesendet. Als Body werden dafür die Einträge aus dem Formular mit dem
Spread-Operator, sowie ein aktueller Zeitstempel übertragen. Ebenfalls wird der
Content-Type explizit auf application/json gesetzt, da die
Daten im JSON-Format
paketiert werden.
Anschließend wird ein Modal eingeblendet, mit dem der Benutzer sofort auf das
Leaderboard navigieren kann.
Ebenfalls geschieht eine Abfrage, ob der Leaderboard-Webservice erreichbar ist. Falls
dies nicht der Fall ist, lässt sich die Website im Offline-Modus bedienen. Konzepzionell
sollte diese Anfrage über die HTTP-HEAD-Methode geschehen,
HEAD-Anfragen werden jedoch
vom json-server nicht unterstützt.