lirics

Lirics is a self-hosting service that brings real-time Spotify lyrics to your screen with a beautiful, Apple Music-like aesthetic.

As spotify made lyrics into a premium feature, I came up with this cool idea to display accurate timed-lyrics in Apple Music style.

[!IMPORTANT] Thanks to LRCLib api for providing lyrics

Features

• Real-Time Lyric Display: See the lyrics of your favorite songs in real time as they play on Spotify.
• Playback Control: Spotify Premium users can control playback directly from the app.
• Interactive Lyrics: Click on any line of lyrics to jump to that specific part of the song.
• Advanced Navigation: Easily seek 10 seconds forward or backward with intuitive controls.
• PWA Support! Install the website as an app in supported browsers

Installation

To get started with Lirics, follow these steps:

• Clone the repository: git clone https://github.com/Rahuletto/lirics.git
• Navigate to the project directory: cd lirics
• Get Spotify API key from Spotify developer dashboard
• Setup the .env with the NEXTAUTH_SECRET, SECRET, CLIENT_ID, REDIR, NEXTAUTH_URL variables, Where
  • • NEXTAUTH_SECRET is the Encryption key for JWT (haha fancy term?)
    • SECRET and CLIENT_ID from Spotify api
    • REDIR would be https://{URL}/api/auth/callback/spotify where URL is your hosted/localhost website
    • NEXTAUTH_URL is self-explanatory, its the url of your site.
• Install the necessary dependencies:

  npm install
  

• Start the application:

  npm run build && npm run start
  

Once installed, you can access Lirics from your web browser. Ensure you have a Spotify Premium account to utilize playback controls within the app, other than that you can see timed lyrics without any subscription.

This can only be self-hosted as Spotify didnt approve my application for the API to be used by public

Your application would be rejected if requested to be published to public for the reason Synchronization: Spotify content is used in the background of visual media, such as advertising, film, TV programs, livestreams, slideshow videos, lyrics (etc.)

[!WARNING] This is not affiliated to Spotify

Screenshots

Lyrics

Sharing page

Video

https://github.com/Rahuletto/lirics/assets/71836991/0adf6cae-99e1-4cb8-8247-a3fe6e3600b4