Lyrics Finder

Lyrics Finder is a sleek, interactive web application designed to help users instantly find song lyrics along with rich details such as artist information, album name, and release date. By integrating APIs from Spotify, Last.fm, Lyrics.ovh, and Genius, this tool delivers a visually engaging and data-rich music discovery experience — all within a lightweight, browser-based interface.

Key Features

1. Multi-Source Lyrics Retrieval

Automatically fetches lyrics using the Lyrics.ovh API.
If lyrics aren’t available, it seamlessly redirects users to view them on Genius.

2. Artist Image Integration

Retrieves the artist’s official image from Spotify’s API using OAuth 2.0 authorization.
Displays the image dynamically once a match is found.

3. Detailed Song Information

Uses the Last.fm API to fetch track information such as:
- Artist Name
- Song Title
- Album Title
- Release Date

4. Interactive User Interface

Clean, centered design built with HTML and CSS.
Uses shadows, gradients, and rounded corners for a soft modern aesthetic.
Responsive layout suitable for desktop and mobile.

Technical Architecture

Component	Description
Frontend	HTML5, CSS3, JavaScript (Vanilla JS)
APIs Integrated	Spotify, Last.fm, Lyrics.ovh, Genius
Authentication	Spotify OAuth2 (Client Credentials Flow)
Output	Dynamic DOM manipulation via JavaScript
Styling	Custom CSS with shadows, gradient backgrounds, and centered layout

How It Works — Step-by-Step Flow

1. User Input

The user enters the song name and artist name in the provided input fields.
Upon clicking the “Get Lyrics” button, the getLyrics() function is triggered.

2. Fetching Song Information

The tool calls the Last.fm API using: https://ws.audioscrobbler.com/2.0/?method=track.getInfo&artist={artist}&track={song}&api_key={API_KEY}&format=json
The returned data populates a “Song Details” section with artist, song, album, and release date.

3. Retrieving Artist Image

The app requests a Spotify access token by posting credentials to: https://accounts.spotify.com/api/token
Using the token, it performs a search request: https://api.spotify.com/v1/search?q={artist}&type=artist&limit=1
The resulting image URL is displayed dynamically in an <img> element.

4. Fetching Lyrics

The app first tries the Lyrics.ovh API: https://api.lyrics.ovh/v1/{artist}/{song}
If unavailable, it falls back to the Genius API to find the lyrics page and provides a clickable link.

UI Design Highlights

Element	Description
Container Box	White background with shadow and rounded corners for focus
Input Fields	Purple-tinted background for easy readability
Buttons	Deep purple with hover transition to lighter violet
Images	Auto-centered, responsive artist image with drop shadow
Text Sections	Separated content blocks for clarity and readability

API Summary

API	Purpose	Authentication
Spotify Web API	Fetch artist images and metadata	Client Credentials (OAuth 2.0)
Last.fm API	Get track details (album, release date)	API Key
Lyrics.ovh	Retrieve lyrics directly	None (public API)
Genius API	Fallback for lyrics search	Bearer Token (Access Token)

Example Use Case

User searches “On My Way” by Alan Walker.
The app:
- Displays artist photo from Spotify.
- Shows album details from Last.fm.
- Retrieves lyrics from Lyrics.ovh.
- If missing, provides a Genius link.

Technologies Used

HTML5 — Structural framework
CSS3 — Styling and responsiveness
JavaScript (ES6) — Dynamic API calls and DOM updates
Fetch API — Asynchronous network requests
Spotify, Last.fm, Lyrics.ovh, Genius APIs — External data integration

Conclusion

Our Lyrics Finder tool demonstrates how powerful and creative API integrations can transform a simple search bar into a full-fledged music discovery experience. It merges design, functionality, and interactivity — providing users with not just lyrics but meaningful musical context, artist imagery, and album insights, all in one elegant interface.