Spotify Web Lyrics Overlay

WHAT IT DOES

This script adds a floating lyrics overlay to the Spotify Web Player, showing the lyrics of the currently playing song. When you play a track on Spotify, the script extracts the track name and artist, fetches the lyrics from a public API, and displays them in a draggable overlay. The lyrics are synchronized with the track's progress—the current line is highlighted in green and the overlay auto-scrolls to keep the active line in view. You can toggle the overlay on and off, copy lyrics to your clipboard, and refresh lyrics manually. The font size is adjustable, and the overlay updates automatically when the track changes.

WHERE IT RUNS

The script runs on the Spotify Web Player (open.spotify.com). It works on both desktop and mobile views.

HOW TO USE

After installation, the settings panel appears on the left side of the screen with the gear emoji (⚙️). Open the panel to configure the script:

- The "Show lyrics overlay" toggle enables or disables the overlay.

- Adjust the "Font size" setting to change the lyrics display size.

- Click "Refresh lyrics" to manually re-fetch the lyrics for the current track.

- Click "Toggle overlay" to show or hide the lyrics overlay.

The overlay appears automatically when you play a track. The current line is highlighted in green and scrolls into view as the song progresses. Click the ✕ button on the overlay to hide it, or use the "Toggle overlay" button.

TECHNICAL SECTION — REAL MECHANISM

The script detects Spotify Web Player pages by checking the URL for open.spotify.com. It extracts the current track information by querying the DOM for elements with data-testid attributes: track-title for the song title and track-artist for the artist name. The progress bar is read from the playback-progressbar element, which provides aria-valuenow (current time in seconds) and aria-valuemax (total duration). Lyrics are fetched using GM_xmlhttpRequest from the public lyrics.ovh API (https://api.lyrics.ovh/v1/{artist}/{title}). The API returns a plain text response containing the lyrics with newline-separated lines. The script parses the response into an array of lines, displays them in the overlay, and calculates the current line index based on the ratio of currentTime to duration. The highlighted line is styled with Spotify's brand color (#1db954) and bold font weight. The overlay auto-scrolls to the current line using scrollIntoView with smooth behavior. A setInterval updates the progress every second.

THE PANEL

The settings panel is built with BotGentz's BGPanel component. It is draggable via its header, allowing you to reposition it anywhere on the screen. The panel snaps to the left edge by default but can be moved freely. Click the gear emoji to collapse the panel into a small bubble, and click the bubble to expand it again. The panel remembers its position per page session. Press the Escape key to quickly close or minimize the panel. The panel includes a status flash bar that provides visual feedback when settings are changed or actions are performed. All settings save automatically via GM_setValue.

PLEASE NOTE

This script requires the free BotGentz browser extension to run. It does not function as a standalone Chrome extension and does not use chrome.* APIs. The lyrics are fetched from the public lyrics.ovh API, which may not have lyrics for all tracks. The API may have rate limits or availability issues. Spotify frequently updates its Web Player interface, which may affect the selectors used to extract track information and progress data. If the script stops working, please check for updates. The synchronization is based on a simple time-based ratio—lyrics with precise timestamps are not currently supported. The script stores only your preferences via GM_setValue. No data is sent externally except for the API request to lyrics.ovh. The script never reads or writes password fields, hidden inputs, or file inputs. All DOM operations use safe methods (style properties, textContent, appendChild) and never use innerHTML.