Lyrics Finder | Search Song Lyrics And Artist Info Online

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.

Lyrics Finder

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

1. User searches “On My Way” by Alan Walker.
2. 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.