Live Lyrics

Live Lyrics ist eine Browser-Erweiterung f├╝r den Google Chrome Browser. Dieses erm├Âglicht dem Nutzer die Verbindung zum Spotify-Account und das Anzeigen der Lyrics in Echtzeit. Ich werde in diesem Beitrag ├╝ber die
Addon-Entwicklung und den Webdesign Prozess berichten.
Link zum Projekt

Addon-Entwicklung

Ich startete mit der Verfassung meiner Grundidee. Diese war, eine Echtzeitanzeige der Lyrics von dem aktuell Spielenden Song auf Spotify. F├╝r die Umsetzung Nutzte ich die APIs von Spotify und Genius.

Die Authentifizierung mit Spotify wird durch eine Chrome Extension Funktion ausgef├╝hrt. chrome.identity.launchWebAuthFlow Dadurch k├Ânnen Logindaten nicht mitgeschnitten werden.

Aufgrund von Namensabweichungen zwischen Spotify und Genius, war eine Namensverarbeitung n├Âtig. Als Beispiel: Songname auf Spotify: Home (with Mashine Gun Kelly, X Ambessedors...); Songname auf Genius: Home. Als Pr├Ąventivma├čnahme nutzte ich ein System, welches den Songnamen nach bestimmten Zeichen (z.B. -, (, ), /) abschneidet. Dadurch werden kostante Resultate erzielt.

Die Erweiterung befindet sich noch im Beta Stadium und ist deshalb nicht im Chrome Webstore erh├Ąltlich.

Webdesign Prozess

Das Ziel bei der Webseite war es, ├ťbersichtlichkeit zu erreichen und den Vorhandenen Platz gut zu nutzen. Ein wichtiger Schritt dazu ist, ein ansprechendes Farbschema zu erstellen und dann auch einzuhalten.

Die Internetseite ist in 3 Unterseiten zusammengefasst. Dies reicht f├╝r alle wichtigen Informationen und ├╝berw├Ąltigt den Nutzer nicht direkt beim ├Âffnen. Eine Landingpage, Installationsanleitung und Newsseite.

Die Landingpage hatte f├╝r mich nur 2 Aufgaben. Die wichtigsten Informationen r├╝ber bringen und Visuell ansprechend zu sein. Der CTA (Call To Action) Button ist im Ursprungszustand ein Ghost-Button, welcher sich beim Maus-Over Hovering zu einer gef├╝llten Schaltfl├Ąche transformiert.