lyrics finder
1.0.0
Kurz gesagt - Erstellen einer einzelnen Seitenanwendung, die stark auf eine oder mehrere APIs angewiesen ist.
Die API, die ich verwendet habe, ist der MusixMatch -Katalog der Songtexte, der sich unter https://www.musixmatch.com/ befindet.
Benutzer, die die Texte eines bestimmten Songs nachschlagen möchten, können dies mit Lyric Finder tun.
Der Benutzer kann nach Künstler oder Song suchen und wird zurückgegeben und eine Liste von Ergebnissen zurückgegeben, durch die er navigieren kann, um die Texte des Songs zu finden, nach dem sie suchen.
Die Seite ist jetzt live unter https://hfolcot.github.io/lyrics-finder/
Bitte beachten Sie, dass die Texte aufgrund von Lizenzierung nicht vollständig gedruckt sind
Die Seite verwendet Bootstrap 4.0.0 und verwendet ihr Gittersystem und andere Styling.
Die Seite verwendet die südlichen Schriftarten von Nunito Sans und Corben von Google -Schriftarten sowie Icons von FontAwesome.
Mein eigenes weiteres Styling wurde innerhalb von Assets/CSS/Main.css durchgeführt
Das Scripting verwendet JQuery 3.3.1.
Die verwendete API ist https://api.musixmatch.com/ws/1.1. Die zurückgegebenen Daten befinden sich im JSONP -Format und so war eine Jquery Ajax -Anfrage erforderlich, um die Daten zu erhalten.
Dies sind die einzelnen Stufen, in denen sich die App befinden kann - die folgenden Zahlen werden verwendet, um zu beschreiben, in welcher Funktion jede Funktion verwendet wird und in welcher Stufe sie führt.
Es gibt auch Funktionen in jeder Phase, um über die Schaltfläche "Löschenergebnisse" zurück zur vorherigen Seite zurückzukehren.
In Lyric Finder werden sieben Hauptfunktionen verwendet:
Diese Funktion wird aufgerufen, sobald der Benutzer auf die Suchschaltfläche geklickt hat. Es überprüft, welcher Wert des Optionsschaltwerks überprüft wird, und die relevante Funktion basierend darauf führt dies aus.
Diese Funktion wird zu Beginn aller folgenden Funktionen aufgerufen, um alle Daten zu löschen, die sich möglicherweise bereits im Ergebniscontainer befinden.
Diese Funktion wird von checkRadio () aufgerufen, wenn das Optionsfeld von Songs beim Durchsuchen des Benutzers überprüft wurde. Die Funktion führt eine $ .ajax -Anforderung an https://api.musixmatch.com/ws/1.1/track.search mit dem Wert, den der Benutzer als Parameter q_track in das Suchfeld eingegeben hat. Wenn die Anforderung erfolgreich ist, wird eine variable TrackResults erstellt, die die zurückgegebene Liste der Tracks enthält. Diese werden nach Popularität des Künstlers als auf dem Bewertungssystem von MUSIXMATCH basieren. Dann werden für jedes Element dieser Liste der Name und der Künstler in den Ergebniscontainer in index.html eingegeben, zusammen mit einer Schaltfläche, mit der der Benutzer die Texte des ausgewählten Songs angezeigt wird. Dies funktioniert, indem die Track_id als Parameter in die Funktion von GetRyrics () übergeben wird, die auf Klick ausgelöst wird.
Diese Funktion wird von checkRadio () aufgerufen, wenn das Optionsfeld von Artist bei der Suche des Benutzers überprüft wurde. Die Funktion führt eine $ .ajax -Anforderung an https://api.musixmatch.com/ws/1.1/artist.search mit dem Wert, den der Benutzer in das Suchfeld als Parameter für Q_Artist eingegeben hat.
Wenn die Anfrage erfolgreich ist, wird eine variable Artistsults erstellt, die die zurückgegebene Liste der Künstler enthält. Diese werden nach Beliebtheit sortiert, basierend auf dem Bewertungssystem von Musixmatch. Dann wird für jedes Element dieser Liste der Künstler zusammen mit einer Schaltfläche in den Ergebniscontainer in idex.html eingegeben, mit dem der Benutzer die Alben des ausgewählten Künstlers angezeigt wird. Dies funktioniert, indem der Artist_ID als Parameter in die Funktion getalbumList () übergeben wird, die auf Klick ausgelöst wird.
Diese Funktion läuft ähnlich wie die beiden vorherigen Funktionen. Der Artist_ID wird von der Getartist () -Funktion in sie übergeben, und dies wird verwendet, um die Albumdaten für diesen Künstler zu erhalten. Es wird dann in das Containerelement als Liste gedruckt, die den Namen jedes Albums enthält, und eine Schaltfläche, die die Möglichkeit gibt, die Titelliste für dieses Album anzuzeigen. Dadurch wird GetTrackList () auf Klick ausgeführt und übergeben das Album_ID als Parameter in diese Funktion.
Das Album_ID wird in diese Funktion übergeben und verwendet, um eine Anfrage an https://api.musixmatch.com/ws/1.1/album.tracks.get für die Liste der Tracks auf diesem Album zu stellen. Dadurch wird dann die Liste der Tracks mit der Option zurückgegeben, die Texte anzuzeigen, wieder mit einer Schaltfläche wie in getTrack ().
Diese Funktion wird aufgerufen, wenn eine Schaltfläche in einer Liste von Songs geklickt wird. Die Track -ID des ausgewählten Songs wird aus der vorherigen Funktion durchlaufen. Die Funktion verwendet zwei separate AJAX -Aufrufe. Der erste wird verwendet, um Daten von der Track zu erhalten. Geben Sie in der API den Spurnamen aus, damit er als Titel angezeigt werden kann. Ein zweiter Anruf wird dann an Match.lyrics getätigt. Geben Sie die Texte selbst zurück. Wenn keine Texte zurückgegeben werden müssen, wird im Containerelement eine benutzerdefinierte Fehlermeldung angezeigt.
Das Layout der Seite wurde sehr einfach gehalten, um die Methoden offensichtlich und einfach zu halten. Es wurde ein dunkles Hintergrundbild verwendet, das sanft im Auge ist und die Aufmerksamkeit des Benutzers nicht auf sich zieht. Das Farbschema versucht, dieses Bild so weit wie möglich anzupassen, und wurde mit coolors.co erstellt. Die Daten werden in einer Tabelle mit geeigneten Kopfzeilen zurückgegeben.
Der JavaScript -Code wurde auf JSHINT ausgeführt und gab keine Fehler zurück. Das HTML wurde im W3C -Markup -Validator ausgeführt und gab keine Fehler zurück. Das CSS wurde mit dem W3C CSS -Validator ausgeführt und gab keine Fehler zurück.
Während des Testens der Benutzer wurde festgestellt, dass nicht alle Songs in der MusixMatch -Datenbank Texte haben, und daher wurde ein benutzerdefinierter Fehler für diejenigen hinzugefügt, die im Ergebnis keinen Lyrics_Body -Schlüssel haben.
Assets/JS/Spec.js wurde erstellt und ausgeführt, um die Funktionalität von Resetpage () zu überprüfen. Dieser Test war erfolgreich. Um sicherzustellen, dass das Testskript korrekt war, wurde die Funktion so bearbeitet, dass Text in den Ergebniscontainer einbezogen wurde, und an diesem Punkt fehlgeschlagen der Test.
Während des Tests gab es ein interessantes Problem, bei dem keine Texte für jeden Song mit doppelten oder einzelnen Zitatspuren zurückgegeben wurden. Bei der Untersuchung schien es, dass das Problem durch die Funktion verursacht wurde, die versuchte, einen Songnamen in eine neue Funktion zu übergeben (Getyrics, umbenannt in diesem Prozess in Rückkehrlyrics), aber als Zitate im Song -Namen vorhanden waren, las es dies als das Ende als das Ende des Parameters und des Irrtums, weil es keine abschließende Klammer gab. Dies wurde gelöst, indem Getyrics so bearbeitet wurde, dass der Song -Name selbst in einem separaten Anruf abgerufen wurde, anstatt ihn aus der vorherigen Funktion durchzugeben.
Jede Teststufe wurde nach Änderungen neuer Funktionalität neu gemacht.
Getestet werden:
(X = wie erwartet funktionieren) (o = nicht wie erwartet funktionieren)
Im Folgenden wird getestet, ob der Code wie erwartet funktioniert.
| Browser/Test | Oper | Firefox | Chrom | Rand | Safari |
|---|---|---|---|---|---|
| 1 | X | X | X | X | X |
| 2 | X | X | X | X | X |
| 3 | X | X | X | X | X |
| 4 | X | X | X | X | X |
| 5 | X | X | X | X | X |
| 6 | X | X | X | X | X |
| 7 | X | X | X | X | X |
| 8 | X | X | X | X | X |
| 9 | X | X | X | X | X |
| 10 | X | X | X | X | X |
| 11 | X | X | X | X | X |
| 12 | X | X | X | X | X |
| 13 | X | X | X | X | X |
| 14 | X | X | X | X | X |
| 15 | X | X | X | X | X |
| 16 | X | X | X | X | X |
| 17 | X | X | X | X | X |
Im Folgenden wird getestet, ob das Display wie erwartet funktioniert.
| Browser/Test | Oper | Firefox | Chrom | Rand | Safari |
|---|---|---|---|---|---|
| 1 | X | X | X | X | X |
| 2 | X | X | X | X | X |
| 3 | X | X | X | X | X |
| 4 | X | X | X | X | X |
| 6 | X | X | X | X | X |
| 7 | X | X | X | X | X |
| 8 | X | X | X | X | X |
| 9 | X | X | X | X | X |
| 11 | X | X | X | X | X |
| 12 | X | X | X | X | X |
| 14 | X | X | X | X | X |
| 15 | X | X | X | X | X |
| 17 | X | X | X | X | X |
Auf Microsoft Edge wurde ein Problem festgestellt, bei dem das Hintergrundbild nicht richtig angezeigt wurde. Dies lag an der Position des Skriptelements im HTML -Code. Sobald es eher bis zum Ende des Körpers als in den Kopf verschoben wurde, wurde das Hintergrundbild richtig angezeigt.
Ein weiteres Problem wurde auf dem iPhone gefunden, auf dem das Hintergrundbild nicht repariert blieb und nicht mit der Seite scrollen würde, was zum Hintergrund "Auslauf" des Hintergrunds führte, wenn eine große Menge an zurückgegebenen Daten heruntergefahren wurde. Untersuchungen haben gezeigt, dass dies ein bekanntes Problem mit iOS ist. Dies wurde durch die Verwendung einer Medienabfrage aufgelöst, um den Hintergrund so einzustellen, dass sie auf kleineren Bildschirmen wiederholt wurden.
Verwenden von Google Chrome Developer Tools, um zu testen, wie jede Phase der Anwendung in unterschiedlicher Bildschirmbreite angezeigt wird.
X = wie erwartet anzeigen
| Bildschirmbreite/Seitenanzeige | Galaxy S5 | Pixel 2 | Pixel 2xl | iPhone 5/se | iPhone 6/7/8 | iPhone 6/7/8 Plus | iPhone x | iPad | iPad Pro |
|---|---|---|---|---|---|---|---|---|---|
| 1 | X | X | X | X | X | X | X | X | X |
| 2 | X | X | X | X | X | X | X | X | X |
| 3 | X | X | X | X | X | X | X | X | X |
| 4 | X | X | X | X | X | X | X | X | X |
| 6 | X | X | X | X | X | X | X | X | X |
| 7 | X | X | X | X | X | X | X | X | X |
| 8 | X | X | X | X | X | X | X | X | X |
| 9 | X | X | X | X | X | X | X | X | X |
| 11 | X | X | X | X | X | X | X | X | X |
| 12 | X | X | X | X | X | X | X | X | X |
| 14 | X | X | X | X | X | X | X | X | X |
| 15 | X | X | X | X | X | X | X | X | X |
| 17 | X | X | X | X | X | X | X | X | X |
Dieses Projekt wurde in Cloud9 gebaut und nach GitHub gedrängt, wo es dann auf Github-Seiten unter https://hfolcot.github.io/lyrics-finder/ veröffentlicht wurde
