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
- 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
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
.envwith theNEXTAUTH_SECRET,SECRET,CLIENT_ID,REDIR,NEXTAUTH_URLvariables, Where-
NEXTAUTH_SECRETis the Encryption key for JWT (haha fancy term?)SECRETandCLIENT_IDfrom Spotify apiREDIRwould behttps://{URL}/api/auth/callback/spotifywhere URL is your hosted/localhost websiteNEXTAUTH_URLis 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
Lyrics
| Desktop | Mobile |
|---|---|
Sharing page
| Desktop | Mobile |
|---|---|
Video