brentvollebregt / spotify-lyrics-viewer

View the lyrics of the current playing Spotify song in your browser

View the lyrics of the current playing Spotify song in your browser.

🌐: spotify-lyrics-viewer.nitratine.net

📷 Screenshots

📝 Features

• Spotify sign-in for current song identification
• lrclib.net lyric fetching (GENIUS backup)
• Lyrics sync with audio
• Dark theme
• Tokens stored in a session-like object
  • Session is in a cookie due to server restrictions

🛠️ Setup

Currently, Node 17 and above is the only dependency.

1. Clone the repo.
2. Setup the server
   • Execute npm install to install dependencies
   • Execute cp .env.example .env (or copy for Windows) and populate .env
     • SPOTIFY_CLIENT_ID and SPOTIFY_CLIENT_SECRET can be obtained by making a new Spotify application
     • SERVER_SESSION_KEYS is random text used to sign & verify cookie values (use spaces to separate)
     • GENIUS_ACCESS_TOKEN can be obtained by creating a new API client (optional - if this is not provided, Genius will not be used as a backup to lrclib.net)
   • Execute npm run build to build the server
3. Setup the client
   • cd client to change directories to the client project
   • Execute npm install to install dependencies
   • Execute cp .env.example .env (or copy for Windows)
   • Execute npm run build to build the client (the server will host these built files)
   • Go back to the project root: cd ..
4. Execute npm start to start the server

🧪 Development Setup

Client

The client will use the REACT_APP_API_ROOT environment variable value to decide where to send requests. If this is not provided, the current hosted URL will be used.

Server

npm run dev can be used for development of the server; this allows for hot-reloading. Running the client using npm start and setting REACT_APP_API_ROOT on the client to where the server is running will allow for a development setup with hot-reloading.

The "Debug Server" launch configuration in vs code can be used to debug the server

SSL

When running the server locally, HTTPS needs to be setup due to the use of Secure=true on cookies (due to SameSite="none"). The server will look for server.cert and server.key in the current working directory to use for SSL. When first setting up the server, do the following:

1. Generate server.cert and server.key by execute openssl req -nodes -new -x509 -keyout server.key -out server.cert in the root directory.
2. Start the server by executing npm run dev in the root directory.
3. Go to https://localhost:5000/ and click "Advanced" -> "Proceed to localhost (unsafe)", this solves ERR_CERT_AUTHORITY_INVALID for development.

❓ Why?

I often get curious of what the lyrics of the current playing song is. I use Spotify a lot so having somewhere where I could login and it immediately provide the lyrics of the current playing song would be very helpful and save a lot of time.

Spotify has added lyrics back into their application, but if you don't have access to their app and do have access to a web-browser, this can be used to view lyrics.

🌐 Hosting

The backend can be deployed on any host with Node.js. The frontend can be hosted on any web server that can serve static files (like GitHub Pages).

If you are not hosting the application at the root path, for example https://www.example.com/my-app, some extra config needs to be set:

• The .env.example in the root of the repo outlines the environment variables for the server. You will need to set CLIENT_DEPLOYMENT_SUBDIRECTORY.
• The .env.example in the /client directory in the repo outlines the environment variables for the client. You will need to set REACT_APP_BASENAME and PUBLIC_URL.

spotify-lyrics-viewer's Issues

Two small feature requests)

Hey. Can you please add dark theme? And please, pin the player bar, cause right now it's it's a little inconvenient, when you read the last verse, want to pause - and have to scroll to the top. Hope you know what I mean))

Feature request

Possible to add option for auto scroll? So the screen auto scroll the lyrics.

Song title filter feature request

I see you're removing 'feat.' (and things like that) from song titles but can we also remove things like ' - 2013 Remaster' or '(2018 Remaster)?

not working on iphone

Hi great app working prefect via pc web-browser. Whereas I am trying to make it work via iphone but seems like not be able to displaying lyric. Understood I can download spotify app to display lyric but the app dosen't showing lyric continuesly which is quite annoying. I am hoping the issue could be addressed

Brackets problem

Hey. Thank you for dark theme, and pinned player. I found a bug where the lyrics for many songs are not displayed.

Seems like for all songs with brackets in the title, and most often it is "(feat. |ArtistName|)" and "(with |ArtistName|)" - incorrect lyrics are shown. Usually there are not even songs, but a Spotify playlist [For example this is for Eminem - Leaving Heaven (feat. Skylar Grey) ] It's funny, but it happens that the track is correct, but it shows the translation into a random language, not original. [For example this is for Kid Cudi - The Adventures of Moon Man & Slim Shady (with Eminem) ]

A few more examples (although you can easily find them by yourself):
https://open.spotify.com/track/3PFaFVWq5wucLu6s4baj9D?si=utxymX1TRbCbWAio694ETQ --- Playlist
https://open.spotify.com/track/0u2P5u6lvoDfwTYjAADbn4?si=v2yTpmGXQAqMIPw8Smb2HQ --- Playlist
https://open.spotify.com/track/5e7ldn9Kwo8Aw9Z8ql9cDj?si=u1vIYoYJSoKBr8k-gEIuVA --- Translation
https://open.spotify.com/track/7CcoUAtUcYhUfBsmtn0ajO?si=1eFjAHx1RZqm-sdmBAeguQ --- Translation

I've checked about 20 songs with brackets, and for none correct lyrics all of them. I hope you can fix it)

Strange lyrics from API for Song

Using the lyric viewer as I was casually listening through a playlist, a song that doesn't have lyrics returned these suggestive lyrics:
[https://spotify-lyrics-viewer.onrender.com/api/lyrics?title=Ice+Mountain%3A+Lap+Music&artists=SEGA+SOUND+TEAM&artists=Hyper+Potions&artists=Jun+Senoue&albumName=MAXIMUM+OVERDRIVE+-+TEAM+SONIC+RACING+ORIGINAL+SOUNDTRACK&duration=216346]

A little troubling but not project breaking. Not sure if this is an API issue or a viewer issue and I could not find a place to report this on the API.

The original song: https://open.spotify.com/track/1EjEVr5STNNt8SBiKazVNe?si=f16d1c47902145ac

Timestamped Lyrics

Hey @brentvollebregt, just curious if it would be possible to get timestamped lyrics added? It looks like Genius might not have timestamped data. Wondering if you've looked at any other data sources or how hard it might be to add it?

P.S. Thank you for your project! I'm using it in my Tesla and I posted your project on Reddit:

https://www.reddit.com/r/teslamotors/comments/l11c1e/lyrics_for_spotify/

Thanks!