Greasy Fork is available in English.

YouTube & Spotify Lyrics Popup

Display lyrics for currently playing songs on YouTube and Spotify

// ==UserScript==
// @name         YouTube & Spotify Lyrics Popup
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Display lyrics for currently playing songs on YouTube and Spotify
// @author       Ghost
// @match        *://www.youtube.com/*
// @match        *://open.spotify.com/*
// @grant        GM_xmlhttpRequest
// @grant        GM_addStyle
// @require      https://code.jquery.com/jquery-3.6.0.min.js
// ==/UserScript==

(function() {
    'use strict';

    // Your Genius API key
    const GENIUS_API_KEY = 'PtTdzLH09kqkN0WKFYAptf_G20XGUYrboAmetpvmcUgTL8GuOPHmCzquCg-v224LgdEc2jSARcCMwreAjo0Q7A';

    // Insert CSS for the lyrics popup
    GM_addStyle(`
        #lyricsPopup {
            position: fixed;
            bottom: 10px;
            right: 10px;
            width: 300px;
            height: 400px;
            overflow-y: auto;
            background: white;
            border: 1px solid black;
            z-index: 9999;
            padding: 10px;
            display: none;
        }
    `);

    // Create the lyrics popup element
    $('body').append('<div id="lyricsPopup"></div>');

    // Function to get lyrics from Genius
    function fetchLyrics(song, artist) {
        const query = `${song} ${artist}`;
        GM_xmlhttpRequest({
            method: 'GET',
            url: `https://api.genius.com/search?q=${encodeURIComponent(query)}&access_token=${GENIUS_API_KEY}`,
            onload: function(response) {
                const result = JSON.parse(response.responseText);
                if (result.response.hits.length > 0) {
                    const lyricsUrl = result.response.hits[0].result.url;
                    fetchLyricsFromUrl(lyricsUrl);
                } else {
                    $('#lyricsPopup').html('<p>Lyrics not found.</p>').show();
                }
            }
        });
    }

    function fetchLyricsFromUrl(url) {
        GM_xmlhttpRequest({
            method: 'GET',
            url: url,
            onload: function(response) {
                const html = response.responseText;
                const parser = new DOMParser();
                const doc = parser.parseFromString(html, 'text/html');
                const lyrics = doc.querySelector('.lyrics') || doc.querySelector('.Lyrics__Container-sc-1ynbvzw-6');
                if (lyrics) {
                    $('#lyricsPopup').html(lyrics.innerHTML).show();
                } else {
                    $('#lyricsPopup').html('<p>Lyrics not found.</p>').show();
                }
            }
        });
    }

    // Function to detect song on YouTube
    function detectYouTubeSong() {
        const title = document.title.split('-');
        if (title.length >= 2) {
            const song = title[0].trim();
            const artist = title[1].trim();
            fetchLyrics(song, artist);
        }
    }

    // Function to detect song on Spotify
    function detectSpotifySong() {
        const player = document.querySelector('.Root__now-playing-bar');
        if (player) {
            const song = player.querySelector('.track-info__name').innerText.trim();
            const artist = player.querySelector('.track-info__artists').innerText.trim();
            fetchLyrics(song, artist);
        }
    }

    // Watch for changes on YouTube
    if (window.location.host.includes('youtube.com')) {
        let lastTitle = '';
        setInterval(() => {
            if (document.title !== lastTitle) {
                lastTitle = document.title;
                detectYouTubeSong();
            }
        }, 2000);
    }

    // Watch for changes on Spotify
    if (window.location.host.includes('spotify.com')) {
        let lastSong = '';
        setInterval(() => {
            const player = document.querySelector('.Root__now-playing-bar');
            if (player) {
                const song = player.querySelector('.track-info__name').innerText.trim();
                if (song !== lastSong) {
                    lastSong = song;
                    detectSpotifySong();
                }
            }
        }, 2000);
    }
})();